一、HTML简介
1、什么是HTML
HTML是一种超文本标记语言，它不是编程语言，它是利用一系列标签来描述一个网页的语言，不同的标签能够实现不同的功能。它通过一个个的标签将信息展示给用户
2、HTML的书写规范
<html>
<head>
这里面包括页面的一些属性(标题等)、供浏览器解析(编码格式等)、引入外部文件等信息(css文件等)，
</head>
<body>
这里写入内容
</body>
</html>
上面的例子中，包裹文字的就是标签，它们都是成对出现的它们不区分大小写，有开始，有结束，并且大部分标签都是有属性的，想要给某一个属性复制就得用 属性名="属性值" 来赋值
二、基本标签
1、文件标签(结构标签)
(1) <html>:表示其为一个html文件，即根标签
(2) <head>:该标签中包括了一些页面的属性，其中还包括一些别的标签比如<title>网站的标题</title>
(3) <body>: 该标签中存放一些展示给用户的内容，该标签中同样还有其自己的属性，他们分别为:
①text:文字颜色 text="文字的颜色"
文字颜色的写法可以为: a :单词的写法
b : rgb三原色的写法:reg(0,0,0) 其中的每一个位置的取值范围为0-255
c :#000000 白#ffffff黑
②background:背景图片 background="图片的绝对路径或者相对路径"
③bgcolor: 背景色
2、排版标签
(1)、注释标签
(2)、换行标签 <br/>
(3)、段落标签 <p>插入文字</p> 段和段之间有空行
常用属性: ①align:对齐方式 可选参数有 left center right
(4)、水平线标签 <hr/>
常用属性: width:长度
size:粗细
color:颜色
align:对齐方式
尺寸的写法: 像素: 如20px
百分比写法: 50% 会随着页面的大小二做出相应的调整
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>排版标签</title>
</head>
<body>
HTML的标签<br/>
<hr width="25%" size="5px"/>
<p align="center"><!-- 设置格式为居中 -->
超文本标记语言HTML<br/>
HTML很容易学<br/>
</p>
HTML很容易掌握
</body>
</html>
3、块标签
(1)、
<div></div> 行级块标签 默认占一行 可以通过
div +
css 来进行页面的布局
(2)、<span></span> 行内块标签 可以实现错误提示等功能
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>块标签</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
4、文字标签
基本文字标签:<font>
属性: color:字体颜色
size:字体大小 默认为3，最大值为7，最小值为1
face:字体类型
标题标签:<h1>-<h6> 字体大小依次递减，默认占据一行，默认加粗
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<font color="red" >基本文字标签</font>
<hr/>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
</body>
</html>
5、清单标签(列表标签)
(1) 无序列表:<ul></ul>
列表项:<li></li>
属性: type 表示列表最前面的标志类型，可选参数有 disc square circle
(2) 有序列表:<ol></ol>
属性: type 表示列表最前面的标志类型，可选参数有 A、a、I、i
start 可选参数为一个数字 表示首项开始的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul type="disc">
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ul>
<ol type="A" start="2">
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ol>
</body>
</html>
6、图形标签
(1)图形标签: <img/>
属性:
src 表示要加载图片的地址
width 图片的宽度
height:图片的高度
border:边框
align:对齐方式 代表图片与相邻的文本的相对位置 可选参数为 top middle bottom
alt:图片的文字说明
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="images/cat.png" width="50%" height="50%" border="5px" align="top"/>
图形标签
</body>
</html>
7、链接标签
链接标签: <a></a>
属性:
href 要跳转的页面的地址
name 名称 锚点
target 在哪个页面跳转 可选参数有 _self:在当前页面打开 _blank:在新的页面打开
作用:
(1)页面的跳转
如果访问的是互联网上的资源 前面必须为http://开头
(2)锚点访问(锚点表示当前页面的某一个位置)
在访问锚点的时候，书写格式为<a
href="#name的值"></a>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="图形标签.html">点击此处查看猫的图片</a>
<a name="top"></a>
锚点测试<br/>
锚点测试<br/>
锚点测试<br/>
锚点测试<br/>
锚点测试<br/>
锚点测试<br/>
<a href="#top">top</a>
</body>
</html>
8、表格标签
(1)<table></table> 表示一个表格
属性:border:表格的边框
width:表格的宽度
align:表格的对齐方式
bgcolor:背景颜色
(2)<tr></tr>表示行
(3)<td></td>表示一个单元格
属性:
colspan 列合并
rowspan 行合并
(4)<th></th>表示表头
(5)<caption></caption>表格的标题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="50%" align="center">
<caption>HTML学习</caption>
<tr align="center">
<th>第一行第一列</th>
<th>第一行第二列</th>
<th>第一行第三列</th>
</tr>
<tr align="center">
<td rowspan="2">第二行第一列</td>
<td colspan="2">第二行第二列</td>
</tr>
<tr align="center">
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
</body>
</html>
三、表单标签
1、form标签
<form><form/>
属性: name: 表单名称
action: 提交的路径地址
method: 提交的方式 最常用的有两种: ①get②post
get与post二者的区别为:①get提交将数据拼接为一个字符串加载在地址栏后面，而post提交将数据封装在请求体中
②由于提交方式的不同，从①可以看出，get相对不安全，而post相对安全
③get提交有大小限制，而post没有大小限制
2、input标签
<input>
属性: (1)type: 根据type的值的不同其对应的功能也不同，它的参数以下几个值
①text: 普通的文本输入框
②password: 密码输入框 向其中输入字符的时候会显示掩码
③radio: 单选按钮 如果想让多个按钮只能选择一个，则他们每一个按钮的name值要相同，它有以下属性
checked: 表示默认被选中
④checkbox: 复选框 同样的有checked属性代表默认被选中
⑤file: 上传文件的按钮
⑥button: 普通按钮 没有内置功能
⑦submit:提交按钮 点击表单会按照action的地址进行提交
⑧reset: 重置按钮 点击会将表单清空
⑨image: 图片按钮
点击表单会按照action的地址进行提交 它还有以下属性:
src: 图片的相对路径或者绝对路径
⑩hidden: 隐藏表单 提交时服务端需要的数据 但是客户不需要看到
3、select标签
<select></select> 表示一个下拉菜单，它有其相应的属性: name 代表表单项的名称
<option></option> 表示一个选择项 通常在select标签中使用，它有相应的属性: ①value 向后台提交的数据值 ② selected 默认被选中项
4、textarea标签
<textarea></textarea> 可以输入一些文字 可自定义文本框的大小，其对应属性如下
①cols: 列数
②rows:行数
四、框架标签和其他标签
1、框架标签
(1)frameset: <frameset></frameset>
属性: cols:按列划分 划分的格式为 rows="10,*" *代表剩余行数或列数
rows:按行划分
(2)frame: <frame>
属性: name: 名称 便于target根据其值进行定位
src: 加载页面的路径
2、其他标签
(1)meta标签：<meta>可以设置一些搜索的关键字以及编码格式等等
(2)link标签：<link>可以从外部引入css文件 其中的href属性为引入文件的路径
(3)script标签：<script>可以引入js文件 其中的属性src为js文件的路径
3、特殊字符
 ： 代表空格
>：大于号
<：小于号
©：版权符号
&Reg：注册符号
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
