第一节 html5 常见标记

打开终端窗口快捷键 shift+鼠标右键

一、HTML5 头标签

//< !DOCTYPE HTML>

分割线 : < hr/> 网址: < a href = “网址” title = “名称”>123

添加注释 < !-- -->

格式都是 <> < / 什么>

快捷添加格式:!按tab

标题标签 :H1到H6

下划线标签:u

加粗标签:b 强调加粗:strong 强调的意思是告诉搜索引擎这是个重点

斜体标签:i 强调斜体:em

换行标签 : < br/>

引用标签:cite

下标:sub 上标:sup 用于数学公式或者化学元素什么

删除线:del

换段:p 段落标签

二、列表标签

无序列表:ul 可以用type属性更改实心空心

有序列表:ol 可以用type属性更改序号

列表项:li

在这里插入图片描述

自定义列表:dl

自定义列表头:dt

自定义列表内容:dd

组合块级元素:div

包含文本:span 用于包含文本 没有任何实际作用 可以自由发挥

快捷键: 比如ul里面有4个li ul>li*4 按tab

三、图像标签

1.插入图片标签 :< img />

2.img包含属性:

图片名及url地址:src 当前路径是 ./ 也可以是绝对路径 也可以引入网页图片,在网页中右键点击在新标签中打开这张图片,复制图片地址到src

图片加载失败时的提示信息: alt

文字提示属性:title 鼠标放置时的提示

图片宽度:width

图片高度:height

高度和宽度默认只需要输入一个就可以了 另一个会按比例自动调节

边框线粗细:border

四、超链接标签

1.格式: < a href = “连接地址” > 文字 < /a >

2.标签属性:

a.跳转地址: href 必须有 必须要加http://

b.链接打开方式:target

_blank :新窗口中打开

_prent:父窗口中打开

_self:本窗口中打开 默认

_top:顶级窗口

framename:窗口名

title:文字提示属性 (详情)

3.锚点链接:

定义一个锚点:< a id = “a1” > < /a> 以前是:< a name = “a1” > < /a>

使用锚点: < a href = “#a1” > 跳转到a1处< /a>

五、表格标签

定义表格:table 属性:border:表格线 , width:宽度, cellspacing:每个单元格之间的缝隙 ,cellpadding:字与单元格上下左右距离

定义表格标题:caption 属性:align排序方式

定义表格的行:tr 属性:align、valign、bgcolor tr里面包含th或td

定义表格表头(里面文字居中加粗):th 属性:align(位置左中右)、valign(位置上中下)、bgcolor rowspan(跨行合并 上到下 把下删除 在上中添加 值是合并几行) colspan(跨行合并 左到右 右删除 左中添加 值是合并几行) width height

定义表格的单元格(内容数据):td 属性:align、valign、bgcolor rowspan colspan width height

定义表格的页眉:thead 属性:align、valign

定义表格的主体:tbody 属性:align、valign

定义表格的页脚:tfoot 属性:align、valign

六、表单标签

(一)1.表单标签:form

2.常用属性:

*action:提交的目标地址

*method:提交方式 get(默认):url地址栏可见,长度受限制,相对不安全

​ post :url地址栏不可见,长度不受限制,相对安全

enctype:提交类型

target:在何处打开目标 URL

name:属性为表单起个名字,在html5中用id代替

3.表单项:input

名字在input前边直接写 比如 姓名 : < input > < /input>

4.input属性:

a.type:表示表单项类型 值如下:

​ text:单行文本框 可以设默认 name

​ password:密码输入框

​ checkbox:多选框 注意要value值 是赋给name属性的不能重复 默认选择checked

​ radio:单选框 要value值 name名必须一致 默认选择checked

​ file:文件上传选择框

​ button:普通按钮

​ submit:提交按钮

​ image:图片提交按钮

​ reset:重置按钮,还原到开始第一次打开时的效果

​ hidden:主表单隐藏域,要是和表单一块提交信息,但是不需要用户修改

​ 以下是html5里面包括的

​ emil:用于应该包含e-mail地址的输入域

​ url:用于应该包含URL地址的输入域

​ number:用于应该包含数值的输入域 max规定允许最大值 min最小值 step规定合法数字间隔如

​ 果step=“3”,则合法数字为-3 0 3 6等 value规定默认值

​ range:用于应该包含一定范围内数字值的输入域,显示为滑动条 max规定允许最大值 min最小值

​ step规定合法数字间隔 value规定默认值

​ Date pickers:日期选择器 date选取日月年 month选取月年 week选取周 年 time选取时间(小时

​ 和分钟) datetime选取时间、日、月、年(UTC时间) datetime-local选取时间、日、月、年(本

​ 地时间)

​ color:选择颜色

​ search:用于搜索域,比如站点搜索域Google搜索

b. name:表单项名,用于存储内容值

c. value:输入的值(默认指定值)

d.placeholder:预期值的简短的提示信息(输入框内的提示语)

e.size:输入框的宽度值

f.maxlength:输入框的输入内容的最大长度

g.readonly:对输入框只读属性

h.disabled:禁用属性

i.checked:对选择框指定默认选项

j.accesskey:指定快捷键

k.tabindex:通过数字指定tab键的切换顺序

l. src和alt:为图片按钮设置的

只读和禁用的区别是:只读会跟着服务器提交 而禁用就是废掉了不会提交

(二)标签创建下拉列表 :select

1.属性

name:定义名称,用于存储下拉值得

size:定义菜单中可见项目的数目,html5不支持

disabled:当该属性为true时,会禁用该菜单

multiple:多选

2.optgroup:组可以在option上面一层写

属性:

label:组名

3.下拉选择标签:option 用于嵌入到 select中使用

属性:

value:下拉项的值

selected:默认下拉指定项

(三)多行文本输入域 textarea

1.属性:

name:定义名称,用于存储文本区域中的值

cols:规定文本区内可见的列数

rows:规定文本区内可见的行数

disabled:是否禁用

(五)圈框:fieldset

格式:

在这里插入图片描述

七、框架标签 iframe

在一个页面中套入一个子窗口

1.属性:

src:规定在iframe中显示的URL

name:规定iframe名称

height:规定高度

width:规定宽度

frameborder:规定是否显示边框

2.创建导航子窗口:

在这里插入图片描述

八、html5新增布局标签 和div性质一样

header:定义文档的页眉标签

nav:定义导航连接部分

footer:定义文档或者节的页脚/底部

article:定义文章

section:定义文档中的节(段落)

aside:定义其所处内容之外的内容/侧边

datalist:定义选项列表,与input配合使用该标签,两者通过id关联

fieldset:可将表单内的相关元素打包/分组,与legend搭配使用

九、heml5多媒体标签

1.音频标签:audio

可以直接在音频标签中加src 也可以在标签中加< source/ src=“” type=“audio/mpeg” >添加 这种添加方法要定义属性

属性:

src:添加音频

autoplay:音频就绪后马上播放

controls:像用户显示空间,播放按钮 必须有

loop:当音频结束时重新开始播放

preload:音频在页面加载时进行加载,并预备播放 与autoplay重复

2.视频标签:video

与音频标签基本一致 但是要添加高度和宽度

< source/ src=“” type=“video/mp4” >

属性:

包含音频所有属性

height:播放器高度

width:宽度

muted:规定视频的音频输出是被静音

c=“” type=“audio/mpeg” >添加 这种添加方法要定义属性

属性:

src:添加音频

autoplay:音频就绪后马上播放

controls:像用户显示空间,播放按钮 必须有

loop:当音频结束时重新开始播放

preload:音频在页面加载时进行加载,并预备播放 与autoplay重复

2.视频标签:video

与音频标签基本一致 但是要添加高度和宽度

< source/ src=“” type=“video/mp4” >

属性:

包含音频所有属性

height:播放器高度

width:宽度

muted:规定视频的音频输出是被静音

poster:规定视频下载时用户看到显示的图像

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值