HTML的常用标签

什么是 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">

<!---&nbsp; 代表一个空格--->
&nbsp

<!---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> 密&nbsp;码:<input type="password" name="" /> </p> 
   
 <!--type是radio为单选框,单选框如果是一组,我们通过相同的name值来是实现单选,checked代表默认选中-->  
 <p> 性&nbsp;别:<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>密&nbsp;码:<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>