一、什么是HTML
HTML是一种超文本标记语言
- 超文本:文本,图片,音频,视频,超链接等
- 标记:符号,标签
标记是没有逻辑的
组成:
- 指令
- 转义字符
- 标签
目的:完成页面的搭建
HTML页面大致的组成部分：
:必须出现在页面的最上方，规定该文档采用的html版本类型:页面标签：包含所有页面内容，只有head与body两个子标签:头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标,主放功能:体标签：页面显示内容存放区域、样式、脚本,主放内容
简单的一个htm5搭建:
<!DOCTYPE html>
="en"> <!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析> > ="UTF-8"> <!--meta 为body里内容的编码的方式--> >Title</title> <!--网页的标题--> </head> > </body> </html>
二、指令
- 注释:
,还有一种不常用的注释写法
- 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
- 声明位于文档中的最前面的位置，处于 标签之前，声明告知浏览器的解析器用什么文档标准解析这个文档（标准模式）。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
- 标签没有结束标签。 声明不区分大小写。总是先给 HTML 文档添加 声明，确保浏览器能够预先知道文档类型。
三、转义字符
语法:&内容;
常用的转义字符
<: <;
>: >; 空格： ; 版权：©;
四、标签
1.标题标签
h1~h6:里面内容相对于普通的内容会加粗,且会自动换行
2.段落标签
p:自带换行，有段落间距
3.文本类型标签
共同点都不带换行
常用的文本类型标签
- b与strong:内容加粗
- i与em:内容斜体
- sup:上角标
- sub:下角标
- span:没有什么意义,但是会用来嵌套其他文本表示共同使用
4.超链接标签
a标签
例如如下一句
='http://www.baidu,com' targe = '_slef'>页面中显示的文本内容</a>
- href:里面选择超链接地址,注意如果没加
http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接 - targe:
- _self:在原本的窗口打开
- _blank:创建一个新窗口打开
- _top:覆盖上一条记录
- _parent:覆盖所有的记录
且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色
5.图片标签
![]()
="这是二哈" alt="二哈" src="url">- title:鼠标停留会显示,也可以用于其他标签当属性
- alt:src中的 url响应失败显示的内容
- src:图片的url
6.列表标签
ul>li:无序标签
ol>li:有序标签
特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数 显示结果: > >第1列</li> >第2列</li> >第3列</li> >第4列</li> >第5列</li> </ul> ul>li{第$$列}*5 显示结果 > >第01列</li> >第02列</li> >第03列</li> >第04列</li> >第05列</li> </ul>
7.表格标签
table>tr>th|td
- tr:行
- th:标题单元格
- td:普通单元格
属性
- border:边框像素
- cellspacing:单元格的间距,最小为0
- cellpadding:单元格的内边距
- rules:all处理成一条直线,但是不能与cellspacing一起用会冲突
- colspan:th与td的属性表示占几列默认为1
- rowspan:th与td的属性表示占几行默认为1
案例:
="1" rules="all"> > >标题1</th> >标题2</th> >标题3</th> </tr> > ="2">1</td> =2">2</td> </tr> > >5</td> >6</td> </tr> > >7</td> >8</td> >9</td> </tr>
五、表单
from>input|label|button|textarea|select
1.form表单属性
属性
值
含义
action
url
指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码
method
get或post
将表单数据提交到http服务器的方法，可能值有两个：get和post
enctype
application/x-www-form-urlencoded
指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。
2.input标签
input属性大概介绍:
- type:按钮的属性
- id:标识
- name:与后端交互的key
- values:给后端的值,如果没有name则没法给到后端
案例分析：
<!DOCTYPE html>
>
> ="utf-8"> >表单标签</title> </head> > <!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->