一.语法规范
1.HTML不区分大小写，一般使用小写
2.HTML中注释不能嵌套
3.HTML标签必须结构完整，要么成对出现，要么为自结束标签
（浏览器会最大程度自动修正错误，但有些修正会出错）
4.HTML中的标签可以嵌套，但不能交叉嵌套（如：（p)(font)(/p)(/font)是不正确的）
5.HTML中的标签必须有值，且值必须加引号
二.格式及部分常用标签
标签：html/head/meta/title/body/p/br/hr/h1-h6/center
<html>
<!--html根标签，一个页面中只有一个根标签，网页中的所有内容都应该写入html根标签中-->
<head>
<!--head标签，该标签中的内容用于帮助浏览器解析页面，不会直接显示在页面中-->
<meta charset="utf-8">
<meta name="keywords" content="Java,C++,C,Python">
<meta name="description" content="对网页的描述">
<!--meta标签
-用于设置网页的一些元数据，如网页的字符集、关键字、简介，是一个自结束标签
声明网页采用的编码字符集如：meta charset="utf-8"
-用来做请求的重定向
<meta http-equiv="refresh" content="秒数;url=目标路径">
-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
<title>html笔记</title>
<!--title标签:网页标题签，默认显示在浏览器的标题栏中搜索引擎在检索时会优先搜索title标签内容-->
</head>
<body>
<!--body标签：用于设置网页的主体内容，网页中所有可见的内容，都应该在body中编写-->
<p align="left">p标签：段落标签</p>
<!--
p标签中的文字，会默认占一行，并且段与段之间会有一个间距，使用p标签用于表示一 个段落
属性：
align:
-left:左对齐
-right:右对齐
-center:居中对齐
-->
<br>
<!--br标签：表示一个换行，只一个自结束标签-->
<hr>
<!--hr标签：可以在页面中生成一条水平线，是一个自结束标签-->
<h1>h1~h6：六级标题</h1>
<!--六级标题标签（h1,h2,h3,h4,h5,h6）
-显示效果：h1到h6逐渐变小
-六级标签中h1最重要，表示一个网页中的主要内容，对于搜搜引擎而言，h1的重要性仅次于title，检索完title后
会立即查看h1中的内容，会影响页面在搜索引擎中的排名，页面只能写一个h1,一般页面中标题只使用h1-h3-->
<!--center标签居中显示其中内容-->
<center>
<p>center中的内容会在页面居中显示</p>
</center>
</body>
</html>
三.图片标签
使用img标签来向网页中引入一个外部图片
<img src=“图片路径”
<html>
<head>
<meta charset="utf-8">
<title>图片标签img</title>
</head>
<body>
<!--
img标签：使用img来向网页中引入一个外部图片，是一个自结束标签
属性：
src:配置图片的路径，一般情况下使用相对路径
相对路径：相对于当前资源所在目录的位置
<img src="a/b/001.png" alt="picture">
可以使用../来返回上一级目录，返回几级就写几次
<img src="../../../b/001.png" alt="picture">
alt:可以设置在图片不能显示时对图片的描述，搜索引擎可以通过alt属性来识别不同的图片
如果不写入alt属性，则搜索引擎不会对img中的图片进行收录
width:用于修改图片的宽度，一般使用px(像素)为单位
height:用于修改图片的高度，一般使用px(像素)为单位
-width 和 height 如果只设置一个，另一个会同时等比例调整大小
-->
<img src="a/b/001.png" alt="picture">
<!--
图片的格式：
JPEG(JPG)
-JPEG图片支持的颜色比较多，图片可以压缩，但不支持透明
-一般使用JPEG来保存照片等颜色丰富的图片
PNG
-PNG支持的颜色多，并且支持复杂的透明
-可以用来显示颜色复杂的透明图片
GIF
-GIF支持的颜色少，只支持简单的透明，支持动态图
-图片颜色单一或者动态图时使用GIF
图片的使用原则：
效果不一致时，使用效果好的
效果一致时，使用小的
-->
</body>
</html>
四.特殊字符
含有特殊用法的字符不能直接表示，需要用实体进行表示
<html>
<head>
<meta charset="utf-8">
<title>特殊字符表示</title>
</head>
<body>
<!--
在HTML中，如< >这中有特殊用法的字符是不能直接表示的，需要使用一些特殊的字符进行表示，这些特殊符号
我们称为实体（转义字符串），浏览器解析到实体时，会自动将实体转换为其对应的字符
实体语法：
&+实体的名字+;
- < <
- > >
- 空格
-->
A<B <br>
9>3 <br>
I love you!
</body>
</html>
五.超链接
a标签：创建超链接
创建超链接时，如果地址不确定，可以直接写一个#作为占位符
1.从一个页面跳转到另一个页面
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--
使用超链接可以从一个页面跳转到另一个页面
a标签：用于创建超链接
属性：
href:指向链接跳转的目标地址，可以是相对路径也可以是完整的地址(要加协议)
target:用来指定打开链接的位置
可选值：
_self,表示在当前窗口打开（默认值）
_blank,表示在新的窗口打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
-->
<a href="http://www.baidu.com">跳转到百度</a> <br>
<a href="index.html">跳转到本地html文件网页</a> <br>
<a href="001.html" target="open">链接</a>
<iframe src="002.html" name="open"></iframe>
<!--
内联框架：可以引入一个外部页面，使用iframe标签创建内联框架
属性：
src:指向一个外部页面的路径，可以使用相对路径
width:设置框架宽
height:设置框架高
name:可以为内联框架指定一个属性
现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
-->
</body>
</html>
2.页内跳转
html通过设置锚点链接实现页内的跳转
<html>
<head>
<meta charset="utf-8">
<title>页内跳转</title>
</head>
<body>
<!--
html中有一个属性为 id，每一个元素都可以设置，该属性可以作为标签的唯一标识
id属性在同一个页面中只能有一个，不能重复
-->
<a href="#bottom">跳转到底部</a>
<h3 id="bottom">页面最底部</h3>
<h3 id="top">页面最顶部</h3>
<a href="#top">调转到顶部1</a>
<br>
<a href="#">跳转到顶部2</a>
<!--
需要跳转到某个位置，直接在href中写 #id 属性值
如果链接地址设置为 #,点击链接会自动跳转到顶部
-->
</body>
</html>
3.链接邮件
发送电子邮件的超链接，点击链接以后会自动打开本地邮件客户端，并将收件人设置为mailto 后面的邮箱地址
<a href="mailto:123@abc.com">邮件</a>
六.列表
1.无序列表
使用 ul 标签创建一个无序列表
使用 li 在 ul 中创建一个一个的列表项
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
无序列表：
-使用 ul 标签创建一个无序列表
-使用 li 在 ul 中创建一个一个的列表项
一个 li 就是一个列表项
-通过 type 属性修改无序列表的项目符号
-disc：默认值，实心的圆点
-square：实心的方块
-circle：空心的圆
注意：项目符号一般不使用，若有需要，则可以采用为 li 设置背景图片的方式来设置
-->
<h3>无序列表</h3>
<ul type="circle">
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>lmn</li>
</ul>
</body>
</html>
2.有序列表
使用 ol 标签创建一个无序列表
使用 li 在 ul 中创建一个一个的列表项
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
有序列表：
-使用 ol 标签创建一个无序列表
-使用 li 在 ul 中创建一个一个的列表项
一个 li 就是一个列表项
-通过 type 属性修改无序列表的项目符号
-1：默认值，使用阿拉伯数字
-a/A：用大小写字母作为序号
-i/I：用大小写罗马数字作为序号
-->
<h3>有序列表</h3>
<ol type="a">
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>lmn</li>
</ol>
</body>
</html>
列表之间可以相互嵌套，可以在有序列表中放入无序列表，也可以在无序列表中放入有序列表
3.定义列表
定义列表是项目及其注释的组合
dl - dt - dd
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
定义列表：
-自定义列表不仅仅是一列项目，而是项目及其注释的组合
-自定义列表以 dl 标签开始
-每个自定义列表项以 dt 开始
-每个自定义列表项的定义以 dd 开始
-定义列表的内部可以使用段落、换行符、图片、链接以及其它列表等
-->
<h3>定义列表</h3>
<dl>
<dt>露娜</dt>
<dd>战士、法师</dd>
<dt>公孙离</dt>
<dd>射手、刺客</dd>
<dt>夏侯惇</dt>
<dd>战士、坦克、辅助</dd>
</dl>
</body>
</html>
七.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<meta name="description" content="表单用于向服务器提交信息">
</head>
<body>
<!--表单的作用就是将用户信息提交给远程服务器-->
<!--
创建表单：form标签
form标签中必须指定一个action值，该属性指向一个服务器地址，
当我们提交表单时会提交到action属性对应的地址
-->
<form>
<!--
使用form创建的仅仅是一个空表单，还需要向form中添加不同的表单项
-使用input创建一个文本框，它的type属性是文本
如果希望表单项中的数据会提交到服务器，还必须给表单指定一个name属性，表示提交内容的名字
用户填写的信息会附在url地址后边以查询字符串的形式发送给服务器
url地址?查询字符串
在文本框中指定的value会作为默认值显示
-->
<!--
在html中lable可以用来专门选中表单中的提示文字
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
-->
<label for="tt">用户</label>
<input id="tt" type="text" name="user">
<br><br>
<!--
使用input创建一个密码框，它的type属性是password
-->
密码<input type="password" name="password">
<br><br>
<!--
使用input创建一个提交按钮，它的type属性是submit
在提交按钮可以通过value设置按钮上的文字
-->
<input type="submit" value="提交">
<!--
使用input创建一个重置按钮，它的type属性是reset，会重置文本框内容
-->
<input type="reset">
<!--
使用input type="button"可以创建一个单纯的按钮，一般结合js使用
-->
<br><br>
<input type="button" value="按钮">
<!--button创建按钮，使用更加方便-->
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<!--
单选按钮：使用input创建,type属性使用radio
-单选按钮通过name属性进行分组，name属性相同为一组
-需要用户选择不需要用户填写内容的表单项，还必须指定value属性，这样被选中的表单value
值将会最终提交给服务器
-->
<br><br>
<input type="radio" name="danxuan" value="male">男
<input type="radio" name="danxuan" value="female">女
<!--
多选框
-使用input创建一个多选框，它的type属性是checkbox
-如果希望在按钮或者多选框中指定默认选项，可以在对用选项中添加checked="checked"
-->
<br><br>
技能
<input type="checkbox" name="skill" value="pr">pr
<input type="checkbox" name="skill" value="ps">ps
<input type="checkbox" name="skill" value="ae">ae
<input type="checkbox" name="skill" value="au">au
<!--
下拉列表
-使用select创建一个下拉列表
-->
<br><br>
喜欢的工具
<select name="tool">
<!--
在下拉列表中使用option标签来创建一个个列表项
-下拉列表的name属性指定给select
select添加multiple="multiple",变为多选
-value属性指定给option
-selected="selected",设置默认选项
-使用optgroup对选项进行分组
然后可以通过lable指定分组名称
-->
<optgroup label="001">
<option value="ps">PS</option>
<option value="au">AU</option>
<option value="ae">AE</option>
</optgroup>
<optgroup label="002">
<option value="pr" selected="selected">PR</option>
<option value="dw">DW</option>
<option value="lr">LR</option>
</optgroup>
</select>
<!--
使用textarea创建一个文本域
-->
<br><br>
<fieldset>
<legend>文本域</legend>
文本域<textarea name="ttt"></textarea>
</fieldset>
<!--
在表单中可以使用filedset为表单进行分组。可以将表单项中的同一组放进一个filedset中
-在filedset中可以使用legend子标签指定组名
-->
</form>
</body>
</html>
截图
扫一扫
2476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
