HTML5标签+基础特性
Django~溪风
帮助1人
一、HTML5特性之：空白折叠现象；
1、文字和文字之间的多个空格、换行会被折叠成一个空格；
2、标签 内壁 和 文字之间的空格会被忽略
1/1
2/2黑线所演示的空格单位并未出现在浏览器中
此为空白折叠现象
二、HTML之转义符
<p>空格: </p>
<p>小于号:<</p>
<p>大于号：></p>
<p>&符号：&</p>
<p>双引号："</p>
<p>版权符号：©</p>
<p>注册商标：®</p>
<h2>使用场景：如何在网页中显示源代码，验证</h2>
显示p标签：<p> </p>
div容器标签— >> 分隔内容，将模块隔离开，会结合css使用，实现网页的布局，像一个容器，什么都能容纳
无序列表
<!-- 无序列表使用场景，
<!-- 1、导航栏，大大小小能看到的导航栏里基本上 都会使用ul---li--->标签布局 -->
<!-- 2、各种页面list列表 3、基本常见网站导航，列表页都会使用ul li无序列表标签 --> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>无序列表ul标签</title>
</head>
<body>
<h1>无序列表--ul li</h1>
<p>
无序列表是一个父子组合标签，上阵父子兵，不能单独出现,可以嵌套，
但是ul的子标签只能是li，而li标签中是可以放任何标签,li标签不能单独使用
</p>
<p><ul> <li> </li> </ul></p>
<ul>
-->父标签
<li>--子标签</li>
</ul>
<ul>
<li>HTML/html5</li>
<li>css/css3</li>
<li>javascript/es6~es13</li>
<li>web app</li>
</ul>
</body>
</html>
无序列表中的type属性已经废除，可以使用css样式代替
有序列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>有序列表ol标签</title>
</head>
<body>
<h1>有序列表ol标签</h1>
<p>ol的特性与ul li 同理</p>
<ol type="A">
<li>html/html5</li>
<li>css/css3</li>
<li>javascript</li>
<li>python</li>
<li>c</li>
<li>c </li>
</ol>
</body>
</html>
有序列表中的type属性可以是A a 1
<p>有序列表ol标签的 start属性</p>
<p>start属性值必须是一个整数，制定了列表编号的起始值</p>
<ol type="a" start="4">
<li>html/html5</li>
<li>css/css3</li>
<li>javascript</li>
<li>python</li>
<li>c</li>
<li>c </li>
</ol>
<h2>有序列表ol标签的reversed属性</h2>
<p>
reversed属性指定列表中的条目是否是倒序排列，reversed没有属性值，只需要写上单词即可
</p>
HTML5新增属性reversed
<ol type="1" start="4" reversed>
<li>html/html5</li>
<li>css/css3</li>
<li>javascript</li>
<li>python</li>
<li>c</li>
<li>c </li>
</ol>
有序列表使用场景需要排序或者序号等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>定义列表 dl dt dd</h1>
<p>需要逐条给出定义描述的列表，就是定义列表</p>
<!-- dt和dd是并排关系，兄弟关系，同级关系 并排出现在dl中-->
dd标签是对dt标签的解释说明
<dl>
<dt>选购指南</dt>
<dd>手机</dd>
<dd>电脑</dd>
<dd>笔记本</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>关于我们</dd>
</dl>
</body>
</html>
定义列表：使用场景如下图所示
特殊链接：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊链接</title>
</head>
<body>
邮件链接，下载连接，电话链接 3小时14分钟
<!-- mailto:前缀链接 即邮箱连接 -->
<!-- tel:前缀链接，即电话链接 -->
<a href="mailto:229999999999@qq.com">2</a>
</body>
</html>
锚点链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>锚点链接</title>
</head>
<body>
<!-- html5默认内置了 #top 无需定义id。点击即可回到顶部 -->
<h1>页面锚点链接</h1>
<p>
<a href="#sj">小米手机</a>
<a href="#cd">智能穿戴</a>
<a href="#jd">家电</a>
<a href="#cx">出行搭配</a>
<a href="">日用百货</a>
<a href="">出行搭配</a>
<a href="">电脑配件</a>
<a href="">零食百货</a>
</p>
<h2 id="sj">小米手机</h2>
<img src="/2000352.jpg" alt="" />
<h2 id="cd">智能穿戴</h2>
<img src="/2022854.jpg" alt="" />
<h2 id="jd">家电</h2>
<img src="/2038307.jpg" alt="" />
<h2 id="cx">出行搭配</h2>
<img src="./2045308.jpg" alt="" />
<h2 id="dp">电脑配件</h2>
<img src="/2046180.jpg" alt="" />
<h2 id="lb">零食百货</h2>
<img src="/310751.jpg" alt="" />
<a href="#top">回到顶部</a>
</body>
</html>
音视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>音频文件此类标签很重要</title>
</head>
<body>
<audio src="" autoplay loop></audio>
<!-- audio属性值：
autoplay自动播放
loop循环播放
src 音频文件的路径
直接加上默认值表示true自动播放，不加就表示不自动播放 -->
<!-- controls audio属性值之一，意思是显示播放空间 -->
<h1>音视频标签</h1>
<h2>音频标签</h2>
<audio controls src="./audio/孙灵乔 - 樱花树下的约定.mp3" autoplay loop>
孩子，您的浏览器不支持audio标签，请升级您的浏览器
</audio>
<h2>audio 子标签 source：来源</h2>
<audio controls>
<source src="./audio/孙灵乔 - 樱花树下的约定.mp3" type="audio/mpeg" />
<!-- 默认执行第一条，第一条不识别找第二条，依次类推，都不识别就会提示标语 -->
<source src="./audio/孙灵乔 - 樱花树下的约定.ogg" type="audio/ogg" />
<source src="./audio/孙灵乔 - 樱花树下的约定.wav" type="audio/wav" />
请升级浏览器
</audio>
<h2>视频标签 video 子标签 source</h2>
<video controls width="300">
支持的四种编码格式，以及兼容性的代码写法
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.mp4"
type="video/mp4"
/>
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.webm"
type="video/webm"
/>
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.ogv"
type="video/ogv"
/>
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.avi"
type="video/avi"
/>
</video>
</body>
</html>
语义化标签：
个人理解：HTML语义化是指我们在写HTML结构时用有英文语义的标签，使HTML更易于开发人员和搜索引擎，爬虫等机器的阅读和理解，以便更容易收录，提高网站排名
1、h1~h6 文本标题标签
2、p标签 段落标签
3、br标签 换行标签
4、hr单标签 水平线
5、strong标签 定义加重语气，表示特别重要的文字，有加粗效果
6、em标签 定义着重文字 （被强调的文本） 有倾斜效果
7、del标签 删除线标签
8、div标签 块级元素，划分网页框架结构
9、span标签 没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离
table 表格属性
1、width宽度
2、height高度
3、边框border
4、边框颜色bordercolor
5、背景颜色bgcolor
6、水平对齐 align=’left或者right或者center‘
7、cellspacing=’单元格与单元格之间的间距‘
8、cellpadding=’单元格与内容之间的空隙‘
tr 行 属性
1、高度height
2、背景颜色bgcolor
3、文字水平对齐align=’left或者right或者center‘
4、文字垂直对齐valign=’top或者middle或者bottom‘
td 单元格 属性
0、width宽度
1、高度height
2、背景颜色bgcolor
3、文字水平对齐align=’left或者right或者center‘
4、文字垂直对齐valign=’top或者middle或者bottom‘
colspan=’所要合并的单元格的列数‘，必须给td
rowspan=’所要合并的单元格的行数‘，必须给td
form表单
<form action="" method="get">
<input type="text" placeholder="请输入你的用户名，注意大小写" name="username">
<input type="password" placeholder="请输入密码" name="mima">
<input type="submit" value="登录">
<!-- 提交信息到action指定的地址 -->
<!-- type：1、text文本框 2、password密码框 3、submit提交按钮 4、button单纯的按钮 reset清空的效果 -->
<!-- placeholder：提示信息 name必须设置，否则在提交表单时，用户在期中输入的数据不会被发送到服务器 -->
<!-- value 自定义登录按钮的名字 -->
<!-- method :提交方式 -->
<!-- action="" 提交地址 -->
</form>```
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgaejgh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24
