HTML的标签

 

屏幕截图 2022-09-17 175658

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”

特殊符号

微信图片_20220916190450

尖角号:

&lt; 左尖角号 &gt;右尖角号

空格:

&nbsp; 该空格占据宽度受【字体】影响明显而强烈
&emsp; 占据的高度正好是1个中文宽度,基本上不受字体影响

版权:

&copy;

商标:

&trade;
&reg;

其他:

‌lorem随机生成子符
‌表情#128513

div和span标签

  • ‌div标签,没有具体含义,用来划分页面的区域,独占一行。
  • ‌span标签,没有实际意义,主要应用在对于文本修饰的时候,内容有多宽就占用多宽的空间距离。

vscode中快速创建 div*N

列表

列表分为三类:有序列表,无序列表,自定义列表

微信图片_20220916191233

有序列表

‌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″行数

微信图片_20220916193708

微信图片_20220916193712

表单标签

微信图片_20220916193907

  • input输入
  • ‌test普通文本
  • ‌password密码
  • ‌form标签上的submit属性 提交信息,提交信息到action指定的地址
  • ‌name 传递名称给后端
  • ‌value登陆
  • ‌input 等于button
  • ‌placeholder 输入文字的提示
  • ‌outline选中提示边框 可以通过none取消
  • ‌type=button双标签 效果相同
  • ‌reset 重置(清空)

js输入类型为Number数值类型

method属性

Form当中method的post和get的区别?

  1. get是从服务器上获取数据,post是向服务器传送数据
  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段——对应,在URL中可以看到。post 是通过HTTPpost机制,将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址。用户看不 到这个过程。
  3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,ⅡS4(Internet InformationService互联网信息服务)中最大量为80KB,IIS5中为100KB
  5. get安全性非常低,post安全性较高。但是执行效率却比post方法和。
    ‌method分为post和get
    ‌默认不写method属性就是get值
© 版权声明
THE END
文章不错?点个赞呗~
神马?你要分享给你的好朋友?太感谢你啦~
分享