HTML标签结构
HTML语言主要都是由标签构成的。
标签名 在 <> 中 如<body>
标签大部分成对出现，代表开始和结束 如 <body>标签中的内容</body>
少部分单个出现，叫单标签 </br> 代表换行
标签中可以加属性，多个属性之间使用空格隔开
HTML文件结构
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html><html> </html> 是整个html文件的顶层标签(根标签)
<head> </head> 整个页面的属性
<title> </title> 页面的标题
<body> </body> 页面的内容
HTML常见标签
注释标签
<!-- -->
<!-- 上面这个标签就是注释 -->
<!-- 编译器中按 Ctrl + / 快速生成 -->
<!-- 在浏览器查看源码时可以看到注释 -->标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 总共有六级标题 -->
段落标签
<p>
一个p标签之间就是一个段落
</p>
<p>
这是另外一个段落
</p>
换行标签
一个p标签之间就是一个段落</br>换行了，使用这个比<br>更为标准
格式化标签
<b>加粗</b>
<strong>这也可以加粗</strong>
</br>
<i>倾斜</i>
<em>这也可以倾斜</em>
</br>
<del>删除线</del>
<s>这也是删除线</s>
</br>
<ins>下划线</ins>
<u>这也是下划线</u>
图片标签
<!-- 测试图片标签 -->
<!-- src 图片的路径 -->
<!-- 路径可以是相对路径，也可以是绝对路径 表示方法都一样 -->
<!-- alt 当图片不能正确显示的时候显示alt中的内容 -->
<!-- width 图片的大小(只设置width 长和宽会按比例缩放) -->
<!-- border 图片的边框 -->
<!-- title 鼠标悬停出来的文字 -->
<!-- 属性可以有多个，之间用空格或回车分隔 -->
<img src="picture1.png" alt="宇航员" width="500px" border="5px"
title="宇航员">
超链接标签
<!-- a 超链接 点击后可以跳转到那个界面 -->
<!-- >< 中间的文字会显示到网页上 -->
<a href="https://www.bilibili.com/">点我跳到b站</a>
<!-- 点击目录中的html文件 -->
<a href="Test2.html">点我跳到Test2</a>
<!-- # 用这个符号占位 -->
<a href="#">我是一个空链接</a>
<!-- 内容还可以是文件，这样就可以下载 -->
<a href="picture1.png">点我查看宇航员图片</a>
<a href="picture1.7z">点我下载压缩包</a>
<!-- 链接中加图片 图片=链接 -->
<a href="https://www.bilibili.com/">
<img src="picture1.png" width="100px">
</a>
<!-- 点击链接后会生成一个新的标签页，而不是覆盖 -->
<a href="https://www.bilibili.com/" target="_blank">点我增加新的标签页</a>
表格标签
<!-- 表格标签 -->
<!-- table 整个表格的开始和结束 -->
<!-- 表格中可以设置边框的属性，一般用CSS来设置 -->
<table align="ceter" border="1" cellpadding="20" cellspacing="0"
width="500" height="500">
<!-- tr 表示一行 -->
<tr>
<!-- th 表示表头中的一个单元格 -->
<th>姓名</th>
<th>学号</th>
</tr>
<tr>
<!-- td 表示一个单元格 -->
<td>张三</td>
<td>10001</td>
</tr>
<tr>
<td>李四</td>
<td>10002</td>
</tr>
<tr>
<td>王五</td>
<td>10003</td>
</tr>
</table>
列表标签
<!-- 列表标签 -->
<!-- ul unordered list 无序列表 -->
<ul>
<!-- li 列表项 -->
<li>C语言</li>
<li>Java</li>
<li>大学物理</li>
<li>高等数学</li>
</ul>
<!-- ol ordered list 有序列表 -->
<ol>
<li>C语言</li>
<li>Java</li>
<li>大学物理</li>
<li>高等数学</li>
</ol>
<!-- dl 自定义列表 -->
<dl>
<!-- dt 小标题 -->
<dt>课程</dt>
<!-- dd 列表项 -->
<dd>C语言</dd>
<dd>Java</dd>
<dd>大学物理</dd>
<dd>高等数学</dd>
</dl>
表单标签
表单标签是用户输入的重要途径.
input标签
<!-- 表单标签 -->
<!-- text 输入文本 -->
<input type="text">
<br/>
<!-- password 输入密码 -->
<input type="password">
<br/>
<!-- radio 单选框(默认可以多选) -->
<!-- name 必须相同才能实现多选一的效果 -->
<!-- checked 默认初始值选哪个 -->
<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女
<br/>
<!-- checkbox 多选框 -->
<input type="checkbox"> A
<input type="checkbox"> B
<input type="checkbox"> C
<input type="checkbox"> D
<br/>
<input type="button" value="这是个按钮"
onclick="alert('按了按钮的结果')">
<br/>
<input type="file">
<br/>
select标签
<!-- select 选择 -->
<select>
<!-- option 选择的选项 -->
<option>请选择年份</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
textarea标签
<textarea cols="30" rows="10">
写点内容
</textarea>
无语义标签
<div>
div标签独占一行
div标签除了表单标签不能模拟之外，剩下所有的标签基本上都可以模拟
<span>
aaa
</span>
<span>
bbb
</span>
</div>
<div>
另一个div
<span>
ccc
</span>
<span>
ddd
</span>
</div>
有什么错评论区指出。希望可以帮到你。
