HTML
HTML：超文本标记语言
一.基础语法
1.标签
<!--
HTML
超文本标记语言
基础语法
标签
单标签
无属性 <标签名 />
有属性 <标签名 属性名="属性值" />
双标签
无属性 <标签名></标签名>
有属性 <标签名 属性名="属性值"></标签名>
整体结构
<html></html> 表示当前是一个网页
<head></head> 头部信息
<body></body> 身体部分
doctype
<doctype html> html5版本声明，需要写在文档的第一行
-->
<!-- 网页区域 -->
<doctype html> <!-- html5版本声明-->
<html>
<!-- 头部区域 -->
<head>
<meta charset="utf-8" />
<title>基础语法</title> <!-- 页面的标题，也是收藏网页时默认的名字-->
<link rel="stylesheet" href="引入的css文件的路径" />
<script src="引入的js文件的路径" type="text/javascript" charset="utf-8"></script>
</head>
<!-- 内容区域：浏览器可见内容 -->
<body>
hello
</body>
</html>
二. 标题和水平线
<!--
注意：标签的属性之间要以空格隔开。
body标签
bgcolor 背景颜色 1.颜色名 2.rgb 3.16进制
text 字体颜色 1.颜色名 2.rgb 3.16进制
标题标签
<h1></h1>~<h6></h6> 依次从大到小
不建议在页面中写多个h1标签，h1标签可以被搜索引擎获取到，如果有多个，可能会进入搜索引擎的黑名单。
水平线标签
<hr>
width 宽度 1.百分比 2.px
align 对齐方式 left right center（默认）
size 水平线粗细
-->
<body bgcolor="pink" text="blue">
HELLO
<h1>HELLO</h1>
<h2>HELLO</h2>
<h3>HELLO</h3>
<h4>HELLO</h4>
<h5>HELLO</h5>
<h6>HELLO</h6>
<h999>HELLO</h999>
<hr width="50%" align="left" size="5"/>
<hr width="500px" align="right" size="10"/>
</body>
三.段落和换行
<!--
段落和换行
段落标签
<p></p> 段落会自动换行
常用属性：
align 对齐方式
left 居左对齐（默认）
right 居右对齐
center 居中对齐
justify 两端对齐
换行标签
<br> <br/>
-->
<body>
<p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 <br />
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
<hr />
<p align="left">
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
</p>
<p align="right">
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
</p>
<p align="center">
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
</p>
<hr />
<p >
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。HELLO
</p>
<p align="justify">
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。HELLO
</p>
<hr />
HEELO <br />
WORLD
</body>
四.列表
<!--
列表
无序列表
格式：
<ul>
<li></li>
<li></li>
</ul>
常用属性：
type 列表的图标
square 实心方块
circle 空心圆
disc 实心圆 （默认）
有序列表
格式：
<ol>
<li></li>
<li></li>
</ol>
常用属性：
type 列表的图标
1 数字序号 （默认）
a 小写字母
A 大写字母
i 小写罗马字母
I 大写罗马字母
-->
<body>
<h2>无序列表</h2>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<ul type="disc">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<ul type="square">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<ul type="circle">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<h2>有序列表</h2>
<ol type="1">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ol type="A">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ol type="I">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ol type="i">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ol type="a">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
</body>
五.div和span
<!--
div和span
div标签
层，块级元素，标签会自动换行。
常用于布局。
常用属性：
align div元素中内容的对齐方式
span标签
块，行内元素，标签不会自动换行。
-->
<body>
<div align="center">
层，块级元素，标签会自动换行。
</div>
你好
<div>
层，块级元素，标签会自动换行。<br />
常用于布局。
</div>
<hr />
<span>zhangsan</span>
</body>
六.格式化标签
<!--
格式化标签
font （行内元素，不会自动换行）
设置字体相关的属性
常用属性：
color 字体颜色 （颜色名、十六进制、rgb）
size 字体大小
face 字体风格
pre
定义预格式化的文本。保留文本中的空格和换行。文本呈现等宽字体。
行内元素
粗体
b strong
斜体
i
下划线
u
中划线
del
下标
sub
上标
sup
-->
<body>
你好<br>
<font color="red" size="5" face="楷体">你好</font>
<hr>
HELLO WORLD
<pre>
HELLO
WORLD
</pre>
<hr >
粗体 -- <b>粗体</b> <strong>粗体</strong> <br>
斜体 -- <i>斜体</i><br>
下划线 -- <u>下划线</u><br>
中划线 -- <del>中划线</del><br>
下标 -- H<sub>2</sub><br>
上标 -- 2<sup>2</sup>
</body>
七.超链接a标签
<!--
超链接a标签
定义超链接，用于从一个页面链接到另外一个页面。
行内元素，不会自动换行。
常用属性：
href 必须属性（如果未设置该属性，则a标签与普通文本没有什么区别）
需要跳转的地址
target
窗口打开的方式
_self 当前窗口打开（默认）
_blank 新开空白窗口打开
_parent
_top
-->
<body>
<!-- 相对路径 -->
<a href="05-列表.html">05-列表.html</a>
<!-- 绝对路径 -->
<a href="C:\workspace\html\05-列表.html">05-列表.html</a>
<!-- 网络路径 -->
<a href="https://www.runoob.com/html/html-editors.html">菜鸟教程</a>
<a>列表</a>
<!-- 新开窗口打开页面 -->
<a href="05-列表.html" target="_blank">05-列表.html</a>
</body>
八.a标签实现锚点
<!--
锚点的实现
如果想要跳转到当前页面，那么href的值可以设置为#
1. 利用a标签的name属性
2. 利用其它标签的id属性
-->
九.图片
<!--
图片
img标签，行内标签，不会自动换行
必须属性：
src 被引入的图片的地址
常用属性：
title 当鼠标悬停在图片上时显示的文字
alt 当图片加载失败时显示的文本
width 设置图片的宽度
height 设置图片的高度
align 规定如何根据文本来排列图像
-->
<body>
<!-- 本地图片 -->
<img src="img/img1.jpg" alt="图片显示错误" />
<img src="img/img2.jpeg" width="200px" height="100px" />
<!-- 网络资源 -->
<a href="http://www.baidu.com">
<img src="https://www.baidu.com/img/bd_logo1.png" title="百度一下，你就知道" border="2" />
</a>
<hr />
<div>
11111
<img src="img/img1.jpg" align="right" />
2222
</div>
</body>
十.表格
</head>
<!--
表格
table 表示表格
tr 表示表格中的行（每一行可以包含一个或多个td或th）
td 表示表格中的标准单元格
th 表示表格中的表头单元格（具有标题的效果，字体加粗，居中显示）
table常用属性
border 表格的边框
width 表格的宽度
像素值或百分比（如果是百分比，参考的是上一级元素的宽度，如果上一次元素未设置，则参考屏幕宽度）
height 表格的高度
align 表格的对齐方式 （left、right、center）
tr常用属性
align 每行中文本内容的水平方向对齐方式（left、right、center）
valign 每行中文本内容的垂直方向对齐方式
bgcolor 设置行的背景颜色
css样式
border-collapse: collapse; 合并表格边框
合并单元格
<td>的colspan和rowspan分别规定单元格横跨的列数和行数
纵向合并 rowspan
横向合并 colspan
-->
<body>
<table border="1" width="500px" align="center" height="200px" style="border-collapse: collapse;">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center" valign="top" bgcolor="antiquewhite">
<td>101班</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="left">
<td>101班</td>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
<tr align="right">
<td>102班</td>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>
<hr />
<h3 align="center">纵向合并 rowspan</h3>
<table border="1" width="500px" align="center" 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>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
<tr align="center">
<td>102班</td>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>
<hr />
<h3 align="center">横向合并 colspan</h3>
<table border="1" width="500px" align="center" 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>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
<tr align="center">
<td>102班</td>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>
十一.表单
<!--
所有标签都有的属性：
id属性 用来标识元素的唯一性
name属性 提交数据时的参数名
style属性 设置元素的行内样式（具体的样式）
class属性 设置元素的样式名
表单
form
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
表单提交时，必须设置表单元素的name属性值，否则无法获取数据。
表单需要结合表单元素一起使用。
常用属性
action 提交表单的地址
method 提交方式 （不区别大小）
GET提交 get
POST提交 post
target 提交数据时打开窗口的方式
_self 当前窗口
_blank 空白窗口
GET请求与POST请求的区别：（post请求需要服务器的支持）
1、get请求时参数会跟在浏览器地址栏的后面，而post请求不会（post请求会将数据存放在请求体中）
2、get请求相对于post而言，不那么安全
3、get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器相关）
4、get请求比post请求快（2倍左右）
5、get请求有缓存（会将数据存放在浏览器中，即本地磁盘中），而post请求无缓存
-->
<body>
<form action="http://www.baidu.com" method="get" target="_blank">
姓名：<input type="text" name="uname" />
<button>提交</button>
</form>
</body>
十二.input标签
<!--
input标签 （行内元素）
type 元素的类型
text 文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件域
hidden 隐藏域
button 普通按钮
submit 提交按钮
reset 重置按钮
date 日期框
value 元素的值
readonly 只读状态
maxlength 最多输入的长度
disabled 禁用标签
注意：
1. 单选框需要通过name属性设置为一组，复选框需要通过name属性设置为一组
2. 如果时上传文件的表单，则表单需要设置一个属性 enctype="multipart/form-data"，提交方式为post请求
3. 没有name属性是无法提交数据的！！！
-->
<body>
<form action="http://www.baidu.com" method="get">
文本框：<input type="text" value="zhangsan" maxlength="10" name="uname"/><br />
文本框：<input type="text" value="zhangsan" readonly="readonly" /><br />
密码框：<input type="password" /><br />
单选框：<input type="radio" value="man" name="sex" /> 男
<input type="radio" value="woman" name="sex" /> 女 <br />
复选框：<input type="checkbox" value="1" name="test" /> 1
<input type="checkbox" value="2" name="test" /> 2
<input type="checkbox" value="3" name="test" /> 3<br />
文件域：<input type="file" /><br />
隐藏域：<input type="hidden" value="admin" /><br />
普通按钮：<input type="button" value="普通按钮" disabled="disabled" /><br />
提交按钮：<input type="submit" value="提交按钮"/><br />
重置按钮：<input type="reset" value="重置按钮" /><br />
日期框：<input type="date" /><br />
</form>
</body>
十三.textarea标签
<!--
textarea
定义可输入多行文本的控件
cols 文本的可见宽度
rows 文本的可见行数
label标签
for属性
当for属性与元素的id属性值一致事，点击label标签，会自动会元素聚焦
-->
<body>
姓名：<input type="text" name="uname" /> <br>
简介：<textarea cols="30" rows="10"></textarea>
<hr />
<label for="uname">姓名</label>：<input type="text" name="uname" id="uname"/> <br>
</body>
十四.button标签
<!--
input按钮
type="button" 普通按钮
type="submit" 提交按钮
type="reset" 重置按钮
button标签
type="button" 普通按钮
type="submit"(默认) 提交按钮
type="reset" 重置按钮
双标签，标签之间可以添加内容（文本或标签等）
-->
<body>
<form action="http://ww.baidu.com" >
<input type="text" name="uname"/>
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<hr />
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<hr />
<button>按钮</button>
</form>
</body>
十五.下拉框
<!--
下拉框
select 下拉框标签
option 下拉框的选项标签
select常用属性
multiple 设置下拉框可多选
size 设置下拉框可见选项数
disabled 禁用元素
option常用属性
selected 默认选中项
disabled 禁用某个选项
value 提交给服务器的选项值
如果设置了value属性值，则提交的是value的值；
如果未设置value属性值，则提交option双标签中的文本值
-->
<body>
<select name="city" disabled="disabled">
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
<select name="city" multiple="multiple" size="2">
<option>上海</option>
<option>北京</option>
<option>深圳</option>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
<select name="city" >
<option value ="">请选择城市</option>
<option value="sh">上海</option>
<option selected="selected">北京</option>
<option disabled="disabled">深圳</option>
</select>
</body>
十六.字符实体
<!--
字符实体
< <
> >
空格
版权 ©
-->
<body>
<h2>你 好</h2> <br>
版权声明 ©
</body>
348
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
