HTML基础语法
1.标签
1.1 单标签
1.2 双标签
2.整体结构
2.1 doctype版本声明
2.2 html
2.3 head-title
2.4 body
3.常用标签
3.1 标题(h1~h6)和水平线(hr)
3.2 段落(p)和换行(br)
3.3 列表(ul-li、ol-li)
3.4 div和span
3.5 格式化标签( font、pre )
3.6 超链接标签( a )
3.7 图片标签( img )
3.8 表格标签( table )
3.9 表单标签（ form
3.10 常用字符实体( <> © )
3.11 标签的分类( 三类 )
代码演示
<!--
作者：
时间：2021-01-15
描述：doctype 版本申明，html就是申明是html5
-->
<!DOCTYPE html>
<html>
<head>
<!--
作者：1834472531@qq.com
时间：2021-01-15
描述：meta 基础配置
-->
<meta charset="UTF-8">
<!--
作者：
时间：2021-01-15
描述：title 游览器的标题
-->
<title></title>
</head>
<!--
作者：
时间：2021-01-15
描述：标签，注意：标签的属性之间要以空格隔开
body标签
bgcolor 背景颜色 1.颜色名 2.rgb 3.十六进制
text 字体颜色 1.颜色名 2.rgb 3.十六进制
标题标签
<h1></h1>~<h6></h6> 依次从大到小
不建议在页面中写多个h1标签，h1标签可以被搜索引擎获取到，如果有多个，可能会进入搜索引擎的黑名单。
水平线标签
<hr />
width 宽度 1.百分比 2.px
align 对齐方式 1.left 2.right 3.center（默认）
size 水平线粗细
段落标签
<p></p> 段落会自动换行
align 1.left 居左对齐（默认）
2.right 居右对齐
3.center 居中对齐
4.justify 两端对齐,看最后的字段
换行标签
<br /> 换行
列表标签
1.无序列表
格式： <ul>
<li></li>
<li></li>
</ul>
常用属性：
type 列表的图标
1.square 实心方块（默认）
2.circle 空心圆
3.disc 实心圆
2.有序列表
格式： <ol>
<li></li>
<li></li>
</ol>
常用属性：
type 列表的图标
1.1 数字序号（默认）
2.a 小写字母
3.A 大写字母
4.i 小写罗马字母
5.I 大写罗马字母
div标签
<div></div> 层，默认占整行的宽度，块级元素，标签会自动换行，常用语布局
常用属性：
align div元素中内容的对齐方式
span标签
<span></span> 块，没有固定的形式，行内元素，标签不会自动换行
格式化标签
<font></font> 设置字体相关的属性
常用属性：
color 字体颜色 1.颜色名 2.rgb 3.十六进制
size 字体大小
face 字体风格
<pre></pre> 定义预格式化的文本，保留文本中的空格和换行。文本呈现等字体。
行内元素标签
<b></b> 粗体
<strong></strong> 粗体
<i></i> 斜体
<u></u> 下划线
<del></del> 中划线
<sub></sub> 下标
<sup></sup> 上标
超链接标签
<a></a> 超链接，用于从一个页面链接到另一个页面，行内元素，不会换行，
常用属性：
href 访问路径，是必须属性（如果没有设置该属性，则a标签与普通文本没什么区别）
1.相对路径
2.绝对路径
3.网络路径
target 窗口打开的方式
1._self 当前窗口打开
2._blank 新开空白窗口打开
3._parent 窗口里还有窗口
4._top 嵌套
锚点的实现
如果想要跳转到当前页面，那么href中可以设置不填或#
1.利用a标签的name属性 <a href="#name"> 回到a标签这里</a>
2.利用其它标签的id属性
图片标签
<img src="" /> img标签，行内标签，不会自动换行
必须属性：
src 被引入的图片地址
常用属性：
title 当鼠标悬停图片时显示的文字
alt 当图片加载失败时显示的文字
width 设置图片的宽度，当没有设置高度时，高度自动等比缩放
height 设置图片的高度，当没有设置宽度时，宽度自动等比缩放
border 设置图片的边框
align 规定如何根据文本来排列图像，right，center，left，图片在文本的右边、、、、
表格标签
<table></table> 表格标签
<tr></tr> 表格中的行标签（每一行可以包含一个或多个td或th）
<td></td> 表格中的标准单元格
<th></th> 表示表格中的表头单元格（具有标题的效果，字体加粗，显示居中）
table常用属性
border 表格的边框
width 表格的宽度（像素、百分比参考的是上一级元素，如果上一级没有设置，则参考屏幕宽度）
align 表格的对齐方式right，center，left
tr常用属性
align 每行文本内容的水平方向对齐
bgcolor 每行文本的的背景颜色
valign 每行文本内容的垂直方向对齐
css样式
border-collapse: collapse； 合并表格边框
表单标签
<form></form> 表单标签，向服务器传递数据，form元素是块级元素，不会自动换行
表单提交时，必须设置表单元素的name属性，否则无法获取数据
表单需要结合表单元素一起使用
默认是get请求
所有标签都有的属性：
id属性 用来表示元素的唯一性
name属性 提交数据是的参数名
style属性 设置元素的行内样式
class属性 设置元素的样式名
常用属性：
action 提交表单的地址（非常重要）
method 提交方式（GET提交，POST提交)（默认get提交）
get与post请求的区别： （post请求需要服务器的支持）
1.get请求时参数会跟在浏览器地址栏的后面，而post请求不会（post请求会将数据存放在请求体中）
2.get请求相对于post而言，不那么安全
3.get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器有关）
4.get请求比post请求快（大概是2倍左右）
5.get请求有缓存（会将数据存放在游览器中，即本地磁盘中），而post请求无缓存
target 提交数据时，打开窗口的方式（_self,_blank)
<input> input标签
常用属性：
1.type 元素的类型
1.text 文本框（显示具体值）
2.password 密码框（不显示输入值）
3.radio 单选框（需要通过相同的name属性设置为一组）
4.checkbox 复选框（需要通过相同的name属性设置为一组）
5.file 文件域（如果是上传文件的表单，则表单需要设置一个属性：enctype="multipart/form-data",因为图片资源比较大，所以提交方式为post请求
6.hidden 隐藏域
7.button 普通按钮
8.submit 提交按钮
9.reset 重置按钮
10.date 日期框
2.value 元素的值（默认值）
3.readonly 只读状态
4.maxlength 设置输入的最大的长度，超过则不显示
5.disable 禁用标签
textarea标签
<textarea></textarea> 定义可输入多行文本的控件
常见属性：
1.cols 文本的可见宽度
2.rows 文本的可见行数
label标签
<label></label> 自动聚焦，标记标签
常用属性：
1.for 当for属性与元素的id属性值一致时，点击label标签，会自动元素聚焦。（与name属性无关，只与id属性相关）
button标签
<button></button>
与input按钮的区别，input显示文字在value属性中，button是在标签中
所以，在button中可以添加图片按钮
双标签，标签之间可以添加内容（文本或标签等）
常用属性：
1.type （button、submint、reset）默认属性为submit
下拉框
<select> 下拉框,不会自动换行
<option></option> 下拉框内容
<option></option>
</select>
select常用属性：
1.multiple 设置下拉框可多选
2.size 设置下拉框可见项数
3.disable 禁用元素
option常用属性：
1.selected 默认选中项
2.disabled 禁用摸个选项
3.value 提交给服务器的选项值，如果设置了value属性值，则提价value属性值，如果未设置value属性值，则提交option双标签中的文本值
字符实体
1.< < 有分号一起的哦！！！
2.> >
3.空格
4.版权 ©
标签的分类
1.块级元素 不在一行，可以设置元素的宽高，默认百分之百
2.行内元素 在一行，不可以设置宽高，超过最大限度，才换行，
3.行内块状元素 在一行，可以设置宽高
-->
<body>
<select name="city" >
<option>上海</option>
<option>北京</option>
<option>杭州</option>
</select>
<hr />
<select name="city" multiple="multiple" size="2">
<option>上海</option>
<option>北京</option>
<option>杭州</option>
<option>上海</option>
<option>北京</option>
<option>杭州</option>
</select>
<hr />
<select name="city" >
<option value="">请选择城市</option>
<option>上海</option>
<option selected="selected">北京</option>
<option>杭州</option>
</select>
<hr />
<form action="http://www.baidu.com" >
<input type="text" /><br />
<input type="button" value="普通按钮" /><br />
<input type="submit" value="提交按钮" /><br />
<input type="reset" value="重置按钮" /><br />
<hr />
<button type="button">普通按钮</button>
</form>
<hr />
姓名：<input type="text" name="uneme" /><br />
简介：<textarea name="ujianj" id="" cols="30" rows="10"></textarea><br />
<label for="uname">姓名：</label><input type="text" name="uname" id="uname"/><br />
<hr />
<form action="#" method="get">
文本框text：<input type="text" maxlength="8" name="user" /><br />
文本框text：<input type="text" readonly="readonly" value="zhangsan" /><br />
密码框passw：<input type="password" /><br />
单选框radio： <input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女<br />
复选框checkbox： <input type="checkbox" name="test" value="1" />1
<input type="checkbox" name="test" value="2" />2
<input type="checkbox" name="test" value="3" />3 <br />
普通按钮button：<input type="button" value="普通按钮" /><br />
提交按钮submit：<input type="submit" value="提交按钮 " /><br />
重置按钮reset： <input type="reset" value="重置按钮" /><br />
日期框date： <input type="date" /><br />
</form>
<hr />
<table border="1" width="500px" height="50px" style="border-collapse: collapse;">
<tr>
<th colspan="2">班级+姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td rowspan="2">101班</td>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr align="center">
<td>李四</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>103班</td>
<td>王五</td>
<td>32</td>
<td>男</td>
</tr>
</table>
<hr />
<table border="1" width="500px" height="50px" style="border-collapse: collapse;">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td rowspan="2">101班</td>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr align="center">
<td>李四</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>103班</td>
<td>王五</td>
<td>32</td>
<td>男</td>
</tr>
</table>
<hr />
<table border="1" width="500px" style="border-collapse: collapse;">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>101班</td>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>101班</td>
<td>李四</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>103班</td>
<td>王五</td>
<td>32</td>
<td>男</td>
</tr>
</table>
<a href="#">锚点</a>
<hr />
<a href="html_001.html">html_001.html</a>
<a href="html_001.html" target="_blank">html_001.html _blank</a>
<hr />
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<hr width="50%" align="left"/>
<hr width="500px" align="right" size=10/>
<hr />
<p>
数据挖掘是一种信息处理技术，是从大量数据中自动分析并提取知识的技术。是一个处理过程
</p>
<p align="left">
数据挖掘是一种信息处理技术，是从大量数据中自动分析并提取知识的技术。是一个处理过程
</p>
<p align="right">
数据挖掘是一种信息处理技术，是从大量数据中自动分析并提取知识的技术。是一个处理过程
</p>
<p align="center">
数据挖掘是一种信息处理技术，是从大量数据中自动分析并提取知识的技术。是一个处理过程
</p>
<p align="justify">
数据挖掘是一种信息处理技术，是从大量数据中自动分析并提取知识的技术。是一个处理过程
</p>
<hr />
<h2>无序列表</h2>
默认
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
square 实心方块
<ul type="square">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
circle 空心圆
<ul type="circle">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
disc 实心圆
<ul type="disc">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<hr />
<h2>有序列表</h2>
默认
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
1.1 数字序号
<ol type="1">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
2.a 小写字母
<ol type="a">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
3.A 大写字母
<ol type="A">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
4.i 小写罗马字母
<ol type="i">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
5.I 大写罗马字母
<ol type="I">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<hr />
<div>
hello div <br />
我是第二行
</div>
<span>
hello span
</span>
<hr />
<font color="red" size="4" face="微软雅黑">你好</font>
<hr />
<pre>
hello word
hello2
</pre>
<hr />
粗体 -- <b>粗体</b> <strong>粗体</strong>
<br />
斜体 -- <i>斜体</i>
<br />
下划线 -- <u>下划线</u>
<br />
中划线 -- <del>中划线</del>
<br />
上标 -- H <sub>2</sub>
<br />
下标 -- X <sup>2</sup>
<br />
</body>
</html>
扫一扫
4989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
