目录
一、HTML介绍
1.HTML
2.标签
3.W3C
二、常见标签
1.HTML分类
2.标签及使用
3.标签介绍
1>块级(块状)标签
2>内联(行内)标签
3>block块级元素的特点
4>Inline内联元素特点
三、表格
1.表格介绍
2.表格内容：
1>表格标签
2>表头标签
3>表身
4>表脚
四、表单
1.表单介绍：
1>介绍
2>作用
3>应用
2.表单属性
3.input常用type属性值
4.input属性
5.select下拉框
6.表单其他标签
7.form包含元素
五、HTML附加内容
HTML转义
一、HTML介绍
1.HTML：Hyper Text Marked Language
超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
2.标签
HTML标签也可以称为元素，不同的标签有不同的功能解释，用来表示不同的功能。每个标签都是由一对尖括号包裹的单词组成。 一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。
3.W3C
HTML由 W3C制定的，W3C(World Wide Web Consortium)是一个非盈利性组织。在中国的北京航空航天大学设有分部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这是内容
<!--ctrl+r刷新网页-->
<!--注释：
多行注释 ctrl+shift+/
单行注释：ctrl+/
html 超文本标记语言
< 一个尖括号叫做标记 <内容> 两个尖括号叫做标签
<head> （开始标签） </head>（结束标签） 成对出现标签对 /闭合-->
<!--
标签的特点：
1、一个尖括号叫做标记，两个尖括号叫做标签
2、每个标签都是由一对尖括号包裹单词组成
3、一般标签都是成对出现，一般称第一个标签为开始标签，第二个标签为结束标签
4、开发标签，闭合标签 /
5、单个出现的标签叫自闭和标签 。例如 <meta> 标签
6、标签不区分大小写,推荐小写，规范
-->
</body>
</html>二、常见标签
1.HTML分类
2.标签及使用：
1>标签：标签由一对尖括号包裹单词组成，如：<body>
2>嵌套：标签可以嵌套，但是不能交叉
正确用法：<body><table></table><body>
错误用法：<body><table></body></table>
3>使用规则：
开始标签-标签体-结束标签,如：<p> 段落 </p>
自闭合标签直接使用，如：换行<br> 水平线<hr> 输入框<input> 图片<img>
4>标签属性：
a. 通常为键值对形式出现，eg：color="red"
b. 属性只能出现在开始标签和自闭合标签内
c. 属性名字全部小写，属性值必须用单引号或双引号包裹起来
d. 如属性名和属性值完全一样，直接写属性名即可，eg："readonly"(input标签属性)
3.标签介绍：
1>块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
标题标签
一般用在文章的标题，有h1-h6
段落标签
用于文章段落：<p>
列表标签
列表标签分为：有序列表、无序列表以及定义列表
div标签
分割一块区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级标签</title>
</head>
<body>
<!--标题标签h h1-h6 默认加粗 -->
<!--<h1>1级标题</h1> <!–一个文章，一般只有一个一级标题–>-->
<!--<h2>2级标题</h2>-->
<!--<h3>3级标题</h3>-->
<!--<h4>4级标题</h4> <!–四级标题和网页文档的字体大小一致–>-->
<!--<h5>5级标题</h5>-->
<!--<h6>6级标题</h6> <!–最小的就是六级标题–>-->
<!--这是body里面的内容-->
<!--段落标签p 用于一个文章的段落-->
<!--段落1-->
<!--<!–<br>–>-->
<!--段落2-->
<!--<!–<br>–>-->
<!--段落3-->
<!--<p>段落1</p>-->
<!--<p>段落2</p>-->
<!--<p>段落3</p>-->
<!--列表标签：有序列表、无序列表和定义列表。-->
<!--有序列表ol ： 有序号的列表-->
<!--type属性定义有序类型：1，i,I,a,A -->
<!--<ol type="1" start="4">-->
<!-- <li>python</li>-->
<!-- <li>c++</li>-->
<!-- <li>web</li>-->
<!-- <li>java</li>-->
<!--</ol>-->
<!--快捷创建列表 ：ul>li*4 -->
<!--无序列表:ul,没有序号的列表-->
<!--type属性定义五序类型：disc(实心圆) circle(空心圆)
square(正方形)
-->
<!--<ul type="none">-->
<!-- <li>python</li>-->
<!-- <li>c++</li>-->
<!-- <li>web</li>-->
<!-- <li>java</li>-->
<!--</ul>-->
<!--定义列表:dl 显示时为缩进排列，类似于题目大纲-->
<!--<dl>-->
<!-- <dt>学课:</dt> <!–定义列表的标题–>-->
<!-- <dd>python</dd> <!–定义列表的列表项–>-->
<!-- <dd>java</dd>-->
<!-- <dd>c++</dd>-->
<!-- <dd>web</dd>-->
<!--</dl>-->
<!--块状标签div标签：网页的主体，分隔一段区域-->
<!--<div style="height: 50px;background: black;color: red">-->
<!-- <div style="height: 50px;width:50px;background: yellow;color: black">发现音乐</div>-->
<!--</div>-->
<div style="height: 40px;background: #c20c0c"></div>
<!--<div style="height: 120px;background: #9a7eb1"></div>-->
<!--<div style="height: 1000px;background: #f5f5f5">-->
<!-- <div style="height: 100px;width:100px;background: yellow;"></div>-->
<!-- <div style="height: 100px;width:100px;background: blue;"></div>-->
<!--</div>-->
</body>
</html>
2>内联标签：<a>/<input>/<img>/<sub>/<sup>/<textarea>/<span>
网页标签
用于在网页中插入图片：<img>
粗体/斜体标签
用于网页中突出字体
粗体标签：<b>
斜体标签：<i>
超链接标签
用于链接其他资源，可以用于跳转或者锚点：<a>
文字标签
span标签是纯文本，配合CSS则可以展示不同效果：<span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 内联标签介绍 </title>
<!-- 定义所有链接打开的方式，_blank以一个新的页面打开 -->
<base target="_blank">
</head>
<body>
<!--图片标签img,自闭和标签 -->
<!--src属性里面图片的路径 alt为图片取名-->
<!--
相对路径：当前路径出发去找图片
绝对路径：从根目录出发
-->
<!--<img src="../img/iulp.jpg" alt="老婆">-->
<!--<img src="D:\\untitled1\\img\\iulp.jpg" alt="老婆">-->
<!--<img src="https://img2.baidu.com/it/u=4162224702,2932016509&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="老婆">-->
<!--粗体b/斜体i 标签-->
<!--用于网页中突出字体-->
<!--<b>粗体标签</b>-->
<!--<b>粗体标签</b>-->
<!--<i>斜体标签</i>-->
<!--<i>斜体标签</i>-->
<!--超链接标签a用于链接其他资源，可以用来跳转或者锚点-->
<!--a标签在创建时会自带一个href属性，属性值就是呢所要跳转的链接，可以是html文件-->
<!--<a href="https://www.baidu.com/s?wd=%E6%8A%8A%E5%85%89%E8%8D%A3%E9%95%8C%E5%88%BB%E5%9C%A8%E5%8E%86%E5%8F%B2%E8%A1%8C%E8%BF%9B%E7%9A%84%E5%8F%B2%E5%86%8C%E9%87%8C&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">-->
<!-- 把光荣写在史册里-->
<!--</a>-->
<!--默认_self原网页跳转,_blank打开一个新的页面进行跳转-->
<!--<a href="./demo5.html" target="_blank">跳转到demo5文件</a>-->
<!--<a href="./demo5.html" target="_self">跳转到demo5文件</a>-->
<!--<a href="./demo5.html" >跳转到demo5文件</a>-->
<!--<a href="./demo5.html" >跳转到demo5文件</a>-->
<!--<a href="./demo5.html" >跳转到demo5文件</a>-->
<!--<a href="https://www.baidu.com/?tn=62095104_27_oem_dg" >百度</a>-->
<!--id在html 理解为 # = id-->
<!--根据id实现锚点跳转-->
<!--<a href="#box1">百步飞剑</a>-->
<!--<a href="#box2">夜尽天明</a>-->
<!--<a href="#box3">诸子百家</a>-->
<!--<a href="#box4">万里长城</a>-->
<!--<a href="#box5">君临天下</a>-->
<!--<div style="height: 1000px" id="box1">-->
<!-- 百步飞剑 <br>-->
<!-- ..........-->
<!--</div>-->
<!--<div style="height: 1000px" id="box2">-->
<!-- 夜尽天明 <br>-->
<!-- ..........-->
<!--</div>-->
<!--<div style="height: 1000px" id="box3">-->
<!-- 诸子百家 <br>-->
<!-- ..........-->
<!--</div>-->
<!--<div style="height: 1000px" id="box4">-->
<!-- 万里长城 <br>-->
<!-- ..........-->
<!--</div>-->
<!--<div style="height: 1000px" id="box5">-->
<!-- 君临天下 <br>-->
<!-- ..........-->
<!--</div>-->
<!--文字标签 span标签是纯文本，配合CSS则可以展示不同效果-->
<!--这是百度的链接，单击跳转：-->
<!--<span style="color: blue">-->
<!-- 百度-->
<!--</span>-->
<!--HTML转义 & 开头 ; 结尾 -->
<!--  区分字 体样式 这是百度<>-->
</body>
</html>3>block块级元素的特点：
a. 总在新行上开始
b. 高度，行高以及外边距和内边距都可控制
c. 宽度缺省，则是它高度的100%
d. 它可以容纳内联元素和其他块元素
4>Inline内联元素特点：
a. 和其它元素在一行上
b. 高，行高以及外边距和内边距不可改变
c. 宽度就是其文字或图片宽度，不可改变
d. 内联元素只能容纳文本或者其他内联元素
三、表格
1.表格介绍：
表格解释
a. 什么是表格？
和大家常见的excel表类似
b. 作用？
表哥的作用主要以表格的形式展示数据
c. 表格主体内容？
主要分为表头、单元格、表脚
2.表格内容：
1>表格标签：包裹整个表格
2>表头标签：默认加粗、居中
3>表身：正规要写，实际中常会省略
4>表脚：结尾，一般没写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table标签-->
<!--行列合并操作
合并列：colspan 合并行：rowspan
-->
<!--border属性加上线边框,cellspacing设置边框的间隔-->
<table border="1px" cellspacing="0">
<caption>表格总标题</caption>
<tr> <!--行标签tr-->
<th>1行1列</th> <!--th表头标签，会默认加粗-->
<th>1行2列</th>
<th>1行3列</th>
</tr>
<tr align="center">
<td colspan="3">2行1列</td> <!--正常的td列标签，不会加粗的标签-->
<!-- <td>2行2列</td>-->
<!-- <td>2行3列</td>-->
</tr>
<tr align="center">
<td rowspan="2" colspan="2">3行1列</td> <!--正常的列标签，不会加粗的标签-->
<td>3行2列</td>
<!-- <td>3行3列</td>-->
</tr>
<tr align="center">
<td>4行1列</td> <!--正常的列标签，不会加粗的标签-->
<!-- <td>4行2列</td>-->
<!-- <td>4行3列</td>-->
</tr>
</table>
</body>
</html>
四、表单
1.表单介绍：
1>介绍：
表单是搜集用户数据信息的各种表单元素的集合区域
2>作用：
用于收取用户数据并向后台发送，前后交互的方式之一
3>应用：
表单常应用于 登录注册， 搜索， 文件上传等
2.表单属性
3.input常用type属性值
1>文本框
<!--文本框-->
用户名：<input type="text" name="user" placeholder="请输入用户名"> <br>
2>密码框
<!--密码框-->
密码： <input type="password" placeholder="请输入密码" name="pwd"> <br>
3>单选框
<!--单选框-->
性别：
男 <input type="radio" name="sex" value="nan">
女 <input type="radio" name="sex" value="nv">
保密 <input type="radio" name="sex" value="bm"> <br>4>复选框
<!--复选框
disabled 禁用选中
checked 默认选中
-->
学课：
<input type="checkbox" name="subject" value="en" disabled> 英文
<input type="checkbox" name="subject" value="zn" checked> 语文
<input type="checkbox" name="subject" value="math"> 数学
<br>5>文件框
<!--文件框-->
<input type="file" name="file">
<br>
6>文本域
<!--文本域
cols=宽 rows=高
-->
文本域：<textarea name="text" id="text" cols="30" rows="10"></textarea>
<br>7>提交框
<!--提交框-->
提交：<input type="submit">
8>重置框
<!--重置框-->
重置框： <input type="reset">9>按钮框
<!--按钮框-->
<input type="button" value="普通按钮">4.input属性
1>name：
表单与后台交互时最重要的一个属性，要求input标签都带上表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
2>value：
表单提交项的值 。input的值，单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项
3>其他
a. placeholder： 提高用户体验度
b. readonly: 只读
c. disabled：禁用
5.select下拉框
<!--下拉框
selected属性 可以设置首个展示的值
-->
籍贯：<select name="sel" id="sel">
<option value="1">上海</option>
<option value="2" selected>长沙</option>
<option value="3">北京</option>
<br>6.表单其他标签
1>fieldset: 给表单设置分组
2>legend: 设置分组表单的标题
3>label: 提高用户体验度
7.form包含元素
五、HTML附加内容
HTML转义
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
