正文
HTML常用知识点代码演示
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1 HTML部分常用知识点
<!-- 版本声明 -->
<!DOCTYPE html><!-- 唯一根元素 -->
<html><!-- 对网页做基本的配置 -->
<head><!-- 声明网页编码，HTML5不严格准守XML 所以单标签可以不以/结束 -->
<meta charset="UTF-8"><title>实验网页</title>
</head><!-- 写网页的具体内容 -->
<body>
<!-- 1 标题 （块）-->
<h1>第一标题</h1>
<h2>第二标题</h2>
<h3>第三标题</h3>
<a href = "#conan"><h6>第六标题 </h6></a> <!-- 2段落 （块）-->
<p>这是段落</p> <!-- 3.1 有序列表 -->
<ol>
<li>安徽省</li>
<li>湖北省</li>
<li>河北省</li>
</ol> <!-- 3.2 无序列表 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul> <!-- 3.3 嵌套列表 -->
<ol>
<li>
河北省
<ul>
<li>石家庄</li>
<li>唐山</li>
</ul> </li> <li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
</ul> </li>
<li>安徽省</li> </ol> <!-- 4 行内元素 -->
<P>
<i>倾斜，安徽省马鞍山市安徽工业大学</i>
<strong>加粗，安徽省马鞍山市安徽工业大学</strong>
<del>删除线，安徽省马鞍山市安徽工业大学</del>
<b>加粗，安徽省马鞍山市安徽工业大学</b>
<span style = "color:red;">设置颜色，安徽省马鞍山市安徽工业大学</span>
</P> <!-- 5 空格折叠 -->
<p>
静夜思<br>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。<br>
<<br>
</p> <!-- 6 图片（行内元素，左右排列） -->
<p>
<!-- 绝对路径 ，长且改路径麻烦 ，不常用-->
<img src="picture/code.jpg "/>
<!-- 相对路径,只要网页和图片相对位置不变则一般不会出问题，比较方便，常用 .补充：上级文件夹用..-->
<img src="picture/conan.jpg"/> </p> <!-- 7.1 超链接（行内） -->
<p>
<a href = "https://www.cnblogs.com/kwinwei/">KwinWei'blog</a> <br>
<!-- 新窗口打开网页 -->
<a href = "https://www.cnblogs.com/kwinwei/" target = "_blank;">KwinWei'blog</a><br>
</p>
<!-- 7.2 超链接特殊用法 ,超链接到本网页某个位置,这个位置叫锚点，锚点要提前声明 -->
<p>
<a name="conan"> 柯南-基德 </a><br>
<!-- 顶部默认就是锚点，没有名字 -->
<a href = "#">返回顶部</a>
</p> <!-- 8 表格 （块），块元素不需要用段落 -->
<!-- 8.1 表格基本格式 -->
<!-- table声明 -->
<table border = "1" cellspacing = "0" width = "30%">
<!-- 声明行 -->
<tr>
<!-- 声明行内元素 -->
<td>人名</td>
<td>年龄</td>
</tr> <tr>
<td>Kwin</td>
<td>23</td>
</tr> </table> <!-- 8.2 跨行 ,又叫单元格合并 -->
<table border = "1" cellspacing = "0" width = "30%">
<!-- 声明行 -->
<tr>
<!-- 声明行内元素 -->
<td rowspan = "2">人名</td>
<td>年龄</td>
</tr> <tr>
<!-- <td>Kwin</td> -->
<td>23</td>
</tr>
</table> <!-- 8.3 跨列 -->
<table border = "1" cellspacing = "0" width = "30%">
<!-- 声明行 -->
<tr>
<td>人名</td>
<td>年龄</td>
</tr> <tr>
<td colspan ="2">Kwin</td>
<!-- <td>23</td> -->
</tr>
</table> <!-- 8.4 行分组 -->
<table border = "1" cellspacing = "0">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>薪资</td>
</tr>
</thead>
<tbody style="color:blue;">
<tr>
<td>1</td>
<td>2</td>
<td>3333</td>
</tr>
<tr>
<td>2</td>
<td>444</td>
<td>5555</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan ="2">合计</td>
<td>8888</td>
</tr>
</tfoot>
</table></body>
</html>
2 HTML 表单用于收集不同类型的用户输入。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 表单 -->
<form action="www.baidu,com">
<!-- 1 表单元素 账号
value 指定默认值
maxlength 最大长度
readonly 只读
-->
<p>
账号：<input type = "text" value="Kwin" maxlength=15/>
</p> <!-- 2 密码,修饰属性同上 -->
<P>
密码：<input type="password"/>
</P> <!-- 3 单选
name 组名，定义为同一组，才可以区分互斥
checked 默认选中
-->
<P>
性别：<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女 </P> <!-- 4 多选 -->
<p>兴趣：
<input type="checkbox" />音乐
<input type="checkbox" />读书
<input type="checkbox" />跑步
<input type="checkbox" />篮球
<input type="checkbox" />足球
</p>
<!-- 5 文件筐 -->
<p>头像：
<input type="file"/>
</p> <!-- 6 隐藏框 -->
<p>
<input type="hidden"> </p> <!-- 7 提交按钮 8 重置 -->
<p>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</p> <!-- 9 普通按钮 ，功能由js代码自己写 -->
<p><input type="button" value="普通按钮"/>
</p> <!-- 10 标签
label：用来管理表单中的文本，将文本与控件绑定，增大可选择面积，方面老年等看不清小按钮人选择使用
id：用来区分标签名与for配合使用
-->
<p>
<input type="checkbox" id="c1"/>
<label for="c1">我已阅读并自愿接受此协议！</label>
</p> <!-- 11 文本域 -->
<p>简介：
<textarea cols="10" rows="3">请在此处输入简介！
</textarea>
</p> <!-- 12 下拉选 -->
<p>
城市：
<select>
<option selected>北京</option>
<option>上海</option>
<option>合肥</option>
<option>南京</option>
</select>
</p></form>
</body>
</html>
