HTML:HTML基础


HTML不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML由一系列元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或工作。一对标签可以为一段文字或者一张图片添加超链接、设置字体、字号等。


HTML元素



  • 元素结构:普通元素 = 开始标签+内容+结束标签。
  • 空元素:不包含任何内容的元素称为空元素,空元素不需要通过内容来产生效果,比如 img、br元素。
  • 元素嵌套:元素可以相互嵌套,但必须保证元素嵌套次序正确。
  • 元素属性:属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。属性应该包含空格符 + 等号 + 属性值(由引号所包围)。

HTML文档格式

<!DOCTYPE html>
<html>
    
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
    
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
    
</html>
  • <!DOCTYPE html> :文档类型。在当今作用有限,仅用于保证文档正常读取。
  • <html></html>:包含整个页面的内容,也称作根元素。
  • <head></head> :对用户不可见,包含面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等。
  • <meta> :指定文档使用 UTF-8 字符编码 。
  • <title></title> :设置页面的标题。
  • <body></body> :包含期望让用户在访问页面时看到的内容主体,包括文本、图像、视频等内容。

HTML常用标签

1、字体标签<font>...</font>

<font size=14 face="楷体" color="red">我是楷体、红色</font>

注:在HTML4中不赞成使用字体标签,HTML5直接不支持,而是使用CSS实现字体样式


2、标题标签<h?>...</h?>

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

注:一般只使用三级标签,标题是为了结构如果只是为了样式,可使用CSS。<h1>标签尽量靠近<body>标签可以让搜索引擎更快领略主体。


3、段落标签<p>...</p>

<p>这是一个段落</p>

注:段落内会根据容器宽度自动换行,段落间会自动添加空行


4、图片标签<img>

<img src="相对地址、绝对地址、URL" alt="图片有错误时的显示信息" width="100px" height="100px">

width和height属性一般使用CSS配置


5、超链接:<a herf="xxx">...</a>

<a herf="https://www.baidu.com">点击文字打开百度</a>`

<a herf="https://www.baidu.com" target="_blank">点击文字在新页面打开百度</a>`

<a herf="img/1.png">点击文字打开本地图片</a>

<!--点击图片打开网址-->
<a herf="https://www.baidu.com"><img src="img/baidu.jpg"></a>

6、锚点

<!--先定义锚点-->
<a name="锚点1"></a>

<!--使用锚点链接-->
<a herf="#锚点1">跳转到锚点一</a>
<a herf="index.html#锚点1">跳转到index页面中的锚点一</a>

7、列表

无序列表
<ul>
    <li>
    <li>
</ul>
有序列表:
<ol>
    <li>
    <li>
</ol>

注:<li>标签内可以使用段落、链接、图片、其他列表等元素


8、表格:<table>...</table>

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

9、表单:<form>...</form>

<form>
<label for="">请输入姓名:</label>  <input type="text" name="firstname"><br>
<label for="">请输入密码:</label>  <input type="text" name="lastname">
</form>
原文地址:https://www.cnblogs.com/bqzzz/p/14406190.html