HTML的常用标签
2019-05-23 本文已影响0人
走在路上的小二
什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言（Hyper Text Markup Language）
- HTML 不是一种编程语言，而是一种标记语言（Markup Language）
- 标记语言是一套标记标签（Markup Tag）
- HMTL使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HMTL 标签由尖括号包围的关键词，比如<html>
- HMTL 标签通常是成对出现的，比如 <p></p> ，为双标签。当然也有单标签，如<br /> <hr />。
- 双标签中的第一次标签是开始标签，第二个标签是结束标签。
- 开始和结束标签也被称为开放标签和闭合标签。
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档页被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<!---- base 是单标签：让页面中所有的链接打开状态，target="_blank"代表链接打开新网页-->
<!---- target="_self"代表当前网页打开链接-->
<base target="_blank" />
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
- <!DOCTYPE html> 是指文档使用HTML的版本
- <html> 与 </html> 之间的文本描述网页
- <head> 与 </head> 之间是网页的头部，可以引入css及js
- <body> 与</body>> 之间的文本是可见页面内容
HTML常用标签
<h1>定义标题标签<h1> <!--h1 到 h6-->
<p>定义段落标签</p>
<b>定义加粗标签</b>
<strong>推荐加粗标签</strong>
<i>定义倾斜标签</i>
<em>推荐倾斜标签</em>
<s>定义删除线标签</s>
<del>推荐删除线标签</del>
<u>定义下划线标签</u>
<ins>推荐下划线标签</ins>
<a href="#">定义锚标签，链接标签</a>
<!--a 标签可以网页跳转， target="_blank" 指打开新的网页跳转链接
target="_self" 指当前页面打开新的链接 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--a 标签页可以实现锚点定位:锚点定位适合于较长的页面，我们可以点击关键词，从而快速到达页面的某一个位置-->
<a href="#introduce">点击跳到个人介绍</a>
<h3 id="introduce">个人介绍</h3>
<!-- 图片标签:src 属性是必须的 ,img是单标签，
图片添加了alt属性, alt 属性 当图片显示不出的时候会显示文字，
title 当鼠标悬停的时候出现的文字, border 图片边框 -->
<img src="...XX.png" alt="我是一只羊" title="我很酷" border="10">
<!--- 代表一个空格--->
 
<!---hr是分割线标签--->
<hr />
<!---br是换行标签--->
<br />
- 列表标签: 有序列表、无序列表、自定义列表
<!-- 无序列表，规范： ul 标签里面只放li标签， li标签内 无限制-->
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<!-- 有序列表， ol 带序列号 -->
<ol>
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>定义标题</dt>
<dd>定义描述、解释</dd>
</dl>
- 表格标签
<!--表格标签是用来处理数据的，cellspacing 设置单元格与单元格之间的空白间距，默认2像素，
cellpadding 单个单元格内边距 默认1像素，
align 设置表格在网页中的对齐方式-->
<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
<caption>火影忍者演员表</caption> <!--表格的标题 __-->
<thead> <!--thead标签只里面是表头结构--->
<tr> <!--tr行标签-th表头标签，td单元格标签, tr 只放td标签，th 表头标签-->
<th>姓名</th>
<th>性别</th>
<th>年sds龄</th>
</tr>
</thead>
<tbody> <!--tbody标签只里面是表主体结构--->
<tr> <!--行标签-, tr 只放td标签，td可以放任何元素-->
<td>姓名</td> <!--单元格标签--->
<td>性别</td>
<td rowspan="2">sdkd</td> <!--rowspan跨行合并单元格--->
</tr>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>姓名</td>
<td colspan="2">合并之后的单元格</td> <!--colspan跨列合并单元格--->
</tr>
</tbody>
</table>
- 表单：目的是收集用户信息 包括表单控件，表单信息，表单域
<!-- input 表单控件。1. 是个单标签。2.可以通过type 属性控制形状。 -->
<!--type是text为文本框，value 是控件默认值, name 控件名称, maxlength最大长度-->
<p> 用户名：<input type="text" name="username" value="请输入名字" maxlength="5" /> </p>
<!--type是password为密码框-->
<p> 密 码：<input type="password" name="" /> </p>
<!--type是radio为单选框，单选框如果是一组，我们通过相同的name值来是实现单选,checked代表默认选中-->
<p> 性 别：<input type="radio" name="sex" checked="checked" value="female" />女 <input type="radio" name="sex1" value="male" /> 未知</p>
<!--type是checkbox为多选框，单选框如果是一组，我们通过相同的name值来是实现单选-->
爱 好: <input type="checkbox" name="intrest" checked="checked" /> 足球 <input type="checkbox" name="intrest"> 篮球 <input type="checkbox" name="intrest"> 羽毛球
普通按钮: <input type="button" name="" value="搜索"> 普通按钮
<!--提交按钮，默认是提交表单--->
<input type="submit" name="" value="提交表单">
<!-- 重置按钮，默认是重置表单--->
<input type="reset" name="" value="重置表单">
<!-- 图片按钮--->
<input type="image" name="" value="" src="images/im.jpg">
<!-- 文件按钮：打开本地文件--->
上传头像:<input type="file" name="">
<!-- label标签：用户绑定一个表单元素，当点击lable标签时，被绑定的表单元素就会获得输入焦点 -->
<label>输入账号: <input type="text" name=""></label>
<!-- 如果lable 里面有多个表单控件，想定位到某个 可以通过for id来完成 -->
<label for="two">输入账号: <input type="text" name=""> <input type="text" name="" id="two"></label>
<h4>文本域</h4>
<textarea>请输入留言</textarea>
<h4>下拉框</h4>
<select>
<option>点击选择您的城市</option>
<option>北京</option>
<option selected="selected">上海</option>
</select>
<!-- 三个域名: -->
<ol>
<li>文本域: textarea</li>
<li>文件域: input type="file"</li>
<li>表单域: form 收集表单控件信息并且提交的</li>
</ol>
<h4>表单域</h4>
<!--action提交表单信息的接口, method 请求方式-->
<form action="demo.pht" method="get">
<p>用户名：<input type="text" name="" placeholder="hg"></p>
<p>密 码：<input type="password" name="username"></p>
<input type="submit" name=""> <input type="reset" name="passowrd">
</form>
HTML5新增标签
<header>语义：定义页面的头部 页眉</header>
<nav>语义：定义导航栏</nav>
<aside>语义：定义侧边栏</aside>
<article>语义：定义文章显示</article>
<section>语义：定义区域</section>
<footer>语义：定义页面的底部 页脚</footer>
<!-- datalist 和 input 搭配使用，关键字搜索 -->
<input type="text" name="" value="输入明星" list="star" />
<datalist id="star">
<option>东矿机</option>
<option>速度英</option>
<option>说的</option>
<option>非试点</option>
</datalist>
<!-- fieldset元素 将表单内相关元素分组 打包，legend配合使用 -->
<fieldset>
<legend>用户名登录</legend> <!--标题-->
用户名: <input type="text" name="">
<br />
密 码: <input type="password" name="">
</fieldset>
<fieldset>
<form>
<legend>HTML5新增input type 类型</legend>
<p>邮箱<input type="email" name=""></p>
<p>电话<input type="tel" name=""></p>
<p>只能是数字<input type="number" name=""></p>
<p>网址<input type="url" name=""></p>
<p>搜索框<input type="search" name=""></p>
<p>区域<input type="range" name=""></p>
<p>时间<input type="time" name=""></p>
<p>年月日<input type="date" name=""></p>
<p>年月<input type="month" name=""></p>
<p>星期<input type="week" name=""></p>
<p>颜色<input type="color" name=""></p>
<input type="submit">
</form>
</fieldset>
<form>
<!----autofocus 当页面加载时 input自动获取输入焦点---->
<p>用户名:<input type="text" name="" placeholder="请输入用户名" autofocus="autofocus"></p>
<!----mutiple 可以上传文件多选文件---->
<p>多文件上传:<input type="file" name="" multiple="multiple"></p>
<h4>自动记录完成</h4>
1.autocomplete 首先需要提交按钮
2.autocomplete 需要name属性值
3.autocomplete on代表打开记录 ，off 代表关闭记录
<form action="">
<p>姓名：<input type="text" name="username" autocomplete="off"></p>
<!----required必选项 ---->
<p>密码：<input type="password" name="" required="required"></p>
<p>提交：<input type="submit" name=""></p>
</form>
</form>
<!----embed 插入网络视频 ---->
<embed src='http://player.youku.com/player.php/sid/XNDEyNDExMDIyNA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<!----autoplay 打开网页自动播放， loop = "-1" 为无线循环, controls 是否显示默认播放控件 ---->
<audio src="" autoplay="autoplay" loop="-1" controls></audio>
<!----为了浏览器兼容，我们需要做三种声音文件 ogg mp3 wav ---->
<audio controls autoplay>
<source src="...xx.mp3" />
<source src="...xx.ogg" />
<source src="...xx.wav" />
</audio>
<video src="..XX.mp4"></video>
<video controls autoplay>
<source src="...xx.mp4" />
<source src="...xx.ogg" />
<source src="...xx.webM" />
</video>
