目录
什么是html
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它通过标记符号来描述网页的结构和内容，是万维网（World Wide Web）的基础语言。HTML可以用来创建静态网页，也可以与JavaScript和CSS等技术结合，创建动态交互式的网页。HTML文档由各种元素（elements）组成，如标题、段落、列表、链接、图片等。
Html、css、javascript三者的关系
一个基本的网站包含很多个网页，一个网页由 html, css 和 javascript 组成。
html 是主体，装载各种 dom 元素；css 用来装饰 dom 元素；javascript 控制 dom 元素。
用一扇门比喻三者间的关系是：html 是门的门板，css 是门上的油漆或花纹，javascript 是门的开关；
html标题标签
Html标题通过<h1>-<h6>标签来定义的
加了标题的文字会变粗字号也会变大、一个标题独占一行
<html>
<body>
<h1>123</h1>
<h2>123</h2>
<h3>123</h3>
<h4>123</h4>
<h5>123</h5>
<h6>123</h6>
<h7>123</h7>
</body>
</html>
Html段落
HTML 段落是通过标签 <p> 来定义的。p即paragraph的首字母。
标签语义：它可以将网页分为若干段落。
特点：文本在一个段落中会根据浏览器窗口的大小自动换行、段落和段落之间会保有空隙。
代码
<html>
<body>
<p>这是段落1。</p>
<p>这是段落2。</p>
<p>这是段落3。</p>
</body>
</html>
Html换行标签
<br> 可插入一个简单的换行符。
<br> 标签是单标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。
<html>
<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！<br />蚕丛及鱼凫，开国何茫然！<br />尔来四万八千岁，不与秦塞通人烟。<br />西当太白有鸟道，可以横绝峨眉巅。<br />地崩山摧壮士死，然后天梯石栈相钩连。<br />上有六龙回日之高标，下有冲波逆折之回川。</p>
<p>上有六龙回日之高标，下有冲波逆折之回川。
黄鹤之飞尚不得过，猿猱欲度愁攀援。
青泥何盘盘，百步九折萦岩峦。
扪参历井仰胁息，以手抚膺坐长叹。
问君西游何时还？畏途巉岩不可攀。
但见悲鸟号古木，雄飞雌从绕林间。
又闻子规啼夜月，愁空山。
蜀道之难，难于上青天，使人听此凋朱颜。
连峰去天不盈尺，枯松倒挂倚绝壁。
飞湍瀑流争喧豗，砯崖转石万壑雷。
其险也如此，嗟尔远道之人胡为乎来哉！
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
所守或匪亲，化为狼与豺。
朝避猛虎，夕避长蛇。
磨牙吮血，杀人如麻。</p>
</html>
html文本格式化标签
<big>big_放大文本</big> <small>small_缩小文本</small>
<sub>sub_下标</sub> <sup>sup_上标</sup>
<ins>ins_插入字_加下划线</ins>
<del>del_删除字</del>
Html图像标签
<img src="被引用图像的地址URL" >
<img src="C:\Users\Lenovo\Desktop\网络安全\Linux\1.png" width="104" height="142" />
alt属性
<img src=123.jpg alt=图片不存在>
title属性
<img src "2.jpg" alt="图片不存在" title="网卡了，刷不出来了" />Width和height
调整图像的宽度和高度：
<img src="123.jpg" alt="这图片不存在" title="鼠标放到图片就会有文字提示" width="1500" height="900"/>
HTML超链接
<a href="http://www.baidu.com">跳转到百度</a>
Html注释
为了添加一些备注或提示便于理解和阅读，不会被解析
<!--这是一个注释-->
Html表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<html>
<table>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>名次</td> </tr>
<tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>
<tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>
<tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>
</table>
</html>
Html表头单元格标签
<html>
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名次</th> </tr>
<tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>
<tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>
<tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>
</table>
</html>
<html>
<table border=1>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名次</th> </tr>
<tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>
<tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>
<tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>
</table>
</html>
列表标签
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由方便。
无序列表
<!DOCTYPE html>
<html>
<body>
<h4>喜欢吃的水果</h4>
<ul>
<li>荔枝</li>
<li>香蕉</li>
<li>草莓</li>
</ul>
</body>
</html>
有序列表
<!DOCTYPE html>
<html>
<body>
<h4>喜欢吃的水果</h4>
<ul>
<li>荔枝</li>
<li>香蕉</li>
<li>草莓</li>
</ul>
<h4>小说排行</h4>
<ol>
<li>万象之王</li>
<li>我有一剑</li>
<li>盖世神医</li>
<li>斗罗大陆</li>
<ol>
</body>
</html>
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dt>交通工具</dt>
<dd>自行车</dd>
<dd>汽车</dd>
</dl>
Html表单
什么是表单
表单的目的就是为了收集信息。最常见与注册界面。
一个完整的表单有三部分，分别为表单域、表单控件和提示信息。
表单域
表单域就是包含表单的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器。
表单控件
input输入表单元素
select下拉表单元素
textarea文本域元素
input
<from>
用户名：<input type="text"></br>
密码：<input type="password"></br>
</from>
radio
<from>
用户名：<input type="text"></br>
密码：<input type="password"></br>
性别：男<input type="radio"> 女<input type="radio"> 其他<input type="radio">
</from>
表单提交按钮
提交按钮： type = “submit”
点击提交按钮，可以把表单域form里的表单元素 里面的值 提交给后台服务器， 可以设置一个value来更改显示的文字。
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex"> 其他<input type="radio" name="sex"> <br>
<!-- checkbox 复选框 复选框也应该有相同的name -->
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">打豆豆<input type="checkbox" name="hobby"><br>
<input type="submit" value="免费注册">
重置按钮
重置按钮： type="reset"
点击重置按钮，可以把表单域form里的表单元素 里面的值 恢复初始化，可以设置value来更显显示的文字。
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex"> 其他<input type="radio" name="sex"> <br>
<!-- checkbox 复选框 复选框也应该有相同的name -->
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">打豆豆<input type="checkbox" name="hobby"><br>
<input type="submit" value="免费注册">
<br><input type="reset" value="恢复初始化">
type属性
普通按钮，定义可点击按钮，多数情况下，用于通过Javascripts启动脚本。例如获取验证码。
type = "button"
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex"> 其他<input type="radio" name="sex"> <br>
<!-- checkbox 复选框 复选框也应该有相同的name -->
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">打豆豆<input type="checkbox" name="hobby"><br>
<input type="submit" value="免费注册">
<br><input type="reset" value="恢复初始化">
<br><input type="button" value="获取验证码">
下拉菜单
选择字母
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
文件上传
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex"> 其他<input type="radio" name="sex"> <br>
<!-- checkbox 复选框 复选框也应该有相同的name -->
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">打豆豆<input type="checkbox" name="hobby"><br>
<input type="submit" value="免费注册">
<br><input type="reset" value="恢复初始化">
<br><input type="button" value="获取验证码">
<br><input type="file">
textarea 文本域元素
使用场景：输入内容较多，涉及多行文本输入。如下图所示：
给我留言
<textarea rows="3" cols="20">默认文本内容</textarea>
扫一扫
4457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
