【前端开发】HTML1

HTML标签

HTML全称 Hypertext Markup Language (超文本标记语言)
通过一系列的标签来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。
双标签:拥有开始标签和结束标签,内容位于两者之间

<p>这是一个段落</p>
<h1>这是一个标题</h1>
<a href="#">这是一个超链接</a>

单标签:用于没有内容的元素

<input type="text">
<br>
<hr>

HTML文件结构

一般结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 练习</title>
</head>
<body>
    
</body>
</html>

HTML含6个标题标签,文本样式能进行如下更改:字体加粗、斜体、下划线、删除线。

<body>
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>
    <p>这是一个段落标签</p>
    <p>更改文本样式:<b>字体加粗1</b></p>
    <p>更改文本样式:<strong>字体加粗2</strong></p>
    <p>更改文本样式:<i>字体斜体</i><u>下划线</u><s>删除线</s></p>
</body>

无序列表ul包含几个li标签

<ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
    </ul>

有序列表ol

<ol>
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
    </ol>

表格标签table,行标签tr,第一行是列标题th,每一行含很多td(表格数据)

<table border="1">
        <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
    </table>

HTML标签属性

属性用于定义元素的行为和外观,以及与其他元素的关系
基本语法:<开始标签 属性名="属性值">
每个HTML元素可以具有不同属性
属性名称不区分大小写,属性值区分大小写

适于大多数HTML元素的属性
class: 为HTML元素定义一个或者多个类名
id: 定义元素的唯一ID
style: 规定元素的行内样式

超链接
href 引用链接
target 链接打开到的页面
br 换行
hr 分割线

<body>
    <a href="https://docs.geeksman.com">超链接</a>
    <br>
    <a href="https://docs.geeksman.com" target="_blank">超链接2</a>
    <hr>
    
</body>

图片 src 图片来源 alt 若图片无法显示则显示alt

<body>
    
    <img src="imag1.png" alt="" width="200" height="100">
    <hr>
    <img src="imag.png" alt="该图片无法显示">
    <hr>
    <img src="https://img.xz7.com/d/file/2023/05-31/86f3bf454de052bc58db253c0fd93bd1.png" alt="">
</body>

相关推荐

  1. 前端开发1HTML

    2024-03-11 16:46:02       31 阅读
  2. 前端开发HTML1

    2024-03-11 16:46:02       18 阅读
  3. 前端开发 :(二)HTML基础

    2024-03-11 16:46:02       26 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-11 16:46:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-11 16:46:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-11 16:46:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-11 16:46:02       18 阅读

热门阅读

  1. 2k_Day2:今天是springMVC和mybatisPlus的大白话

    2024-03-11 16:46:02       19 阅读
  2. Spring MVC ExpressionValueMethodArgumentResolver原理解析

    2024-03-11 16:46:02       20 阅读
  3. 接口测试常问问题

    2024-03-11 16:46:02       23 阅读
  4. [Flutter]使用Provider进行状态管理

    2024-03-11 16:46:02       22 阅读
  5. Spring MVC面试系列-02

    2024-03-11 16:46:02       18 阅读
  6. Android Jetpack Compose基础之State状态

    2024-03-11 16:46:02       23 阅读
  7. 009-组件的data为什么是个函数

    2024-03-11 16:46:02       20 阅读
  8. WatchBird: 新一代纯PHP防火墙

    2024-03-11 16:46:02       19 阅读
  9. 03 数据结构之栈

    2024-03-11 16:46:02       14 阅读
  10. SQL 分组查询

    2024-03-11 16:46:02       23 阅读
  11. nginx配置IPV6

    2024-03-11 16:46:02       15 阅读
  12. 服务中心选址问题

    2024-03-11 16:46:02       18 阅读