html标签、属性、表格、超链接等相关用法
- 标签
- 块级元素、行内元素的嵌套关系
- 乱码问题
- 属性
- 路径问题
- 超链接
- 实体
- 文章
- 表格table
- HTTP：应用层的协议
- Form：表单
标签
标签：
要求镜面嵌套
标签名称不区分大小写
成对标签：开始标签 结束标签
单标签：空元素 img
块级元素：
p margin-top/margin-bottombody margindiv（没有任何样式）（用于搭建页面框架）ul ol li margin/list-typeh1-h6:margin/font-size/font-weight宽度是100%高度是由内容决定占用一整行 一般用于页面结构的搭建
行内元素：
作用：点缀网页，填充内容span（没有任何样式）（修饰） img aem b i strong u高度、宽度都是由内容决定会和其他元素共用一行一般用于内容填充
P 段落标签：段前距离和断后距离
margin-top/margin-bottom
width:100%
块级元素、行内元素的嵌套关系
块级元素、行内元素的嵌套关系：
1.块级元素可以包含行内元素
2.行内元素不要包含块级元素块级元素视情况而定比如：div可以包含块级元素
body:浏览器的可视区域
乱码问题
乱码问题：
1.编辑器本身 vscode 当前文件的右下角进行设置
2.代码本身
3.浏览器菜单栏里查找字符编码的设置
属性
属性：
1.大多数都有的（核心属性）
id 唯一的标识 id=“n1” 不要直接写成数字，写成符合当前业务的名字
class 一类的标识
style=“CSS代码” style=“color:red”
title属性：每一个元素的名称
2.特有的
img元素 img src=“图片的地址” alt=“默认显示的文字” width/height
a 超链接 href=“文件的地址” target="_self" target="_blank" _parent -top
3.自定义
你好
百度一下
$span.data.url
路径问题
路径问题：
本地的绝对路径:<img src="file://E:\HTML5练习图片\baidu.PNG">
本地的相对路径:<img src="images/guibinquan.PNG" alt="这是一只贵宾犬" width="50px" height="50px">
<!--.是指当前目录-->
<!--..是指上一级目录-->
<img src="../return.PNG">
网络路径:<img src="http://........" alt="狗狗"><img src="http://192.168.1.2.:8080/images/1.gif" alt="">
超链接
超链接：
1.发邮件
<a href="mailto:1109720702@qq.com">发送邮件</a>
2.跳转到本地的一个页面
<a href="hello.html">跳转到hello.html</a>
3.有超链接的效果
<a href=" ">有超链接效果</a>
4.指代跳转到本页面
<a href="#">指代跳转到本页面</a>
5.图片具有超链接效果：
<a href="1-hello.html"><img src="guibinquan.PNG" alt="" width="20px" height="30px"></a>
6.当做锚点使用 #id的值
<div id="d1">头部</div>
<div id="d2" style="height: 1200px;">尾部</div>
<a href="#d1">返回顶部</a>
实体
实体：
< < 空格 “ "
> > & & ‘ '
文章
文章：
h1-h6标题标签，逐渐变小
unorder list无序列表
<ul type="circle"><li>菜单1</li><li>菜单2</li></ul>order list有序列表<ol><li type="1">篮球</li><li>足球</li></ol>
表格table
表格：table(注意层级结构)
数据的简单展示，一般使用DIV+CSS进行布局
边框border=’1’ 外边距cellspacing=’0’内边距cellpadding=’10 ‘,width=’50px/100%’
对齐效果 align=’center/left/right’
Caption表格标题
thead表头，可写可不写
Th(有加粗效果)\td（普通）不可单独存在
合并行：rowspan=’要合并的行数’
合并列：colspan=’要合并的列数’
HTTP：应用层的协议
HTTP：应用层的协议
相应的状态码：http status 200(ok) 404(请求失败，地址错误) 500（源代码出现错误）
请求方式method:
- Get:显式的，大小有限制（小） 浏览器的地址栏，超链接，表单
表单数据被附加在url上，使用？分隔 - Post:隐式的，大小有限制（大） 表单数据包含在http协议的请求报文体部
一次请求：
请求报文：请求行请求报文：
请求行： method url HTTP/1.1
请求头：客户端和服务端约定的系统属性、自定义的属性、令牌
请求体：
- GET请求报文：
GET http://ww.baidu.com/baidu/index.html?wd=12&k1=v1 HTTP/1.1\r\n
Host:http://ww.baidu.com\r\n
User-agent:safri…\r\n
Connection:keep-alive\r\n
\r\n
Null - POST请求报文：
POST http://www.baidu.com/baidu/index.html HTTP/1.1\r\n
Host:http://ww.baidu.com\r\n
User-agent:safri…\r\n
Connection:keep-alive\r\n
\r\n
Wd=123&k1=v1&k2=v2
10101010101010101010101010
一次响应：
响应报文：
响应行：HTTP/1.1 200 OK\r\n
响应头：
Content-Type:text/html;charset=utf-8\r\n
Content-Length:大小\r\n
…\r\n
\r\n
响应体：0101010101
Textarea–》Keditor
Meter–>扇形图 echarts
Time/date/color
Emal/number/tel:正则验证
组件库、第三方库
Form：表单
Form：表单
成对出现的标签
必写Action:(地址eg:login.jsp)
必写Method:（提交方式）
Enctype：(编码方式)
提交视频等大文本对象，form的enctype属性是multipart/form-data,method是post
Input标签:
Type:(类型)（type=”file时”，可以上传照片文件等）
必写Name:(服务器端接收的变量名，有实际含义，一般不随便取)
Target:（_blank/_self）
Value:(自定义显示的文字)，选项的时候会写value,
用户填写好数据时，不会写value
默认值的时候可以写value
Placeholder-html5的属性：提示
checked单选框，复选框默认选中属性
disabled禁用组件，不允许用户编辑，name就算取值，也不会传入后台
Readonly只读，name取值会传入后台
Maxlength可输入的最大字符数，适用于控件类型为text,password
Html新增的标签是语义标签，eg:nav导航，video视频,audio音频
Lable:实现关联聚焦
for中是要聚焦的id的值
下拉菜单：（默认显示第一个option,select中不写value时，默认显示option的value值）
<Select name=”n1”>
<Option value=”nn”>安娜</option>
(用户看到的是汉语，提交给后台的是value的值)
按住shift连选（在select中写入multiple表示可以多选），按住ctrl单选
Optgroup用于包含option的选项组，常包含在中
Textarea:多行文本框
rows
cols
Wrap(是否自动换行off/hard/soft)
注：form和table一起时，先写form
<Ifram src=”地址”》:内联框架
<Ifram frameborder=”0”当前是否显示内联框架的边框，scrolling=”0”滚动条无 hspace=”0”垂直空隙>
Progress:进度条
游标进度：
Output
