HTML基本标签
语义化优势:
裸奔好看 爬虫喜欢 方便维护
文本标题(h1-h6)
<h1>一级标签</h1>
…
<h6>六级标签</h6>
注:文本标题标签自带加粗,有自己的文本大小,并独占一行,有默认间距。h1权重最大,爬虫认为最重要的内容。
段落标签(p)
<p>段落文本内容</p >
标识一个段落(段落与段落之间有段间距)
换行(br)
<br/>
换行是一个空标记(强制换行)
水平线
<hr/>空标记
加粗有两个标记(推荐strong)
<b>加粗内容</b>
<strong>强调的内容</strong>突出的文字
倾斜有两个标记(推荐em)
<i>倾斜文本</i>
<em>强调文本</em>
删除线有两个标记(推荐del)
<s>文本</s>删除线
<del>文本</del>删除线
扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
标签前后值一样时,可以省略后面的值,直接写名字
hr-标签
hr可以用的属性值:
color 颜色
width 宽度
align 对其方式(left左 right右)
noshade 取消阴影 noshade=”noshade”
特殊符号
尖角号:
< 左尖角号 >右尖角号
空格:
该空格占据宽度受【字体】影响明显而强烈
  占据的高度正好是1个中文宽度,基本上不受字体影响
版权:
©
商标:
™
®
其他:
lorem随机生成子符
表情#128513
div和span标签
- div标签,没有具体含义,用来划分页面的区域,独占一行。
- span标签,没有实际意义,主要应用在对于文本修饰的时候,内容有多宽就占用多宽的空间距离。
vscode中快速创建 div*N
列表
列表分为三类:有序列表,无序列表,自定义列表
有序列表
ol里面只能放li,li里面可以随意放标签
列表前面数字是自动生成的
ol属性
更改排列数字 type属性 属性值1,a,A,i,I
start属性 从某个数字或字母开始数 取值只能是一个数字
无序列表
ul里面只能放li,li里面可以放其他标签
默认的是黑色实心圆
ul属性
type属性
属性值disc(默认值),circle,square,none
快速创建ul>li{内容}*N
自定义列表
多数用于图文混排时
dl
dt图片 dd文字
快速创建dl>dt{1111}+dd{1111}
图片标签的路径
- src图片路径
写法
- 1. code.gif 2. ./code.gif 3.绝对路径
- ./当前路径
- ../表示上一级
- ../../上一级的上一级 多级返回
绝对路径
绝对路径是指文件在硬盘上真正存在的路径。
例如“bg.jpg”这个图片是存放在硬盘的 E\book\网页布局代码第2章”目录下,那么“bgjpg”这个图片的绝对路径就是“E\book网页 布\代码\第2章\bg.jpg”。
注意:绝对路径在实际的开发过程中很少去使用,如果使用“Ebook\网页布代码 第2章\bg.jpg”来指定背景图片的位置,在自己的计算机上浏览可能会一切正常,但是上传 到Web服务器上浏览就很有可能不会显示图片了,绝对路径可以使用“”或“/”字符作为目录 的分隔字符
相对路径
相对路径就是相对于自己的目标文件位置。
当当前文件与目标文件在同一日录下,直接书写目标文件的文件名+扩展 <imgsrc=”pic4.gif”/>
图片标签的属性
<img src="图片路径" title="鼠标悬停上去之后提示的信息" alt="图片不显示(加载失败)后的提示信息" width="宽度" height="高度">
- alt图片加载失败提示文字
- title鼠标放上去描述
- alt图片不显示之后(加载失败的提示信息)
- width宽度 height高度 只设置一个自动等比例缩放 px单位
超链接标签
< img src=“图片路径”title=“鼠标悬停上去之后的提示信息”alt=“图片不
显示之后(加载失败)的提示信息“width=“宽度"height="高度"/>
href 路径 title鼠标放上去提示
- target属性:规定在何处打开文档。
- A.target=”_self”默认值 B.target=”_blank”新窗口打开
table表格
<table> <!-- 创建表格 -->
<tr> <!-- tr表示行 -->
<td>1</td> <!-- tr单元格 -->
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
- table创建表格
- tr表示行
- td表示单元格
- table里面只能放tr tr里面只能放td td里面可以放其他
快捷创建table>(tr>td*2)*2
table表格的相关属性
属性都加在table身上
- width 宽度单位支持px,百分百(相对于父元素的)
- height 高度 单位支持px,百分百(相对于父元素的)
- border 外边框
- bordercolor 外边框颜色
- bgcolor背景颜色
- 水平对齐 align=”left左边 right右边 center中间”
- cellspacing单元格与单元格的间距
- cellpadding单元格与内容的空隙
快捷创建table>tr*2>td*2
tr 的属性
高度height
背景颜色bgcolor
文字水平对齐 align=”left”或right或center
文字垂直对齐 valign=”top或middle或bottom”
- 只能设置高度不能设置宽度
- align控制的是文本对其方式
- valign文字垂直对齐 top顶上 middle默认中间 bottom底下
单元格td的属性
宽度 width
高度 hight
背景颜色 bgcolor
文字水平对齐 align=”left”或right或center
文字垂直对齐 valign=”top或middle或bottom”
- 如果一个单元格的设置宽度,影响的是这一整列的宽度
- 如果一个单元格的设置高度,影响的是这一整行的高度
- 背景颜色只设置一个单元格的颜色
表格合并
colspan=”1″列数
rowspan=”1″行数
表单标签
- input输入
- test普通文本
- password密码
- form标签上的submit属性 提交信息,提交信息到action指定的地址
- name 传递名称给后端
- value登陆
- input 等于button
- placeholder 输入文字的提示
- outline选中提示边框 可以通过none取消
- type=button双标签 效果相同
- reset 重置(清空)
js输入类型为Number数值类型
method属性
Form当中method的post和get的区别?
- get是从服务器上获取数据,post是向服务器传送数据
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段——对应,在URL中可以看到。post 是通过HTTPpost机制,将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址。用户看不 到这个过程。
- 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
- get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,ⅡS4(Internet InformationService互联网信息服务)中最大量为80KB,IIS5中为100KB
- get安全性非常低,post安全性较高。但是执行效率却比post方法和。
method分为post和get
默认不写method属性就是get值