HTML5 基本标签
HTML5
1.概念:是最基础的网页开发语言
-
Hyper Text Markup Language 超文本标记语言
- 超文本:
- 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
- 标记语言:
- 由标签构成的语言。<标签名称> 如 html,xml
- 标记语言不是编程语言
- 超文本:
2.快速入门
-
语法要求:
-
html文档后缀名 .html 或者 .htm
-
标签分类
- 标签种类:
- 双标签:有开始标签和结束标签。如<html> </html>
- 自闭和标签:开始标签和结束标签在一起。如<br/>
- 标签之间的关系:
- 嵌套关系、并列关系
- 标签种类:
-
标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
-
在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
<img src="../images/icon.png"/>
-
html的标签不区分大小写,但是建议使用小写。
-
3.HTML5基本结构
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
网页正文
</body>
</html>
<!DOCTYPE html>
声明文档类型为 html5文档
<meta charset="utf-8">
规定整个网页的编码格式是“UTF-8”
lang="en"
用来定义当前文档显示的语言。
en定义语言为英语 zh-CN定义语言为中文
其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文;这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。
4.基础标签(一)
4.1基础标签
基础标签 | 代码 |
---|---|
标题标签: | <h1></h1>...<h6></h6> |
段落标签: | <p></p> |
换行标签: | <br/> |
水平线标签: | <hr/> |
文字加粗: | <strong></strong>或<B></B> |
倾斜: | <em></em>或<I></I> |
无语义标签: | <div></div> 大盒子 ,占一行<span></span> 小盒子,可以一行放多个 |
4.2HTML5的结构元素
语义化标签代码 | 语义 |
---|---|
<header></header> | 标题头部区域的内容(用于页面或页面中的一块区域) |
<footer></footer> | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
<section></section> | Web页面中的一块独立区域 |
<article></article> | 独立的文章内容 |
<aside></aside> | 相关内容或应用(常用于侧边栏) |
<nav></nav> | 导航类辅助内容 |
4.3<iframe> 内联框架
- 内联框架属性(实现页面间的相互跳转)
- 在被打开的框架上加name属性
- 在超链接上设置target目标窗口属性为希望显示的框架窗口名
<iframe src="path" name="mainFrame" ></iframe>
<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>
src="path"
引用页面地址 name="mainFrame"
框架标识名
5.特殊符号
空格 | |
---|---|
大于号(>) | > |
小于号(<) | < |
引号(") | " |
版权符号@ | © |
6.基础标签(二)
6.1 图像标签
<img src="路径" alt="替换文字" title="鼠标悬停提示文字" width="宽度" height="高度"/>
-
图像路径:
一) 相对路径
① 图像位于网页的同一级 直接写图像全名 <img src="image.png"/> ② 图像位于网页的上一级 ../+图像全名 <img src="../image.png"/> ③图像位于网页的下一级 文件名+图像全名 <img src="images/image.png"/> ` ../ 表示路径返回上一级 ` `/ 表示路径分隔符 `
二) 绝对路径(一般不用)
带盘符<img src="d:/xxx/image.png"/>
6.2 超级链接
<a href="路径" target="_self或者_blank">显示的文字</a>
target 超链接的打开方式:
_self 当前网页
_blank 空白网页
- 常见的超链接应用
文字链接
<a href="路径">文字链接</a>
图像链接
<a href="路径"><img src="路径"/></a>
锚链接
①命名锚记
<a name="mark"></a>
②添加锚链接
<a href="#mark">点击跳转</a>
邮箱链接
<a href="mailto:1748821593@qq.com">点击发送邮件</a>
空链接
<a href="#">点击不跳转</a>
6.3 列表
①无序列表–自带实心圆符号
<ul>
<li></li>
<li></li>
<li></li>
</ul>
在 <ul></ul>
上加 type 属性:
`<ul type="circle、disc、square"></ul>` ( circle: 空心圆 disc : 实心圆 square:实心方框)
②有序列表–自带数字符号
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ol type="1、A、a、I、i"></ol>
(数字、大写字母、小写字母、大写罗马字、小写罗马字)
③自定义列表
<dl>
<dt>标题1</dt>
<dd>解释标题1</dd>
<dd>解释标题1</dd>
<dt>标题2</dt>
<dd>解释标题2</dd>
<dd>解释标题2</dd>
</dl>
6.4 表格–多用于显示数据
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table 标签
:声明表格 tr标签
:声明行 th标签
:表头单元格(加粗居中) td标签
:普通单元格
属性 | 属性代码 |
---|---|
表格的属性:<table 这里加属性 ></table> | 宽度:width="" 填充:cellpadding="" 间距:cellspacing="" 水平对齐:align="left、center、right" 左,中,右边框:border="" |
单元格的属性:<tr 这里加属性管一行></tr> <td 这里加管一个单元格></td> | 宽: width="" 高: height="" 水平对齐:align="left、center、right" 左,中,右垂直对齐:valign="top、middle、bottom" 顶,中,底背景颜色:bgcolor="" |
合并单元格: | 跨列合并 colspan="数值:代表合并的单元格个数" 跨行合并 rowspan="数值:代表合并的单元格个数" 注意:合并完之后删除多余的单元格标签 |
6.5 表单–用户向后台服务器提交数据用的
<form action="提交到的位置(空着)" method="post/get">
用户名:<input type="text" name="user" value="">
密 码:<input type="password" name="pwd" value="">
<input type="submit" value="提交">
</form>
method:提交方式
post比get更安全
type:类型
text:文本
password:密码框
submit:提交
name:标签名(必须写)
value: 用户输入值(必须写)
单选按钮:
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
radio:按钮
checked: 被选中
复选框:
<input type="checkbox" name="love" value="0">编程
<input type="checkbox" name="love" value="1" checked>设计
checkbox 复选框
注意:单选按钮和复选框的 name 值必须一样。
下拉列表:
<select name="year">
<option value="2000">2000</option>
<option value="2001" selected>2001</option>
<option value="2002">2002</option>
</select>
select: 选择
option :列表项
selected:被选中
四大按钮:
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
<input type="image" src="路径" >
submit:提交
reset:重置
button:按钮
image:图像
多行文本域:
<textarea name="info" cols="30" rows="10">请输入个人简介</textarea>
cols:列
rows:行
文件域:
<input type="file" name="" >
file:文件
注意:在 form 标签添加属性(enctype=“multipart/form-data”)表单编码属性
隐藏域:
<input type="hidden" name="h" value="">
hidden:隐藏
只读属性: readonly=“readonly”
禁用属性: disabled=“disabled”
表单元素的标注:
①label for id 组合 ;要保证 for 的值 与 id 的值相同
<label for="manId">男</label>
<input type="radio" name="man" id="manId"/>
②label 括起来
<label>
<input type="radio" name="man" id="manId"/>男
</label>
表单初级检验:
提示信息:<input type="text" name="sousuo" placeholder="请输入要搜索的关键字"/>
必须输入:<input type="text" name="user" required/>
正则表达式:<input type="text" name="tel" required pattern="^1[358]\d{9}" />
placeholer:输入提示信息
required:必须输入
pattern:正则表达式 表达式参考网络资源。
H5新增:
邮箱:<input type="email" name="email"/>
type="email" 邮箱
type="url" 网址
type="number" 数字
type="range" 滑块
type="search" 搜索
6.6多媒体元素
视频元素 video
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
视频格式\浏览器 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
controls 提供播放、暂停和音量的控件
autoplay 自动播放属性
音频元素 audio
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
音频格式\浏览器 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | 不支持 | 3.5+ | 10.5+ | 3.0+ | 不支持 |
MP3 | 9.0+ | 不支持 | 不支持 | 3.0+ | 3.0+ |
WAV | 不支持 | 4.0+ | 10.6+ | 不支持 | 3.0+ |
7.很溜的操作
sublime 快捷键:
Alt+shift + 数字(1、2、3、4、5、8、9):分屏
Tab: 缩进
shift+Tab: 反缩进
ctrl+/: 添加注释
ctrl+shift+/: 取消注释
alt+. : 快速补全
ctrl+alt+ ↑/ctrl+alt+↓:向上/向下选中多行
ctrl+鼠标左键:选中多行
ctrl+H:替换
Emmet(艾米特)插件:
各大编辑器都集成了的代码简写插件。(tab激活)
1:html初始结构 举例:!=> Tab
2:id(#),class(.)
3.子节点(>),兄弟节点(+),上级节点(^)
4:重复(*)
5:分组(())
6:属性( [属性=”属性值”]) "[]"包含除id、class的其他属性
7:编号($)
一个$ 代表一位数,$$就是两位数了,以此类推就可以形成$(1),$$(01),$$$(001)
从几开始递增(@) $@n :如果想自定义从几开始递增的话就利用:$@+数字*数字
要生成递减的:@- $@-
逆序生成到某个数:@- $@-n*m
8:文本({})
9.隐式标签
这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。
.test <div class="test"></div>
CSS:
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;
编写不易转载需注明出处: https://editor.csdn.net/md?not_checkout=1&articleId=121659171