常用HTML标签与特性

HTML 标签

文本标签

• 加粗标签

  <b>这里的文字会加粗显示</b>
  <strong>这里的文字会加粗显示</strong>
  总结：两个标签肉眼看到的是一样的
  语义化：1.不用css也能使元素展示响应的效果。2.有利于SEO

• 斜体标签

  <i></i>
  <em></em>

• 下划线标签

  <u><u>
  <ins></ins>

• 中划线标签

  <del></del>
  <s></s>

标题标签

h1 ~ h6 从大到小

<h1 align="left(默认值)/center/right"></h1>

语法：双标签

1. h1标签在一个网页里有且仅有一个
2. h4以下的标签，尽量不用

段落标签

<p></p>
<p align="left(默认值)/center/right"></p>

• 特点 独占一行
• 显示不下自动换行
• 宽度继承父元素宽度，自带外边距

图片标签

<img src="需要展示的图片的路径(URL)">

属性：

• src ：跟的是图片的URL
• title: 设置鼠标放在图片上显示的文字内容
• alt：图片加载失败后显示的文字
• width：设置图片宽度 ，默认单位是 px，也可以设置%，相对于父元素
• height： 设置图片的高度，默认单位是px

注意：图片的宽度高度，设置一个即可，会自动等比缩放

路径:URL,资源统一定为器

• 相对路径(必须会)

  ./ 代表当前目录
• …/ 返回上一级
• 同级，直接用，父级，先退出，子级，先进入

绝对路径

就是从你当前文件向上找到最根的目录

属性

语法：属性名=“属性值”

如果有多个属性，以空格分开

html标签都有的属性

• id 代表标签的唯一性，每个标签的id属性值不可以一样
• class
• style
• title，鼠标放上去所显示的文字

超链接

<a href="外部网址或内部页面的路径"></a>
<a href="#">可以回到页面顶部</a>

属性：

• href : 链接的地址

• target:

  <a target="_self">在当前页面打开对应页面（默认的）</a>
  <a target="_blank">新建一个标签页打开相应页面</a>

特点

• 自带下划线
• 默认蓝色，点击之后变成紫色

####锚点的使用

<a href="#m1">锚点一</a>
<a href="#m2">锚点二</a>

<h1 id="m1">锚点一的内容</h1>
<h1 id="m2">锚点二的内容</h1>

块级元素和行内元素和行内块

• 块级元素

  特点：

  独占一行
  1. 可以设置宽和高，默认宽度为父元素宽度，默认高度为内容所占高度
  2. 两个块级元素默认纵向排列
  3. 可以设置margin和padding

  常见的块级元素：p，h1~h6，div

• 行内元素

特点：

1. 默认水平排列，可以在一行显示

2. 不可以设置宽高，宽高由行内元素的内容决定

3. 可以设置margin和padding的左右边距，上下不可以

   常见的行内的元素：b,i,u,s,strong,ins,del,em,a，span

• 行内块

  既有行内元素的特点(可以一行显示),又有块级元素的特点(设置宽高)

  常见的行内块: img

常见的区域划分元素

• div 块级划分标签
• span 行级划分标签

表格标签

1. 表格的概述

   表格就是由若干个单元格有次序的组成了行和列，最终形成了表格

2. 表格的用途

   用于布局(过时)
   • 批量展示数据，清晰明了

3. 标签(常用)

   table 整个表格
   • tr 每一个tr代表一行
   • td 每一个td代表一行里的一列，或单元格

   练习： 做一个4行5列的表格

4. 属性 属性名=“属性值”

   4.1 table

   border: 设置表格的边框，取值是数字
   • width：宽，数字，默认单位是px， 100%
   • height：高
   • align：设置表格的水平对齐方式，left/center/right
   • cellspacing: 设置表格内单元格的间距 取值：0
   • cellpadding: 设置表格单元格的内边距， 数字
   • bgcolor

   4.2 tr

   • height: 设置一行的高度
   • align： 设置一行内的单元格水平对齐方式
   • valign: 设置一行内垂直对齐方式 top/middle/bottom
   • bgcolor

   4.3 td

   • width: 宽度
   • align：设置一列水平对齐方式
   • valign：垂直对齐方式
   • bgcolor：背景色
   • rowspan：跨行，取值为数字1,2,3
   • colspan: 跨列，取值为数字

   练习：4行5列表格的基础上，边框设为1，单元格间距取消，宽度500，高度300，第一行文本水平垂直都居中，颜色pink，第二行水平居左，垂直居上，yellowgreen

5. 可选标签

   5.1 设置表格的标题，注意：想用可以，但是必须放在table标签下第一个子元素，特点：自动居中

   5.2 ,可以完全替代td，th在大部分浏览器下默认加粗居中

6. 表格的复杂应用

   6.1 ,一般将第一行表头放到thead内统一管理

   6.2 ,一般将表格的主体部分放到tbody内统一管理

   6.3 ,一般将表格的表尾放到tfoot内管理

列表标签

1. 列表的作用

   从上到下显示数据，可以在数据前增加标识

2. 列表的分类

   2.1 有序列表

   <ol>order list
   <li></li>  list item
   </ol>

   特点：在每一项前会增加有序的标识

   属性：

   type：指定有序列表标识的类型，默认是1，a,A,i(小写的罗马数字),I(大写的罗马数字)
   • start: 指定开始标识，取值必须是数字

   2.2 无序列表

   <ul>  unorder list
   <li></li>
   </ul>

   属性

   • type： 指定列表项前面的标识，circle，square, none

   2.3 自定义列表

   <dl>
   <dt></dt>
   <dd></dd>
   </dl>

   使用场景：图文结合，网站底部链接

表单（重点，难点）

1. 表单的作用

   1.1 提供了供用户操作的可视化控件

   1.2 跟服务器交互

2. 表单的语法标签

   <form></form>

   属性：

   action: 提交表单时用户的行为，值为需要被提交到的服务器的地址
   method: 指定数据提交的方式

   get
   1.明文提交，待提交的数据会在地址栏中显示出来
   2.不安全
   3.有大小限制，2kb
   • post
     1 隐式提交，提交的数据不会显示
     2 安全性较高
     3 没有大小限制
   • put
   • delete

3. 表单的控件

   能够让客户操作的控件

   3.1 分类

   input 元素
   • textarea 元素
   • select和option元素

   input元素（单标签）

   属性：

   • name: 只要用了form表单，而且这个值你想发送给服务器，则必须添加name属性，因为后端就是靠name来获取你传过来的值，另外一个作用，可以为单选和复选分组

   • value: 指定input元素内的值，给js使用或给服务器用

   • disabled: 禁用控件，无值属性，只要这个词出现在input上，就禁用了，不能操作也不能提交

   • type： 指定input表单元素的类型

     输入框

     type=“text” 文本输入框

     type=“password” 密码输入框

     type=“number” 数字输入框

     属性：

     placeholder： 占位符，默认显示在输入框中的文字

     maxlength: 规定了输入框内最大可以输入的字符数量，取值数字

     readonly: 只读，不能改，但是可以提交给服务器，无值属性

   • 按钮

     type=“submit” 提交按钮，特点：提交表单，缺点：自动刷新页面

     type=“reset” 重置按钮，特点：清空表单内input框内的值

     type=“button” 普通按钮，无特点

     属性value，设置按钮的文字

   • 单选框和复选框

     type=“radio” 单选框

     type=“checkbox” 复选框

     属性：

     name：给单选框或多选框分组，跟服务器进行交互

     checked: 设置默认被选中的复选框或单选框，无值属性

     disabled

   • 文件

     type=“file”

   ?username=admin

textarea元素

提供给用户可以输入多行文字的控件

<textarea></textarea>

属性：

• name: 跟服务器交互
• readonly： 只读
• cols： 指定一行可以出现的最大的字符数，指的是英文状态，如果中文，自动减半
• rows: 指定区域内可以出现的行数，但是如果超过了行数，会出现滚动条（滚动条也占了一列）

选项框

语法

<select>  定义一个选项框
<option></option>  每一个选项
</select>

属性

option:

• value
• selected: 无值属性，设置哪个option默认被选中

select:

• size: 取值数字，设定用户可以直观看到的条数，如果选项数量超过了size的值，会出现滚动条,size默认是1
• name
• multiple: 可以设置多选，无值属性，前提是size>1

email=zx_0721%40163.com&upwd=123&sex=男&aihao=新闻&aihao=旅游&code=123456

email=zx_0721%40163.com&upwd=&sex=男&aihao=新闻&aihao=旅游&code=123456

• 点赞 1
• 收藏
• 分享
• 文章举报

言-棠 发布了12 篇原创文章 · 获赞 10 · 访问量 561 私信 关注