HTML
1.HTML介绍
HTML(Hyper Text Markup Language)是一种超文本标记语言。
超文本：指页面内可以包括图片、链接、音乐、程序等非文字元素。
标记语言：标记(标签)构成的语言。
2.HTML标准页面结构
<!DOCTYPE html> html5的文档类型
<html> html的标准的开始标签
<head> 头标签
<meta charset="utf-8" /> 页面编码utf-8(一个中文对应三个字节)
<title></title> 页面的窗口标题
</head>
<body> 页面主体部分,需要写大量的html元素(标签)在这里面通过浏览器进行渲染
</body>
</html>
3.HTML标签介绍
3.1 HTML文本注释
以<!--开始
以-->结束
输入方式：shift+ctrl+/
注释指挥出现在源代码中，不会在浏览器中显示
3.2 根标签&子标签
| html根标签 | 网页上所有内容都写在根标签里 |
|---|---|
| head头标签 | |
| title页面内的窗口标题显示内容 | meta charset="utf-8"是显示的页面编码 |
| body标签 | 标签定义文档主题，包含文档所有内容 |
3.3 常用的HTML文本标签
| 元素 | 作用 |
|---|---|
| h1——h6 | 标题标签，h1最大依次递减h6最小 |
| p | 段落标签，这一段内容前后有换行效果 |
| hr | 分割线标签，分割线标签没有开始标签 |
| br | 换行标签,没有开始标签 |
| blockquote | 段落缩进标签(长引用) |
| b | 加粗标签 |
| strong | 文章语气强调，有加粗效果 |
| i | 斜体标签 |
| em | 文章语气强调，有加粗效果 |
| pre | 原样输出，按照文本格式原封不动的浏览器输出 |
| code | 计算机编程代码code标签 |
| sup和sub | 上下行标签，一般用在站点底部栏版权所有信息 |
3.4 超链接
HTML使用<a>标签定义超链接
<a href="连接到资源地址的url" target=_self>link text</a>
taget属性：打开资源文件的方式
1、_self(默认),点击后再统一窗口打开文档
2、_blank ,在新窗口打开文档
3.4.1 超链接的使用方式
方式一：跳转链接，由一个页面跳转到另一个页面
方式二：锚链接
同一页面下：
1）创建锚点(跳转标记)
<a name="锚点名称"></a>
2)创建体哦啊转链接地址
<a href="#锚点名称">跳转文本</a>
不同页面下：
1)创建锚点
<a name="锚点名称"></a>
2）创建跳转链接的锚点地址
<a href="另一个地址的url#锚点名称">跳转文本</a>
3.4.2 统一资源定位符(URL)
HTTP协议使用URL来定位资源。
url统一资源定位符的组成:
协议+域名+端口 :网站默认都是将端口80(省略不写)
3.4.3 延伸：HTTP协议的执行流程
用户点击超链接字符将发送请求到本机localhost查找是否有url域名对应的ip地址，如果没有就会调用网卡驱动联网访问DNS服务器找到url地址后响应回传到电脑。
超链接 href属性="http://192.168.0.1:端口号/后端接口地址"
图像标签 src属性="http://ip或者域名:端口号/服务器端存储的验证码接口"
都属于"浏览器行为",浏览器----->发送请求----->被服务器接收
浏览器 <---- 响应 <--- 解析完数据
http协议的执行流程:先去本地磁盘上c:\windows\system32\drivers\etc-->hosts文件
localhost 127.0.0.1 回环地址
找到了,直接访问;找不到,就需要调用网卡驱动---->联网---->访问DNS服务器(网络运营商)
记录大量常用的网站域名以及ip地址
www.baidu.com 10.12.156.18
dns服务器访问---百度服务器---->回显给用户"首页"
3.5 图像标签：img
1）可以包裹在a标签中的图像链接
<a href="跳转地址.html">
<img src="img/图片地址.jpg" width="px" height="px" align="left"/>
</a>
2)给整个页面设置背景图片
<body background="img/图片地址.jpg">
</body>
3.5.1 IMG标签常见的属性
src：显示图像的URL(引入图片的路径地址)
alt:图像的代替文本(图片错误时显示的文本)
height：图像的高度
width:图像的宽度
align:图像的对齐方式(默认left，center(居中)、right(靠右))
title：鼠标移入图片会出现一段文字提示
3.6 表格标签：table
表格由<table>标签来定
子标签<caption></caption>：可以指定表格标题内容
<tr></tr>：行标签
<th></th>：表头(特殊单元，文本自动居中加粗)
<td></td>：表内普通单元格，每行被分割为若干个单元格
3.6.1 table标签常见属性
table标签常见属性：
border="标签边框大小"
cellspacing="单元格间距" 单元格与单元格之间的距离
cellpadding="单元格边距" 单元格内容与单元格边框的距离
bgcolor="背景颜色"
表格单元格合并属性：
合并行(行合并)rowspan="所占单元格的数量"
合并列(列合并)colspan="单元格的数量"
3.7 块标签
- div和span都是非常重要的标签，div的语义时division"分割"；span的语义时span"范围""跨度"。
- 后续CSS中这两个东西都与，CSS box息息相关
div：单独占一行，块级元素，这些标签会以新的行开始或结束
诸如h1~h6、p标签、table标签
span：行内标签，属于内联元素
内联元素(没有从新行开始)：span、b、td、a、img
3.7.1 div的引用场景_层级布局
3.7.2 span行内标签的引用场景
3.8 列表(无序列表/有序列表/自定义列表)
3.8.1 无序列表
顾名思义，就是没有排序的列表，格式如下
<ul type="disc">
<li></li>
<li></li>
<li></li>
</ul>
元素type默认属性是disc(圆点)
还有circle(圆圈)
square(正方形)
3.8.2 有序标签
可以排序的标签类型，格式如下
<ol type="1">
<li></li>
<li></li>
<li></li>
</ol>
type默认属性为1 数字排序1,2,3,4....
a 排序a,b,c,d.....
A 排序A,B,C,D....
i 排序i,ii,iii....
I 排序I,II,III....
3.8.3 自定义列表标签
<dl>定义自定义列表
<dt>自定义列表项</dt>
<dd>自定义列表中的具体内容</dd>
<dd>自定义列表中的具体内容1</dd>
<dt>自定义列表项1</dt>
<dd>自定义列表中的具体内容</dd>
<dd>自定义列表中的具体内容1</dd>
</dl>
3.9 表单标签：form
table不能嵌套form，form可以嵌套table
最常见的应用场景：登录或者注册(用户填写信息通过表单提交，将用户数据提交到服务器端)
3.9.1 form表单常用属性
| 属性 | 值 | 说明 |
|---|---|---|
| action | url | 提交表单后会把数据提交到指定的url地址 |
| method | GET/POST | 数据传输到服务器的方式 |
| name | name | 规定表单名称 |
3.9.2 延伸：form表单提交get和post有什么区别
浏览器默认提交方式是GET
1.是否将表单用户的数据提交到地址栏
GET可以提交到地址栏上，post则不会
2.是否安全（相对）
get提交相对于post不安全，将数据信息(涉及隐私数据)提交到地址栏
post，相对安全--->浏览器网络---->负载---->查看formdata
3.提交数据大小是否有限制
get，有限制（地址栏不能无限去拼数据 key=value&key2=value2...）
post没有限制(后端io去读前端post数据)
3.9.3 表单中常见的表单项元素
文本输入框：
<input type="text"/>
密码输入框：
<input type="password"/>
日期组件：
<input type="data"/>
单选按钮：
<input type="radio"/>
邮箱：
<input type="email"/>
复选按钮:
<input type="checkbox"/>
上传文件组件：
<input type="file"/>
重置按钮:
<input type="reset"/>
特殊按钮提交
<input type="sumbit"/>
下拉按钮：
<select>
<optopm></option>
</select>
文本域：
<textarea>
表单项元素常用属性解释
name属性定表单项的名称，具有唯一性；
cols属性定义宽度；
rows属性定义高度；
maxlength属性定义输入的字符数；
value属性定义文本框的初始值、定义按钮显示的文字；
placeholder属性定义文本框内显示的内容，输入内容后消失。
4.0 视频/音频元素：video
video元素
属性:width: 宽度 以及height:高度
controls="controls" h5的video控制视频播放
source子标签:指定 加载视频连接地址 src属性
type="媒体类型 举例.mp4/.mp3/.ogg等等都是媒体类型"
<video width="320px" height="300px"controls="controls">
<source type="audio/mp4" src="video/OPPO-京东.mp4">
</source>
</video>
浙公网安备 33010602011771号