html常用标签

标题标签

h1到h6级别逐渐减小

书写规范,一个页面只允许出现一个h1(一级标题标签),若重复出现网页会分不清主次内容,就像一篇作文只能有一个作文题目一样。

段落标签

p为文本段落标签,可存放大段落文字

换行标签

<br>与</br>没有区别

<hr>为分隔符标签

div盒子标签

一般划分一个个区域,构建骨架思路会用到。用于存放:文字、图片、内容等

<div>用来布局</div>

强调标签

em和strong标签都表示强调,但是它们还是有一定的差别的

em标签的样式是斜体,而strong标签的样式是加粗

em标签是强调语义的,而strong标签是强调内容的

span文字包裹标签

包裹文字的标签。

p标签和span标签的区别是:p标签会自动换行,而span标签不会自动换行。一般短的语句可以用span标签包裹,长点的用p标签包裹。

引用标签

 q标签和blockquote标签都是引用,不同的是q标签是短引,用而blockquote标签是长引用会换行的

hgroup标签

主要作用是用来为标题分组,可以将一组相关的标题放到hgroup里面。

<hgroup>

<h1> </h1>

<h2>  </h2>

</hgroup>

del删除标签

原价 <del>19999</del>

现价 999

center标签

center标签的作用就是居中,把文字图片等全部居中到页面中间,这可以让页面更美观

格式化标签

加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签

超链接标签

超链接使用a标签,语法如下:

<a href="链接地址"  target="目标窗口的打开方式">

target属性值说明
_self默认方式,即在当前窗口打开链接
_blank在一个全新的空白窗口中打开链接
_top在顶层框架中打开链接
_parent在当前框架的上一层里打开链接

列表标签

ol有序列表
ul无序列表
dl自定义列表

表格标签

  table 标签 : 表示整个表格 。  table 包含 tr ,  tr 包含 td 或者 th.
    tr: 表示表格的⼀⾏
    td: 表示⼀个单元格
    th: 表示表头单元格. 会居中加粗
    thead: 表格的头部区域(注意和 th 区分, 范围是⽐ th 要⼤的)
    tbody: 表格得到主体区域.

以下属性要放到table标签中

 align:  是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
    border: 表示边框. 1 表示有边框(数字越⼤, 边框越粗), "" 表示没边框.
    cellpadding: 内容距离边框的距离, 默认 1 像素
    cellspacing: 单元格之间的距离. 默认为 2 像素
    width / height: 设置尺⼨.

音频标签(audio)

autoplay音频在就绪后马上播放
controls向用户显示控件,比如播放按钮
loop当音频播放结束时重新播放
src要播放的音频的URL

表单标签

form 表单 一般情况下,其他表单相关元素都是它的后代元素

input 单行文本输入框、单选框、复选框、按钮等元素

textarea 多行文本框

select、option 下拉选择框

button 按钮

label 表单元素的标题

fieldset 表单元素组

legend fieldset 的标题

 header   网页的头部

 main     网页的主体部分(一般只有一个)

 footer   网页的底部

 nav      网页的导航

 aside    和主题相关的内容

 article  文章之类的

 section  独立的块区,上面的标签都不合适,就用这个

 div      块元素

input常用属性

text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

button:按钮

reset:重置

submit:提交表单数据给服务器

hidden:隐藏域

maxlength:允许输入的最大字数

placeholder:占位文字

readonly:只读

disabled:禁用

checked:默认被选中 (只有当 type 为 radio 或 checkbox 时可用)

autofocus:当页面加载时,自动聚焦

name:名字 (在提交数据给服务器时,可用于区分数据类型)

value:取值

label用法

label 元素一般跟 input 配合使用,用来表示 input 的标题

label 可以跟某个 input 绑定,点击 label 就可以激活对应的 input

label 元素的 for 属性与相应 <input> 元素的 id 属性进行了关联。这样,当用户点击标签文本时,文本框将自动获得焦点。

selec和option

option 是 selec t的子元素,一个 option 代表一个选项

select用于创建下拉选择框,而 option用于定义下拉选择框中的选项。

select常用属性

size:显示多少项

multiple:可以多选

option常用属性

selected:默认被选中

常用的图片标签

一般使用img标签来引入图片,img标签有四个属性

1.src属性     引入图片路径   通过./或者../开头

        ./   若引用的图片在同一个目录下

        ../  若引用图片不在同一个目录(../到上一级目录,可叠加../../)

2.alt属性     对图片的描述,对图片引用不成功的时候显示文字

        也会帮助浏览器做一些收录功能

3. width属性   设置图片的宽度

        属性值里直接写数值或者带单位

4.height属性  设置图片的高度

        属性值里直接写数值或者带单位

注意:一般情况 width和height只设置一个,另一个让浏览器按比例缩放。


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值