HTML：HTML基础
HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML由一系列元素(elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或工作。一对标签可以为一段文字或者一张图片添加超链接、设置字体、字号等。
- 元素结构：普通元素 = 开始标签+内容+结束标签。
- 空元素：不包含任何内容的元素称为空元素，空元素不需要通过内容来产生效果，比如 img、br元素。
- 元素嵌套：元素可以相互嵌套，但必须保证元素嵌套次序正确。
- 元素属性：属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。属性应该包含空格符 + 等号 + 属性值（由引号所包围）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="data:images/firefox-icon.png" alt="测试图片">
</body>
</html><!DOCTYPE html>：文档类型。在当今作用有限，仅用于保证文档正常读取。<html></html>：包含整个页面的内容，也称作根元素。<head></head>：对用户不可见，包含面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等。<meta>：指定文档使用 UTF-8 字符编码 。<title></title>：设置页面的标题。<body></body>：包含期望让用户在访问页面时看到的内容主体，包括文本、图像、视频等内容。
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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章