HTML 常见标签

1.1  常见标题

text---文本的颜色

bgcolor-----背景颜色

background------背景图片

1.1.1  strong 、b标签

都是用来加粗字体的

em  、  i   表示是斜体     u  表示下划线     del  表示删除

1.1.2  br 、hr标签

br标签用来换行------单标签           

hr标签表示水平分割线   width表示长短  size表示粗细

<hr  width="800px"   size="10">   

1.1.3  p标签

段落标签

两个相邻的p标签中间会空一行  

algin属性表示位置  ------left center  right（属性加在标签后面）默认值是left

<p align="left">
这是一个段落
</p>

1.1.4font标签

font标签  这是字体

color属性：颜色

<p>
   <font color ="red”>这是字体标签</font>
</p>

颜色的表示法：1.英文单词  red  black pink

                       2. #rrggbb  三原色 表示法  具体数值可以在网上搜索（颜色对比表）

<p>
   <font  color="#006600">这是字体标签</font>
</p>

1.1.5sub 、sup、pre、span标签

sub  表示下标标签

数组a的下标是2：a<sub>2</sub>

sup  表示上标   二的三次方

二的三次方：2<sup>3</sup>

pre  表示原样输出你在html上的样子（慎用  少用）

span  修饰文本的标签---标准的行内标签

1.1.6 hn和div标签

hn指的是标题标签   h1,h2,h3,h4,h5,h6----标签n的取值是1-6  字体从1到6越来越小  是有加粗效果的

div标签---标准的块级标签---盒子布局会用到

块级标签：独占一行，自动换行   div   hn  p   hr

行内标签：不能自动换行，除非这一行的文本内容铺满了整个页面才会换行   span  

1.1.7特殊字符

空格  &nbsp；(四个表示出来为两格）    >   &gt;           "  &quot       <     &lt;

1.2表单标签

form  标签  一般会和input标签连用（一般不会单独使用）一般可以写在p标签里面

<form action="">
     用户名：<input type="text"><br>
     密码：<input type="password"> 
</form> 

action：跳转的路径

绝对路径：从盘符的位置开始  一长串  别人打不开

相对路径：传给别人也看得到

<form action="..\第二天\demo01.html">

method：表单提交的方式  get  post（默认是get）

get会把用户请求的内容（个人信息）暴露在地址栏上面  不安全

name：表单的名称

<form action="" method="post" name="register">
      用户名：<input type="text" name="username"><br>
      密码：<input type="passwprd" name="password"><br>
       <input type="submit">
</form>

<form action="" method="post" name="register">
      用户名：<input type="text"<br>
      密码：<input type="passwprd" <br>
       <input type="submit">
</form>

1.3表单元素

表单元素（文本框、密码框、下拉列表、单选、多选）

一般由input、textarea、select标签构成，需要放到form里面

1.3.1input标签

语法格式

<input type="元素的类型" name="元素的名称" value="元素的值">

type的取值：

text------文本框

password----密码框

radio----单选按钮  （使name一样就可以单选）

请选择你的性别：<input type="radio" name="gender">男<input type="radio" name="gender">女

checkbox-----多选按钮

请选择你的爱好：<input type="cheeckbox" name="gender">唱歌
              <input type="cheeckbox" name="gender">rap
              <input type="cheeckbox" name="gender">王者荣耀

submit----提交按钮

请选择你的性别：<input type="submit" value="登录">

reset---重置按钮

请选择你的性别：<input type="reset" >

button---普通按钮

请选择你的性别：<input type="botton" value="">

 image---图像按钮  src---引入图片

请选择你的性别：<input type="image" src="">

file-----文件域

hidden---隐藏域

email-----邮箱

color----颜色域

date---日期

time---时间

datetime-local---日期加时间

range----进度条

input标签常用的属性：

checked---默认选择  （默认选择男性）

请选择你的性别：<input type="radio" name="gender" checked"随便输">男
               <input type="radio" name="gender">女

readonly-----只读  字段只可以读  不能修改

disabled----禁用  不可以点击

autofocus-----默认光标的位置

required---不能空白提交

1.3.2select标签  也是写在form标签里面的

下拉列表框-----一般和option标签进行连用

<form action="">
      请选择您的地址：
      <select name="" id="">
         <option value="">北京</option>
         <option value="">上海</option>
         <option value="">武汉</option>
         <option value="">重庆</option>
</form>

selected属性-----默认被选中的那个选项

<form action="">
      请选择您的地址：
      <select name="" id="">
         <option value="">北京</option>
         <option value="" selected>上海</option>
         <option value="">武汉</option>
         <option value="">重庆</option>
</form>

multiples属性-----表示以列表形式显示

<form action="">
      请选择您的地址：
      <select name="" id="" multiple>
         <option value="">北京</option>
         <option value="">上海</option>
         <option value="">武汉</option>
         <option value="">重庆</option>
</form>

1.3.3textarea 标签

       用来实现文本域

cols-----多少列，用于显示文本的宽度

 rows--多少行，用来显示文本的高度

<textarea name=""id="" cols="30" rows="10">这个家伙很懒，什么都没有留下</textarea>

  1.4常见的属性

1.4.1 a标签

a标签---超链接  herf里面填跳转的地址

<a herf="">点我</a>

a标签里面的一些属性：

vlink--访问过超链接文本的颜色   

Alink---激活超链接文本的颜色   

link----超链接文本的颜色   （ link=“red”）

锚点：使用锚点点击跳转到指定的位置

<h1>xxx小说</h1>
         <a herf="#01"><h3>第一章</h3></a>
         <a herf="#"><h3>第二章</h3></a>
         <a herf="#"><h3>第三章</h3></a>
<p>
    <a herf="#"id="01">第一章</a>
</p>

1.4.2 img标签

目前常见图片的格式：GIF  JPG  PNG  

img常见属性

src属性---指的是图片的路径（绝对路径和相对路径）

alt属性---代替图片的文本内容（因为路径的问题或者因为浏览器的问题显示不出来这张图片的时候，属性值就是去描述这个涂片内容）路径正确不显示（一般加上）

<img src="" alt="">

width---宽度

height---高度         要等比例缩小！！！

<img src="" alt="" width=“100px” height=“100px”>

border----边框，默认值0

<img src="" alt="" width=“100px” height=“100px” border=“14”>

align---位置  指图片和文字的位置

top（上对齐）  middle（居中对齐）   bottom（下对齐  默认值）left（左对齐）right（右对齐）

tittle---图片的标题，用来显示描述图片的文字(鼠标落在上面不动，就会显示）

1.4.3位图(参考w3cschool）

用的同样是img标签   

usemap属性

map标签的name属性，一般会和area标签连用

属性：shape----鼠标点击的形状

coords---鼠标点击形状的大小

href---表示跳转的路径

<img src="猫咪。jpg" alt="猫咪"usemap="#cat">
<map name="cat"></map>
    <area shape="circle" coords="" href="" alt="">

1.4.4多媒体标签

audio 标签----音频

video 标签--视屏

controls属性--表示播放器的组件

<audio src="" controls></audio>

autoplay属性---自动播放（浏览器不支持此属性）

loop属性---循环播放

1.5表格布局

table标签

包含thead   tbodt     tr    td   tfood

tr-----行

td----列

<body>
     <thead>表头<thead>
     <tbody>
        <tr>
           <td>第一行第一列</td>
           <td>第二行第二列</td>
        </tr>
       <tr>
           <td>第一行第一列</td>
           <td>第二行第二列</td>
        </tr>
     </tbody>
     <tfoot>表尾</tfoot>
     </table>
</boody>


    

常见格式：

<body>
     <table>
        <tr>
           <td>第一行第一列</td>
           <td>第二行第二列</td>
        </tr>
       <tr>
           <td>第一行第一列</td>
           <td>第二行第二列</td>
        </tr>
     </table>
</boody>


    

样式：

<body>
     <table>
        <tr>
           <td>序号</td>
           <td>姓名</td>
           <td>学院</td>
           <td>专业</td>
       </tr>
       <tr>
           <td>1</td>
           <td>张三</td>
           <td>人工</td>
           <td>软件工程</td>
        </tr>
        <tr>
           <td>2</td>
           <td>李四</td>
           <td>人工</td>
           <td>物联网</td>
        </tr>
        <tr>
           <td>3</td>
           <td>王五</td>
           <td>电气</td>
           <td>智能电网</td>
        </tr>
     </table>
</boody>


    

表格里面的属性：

border---------表格的边框（加在table后面）

后面其余的都可以加在其他位置

width-----宽度

height----高度

表格的对齐方式：

align----对齐方式   left   right   center

表格的背景颜色：

bgcolor-----背景颜色

background-----背景图片

<body>
     <table  border="1"  width="300px"  height="400px"  align="center" bgcolor="pink" background="">
        <tr>
           <td>序号</td>
           <td>姓名</td>
           <td>学院</td>
           <td>专业</td>
       </tr>
       <tr>
           <td>1</td>
           <td>张三</td>
           <td>人工</td>
           <td>软件工程</td>
        </tr>
        <tr>
           <td>2</td>
           <td>李四</td>
           <td>人工</td>
           <td>物联网</td>
        </tr>
        <tr>
           <td>3</td>
           <td>王五</td>
           <td>电气</td>
           <td>智能电网</td>
        </tr>
     </table>
</boody>


    

表格的间距和边距   默认值为2px

cellpading-------表格的边距(表示的是单元格内元素距离单元格边缘的一个距离）

cellspacing-------表格的间距（单元格和单元格之间的距离）

<body>
     <table  border="1"  width="300px"  height="400px"  align="center"  cellpading="10px" cellspacing="10px">
        <tr>
           <td>序号</td>
           <td>姓名</td>
           <td>学院</td>
           <td>专业</td>
       </tr>
       <tr>
           <td>1</td>
           <td>张三</td>
           <td>人工</td>
           <td>软件工程</td>
        </tr>
        <tr>
           <td>2</td>
           <td>李四</td>
           <td>人工</td>
           <td>物联网</td>
        </tr>
     
     </table>
</boody>


    

表格的嵌套：

表格里面可以嵌套表格

<body>
     <table border="1" width="300px" height="100px" bgcolor="pink">
          <tr>
              <td>&nbsp;</td>
          </tr>
        <td>
           <table border="1" width="100px" height="100px" bgcolor="red">
              <tr>
                 <td>&nbsp;</td>
                 <td>&nbsp;</td>
                 <td>&nbsp;</td>
              </tr>
           </table>
       </td>     
     </table>
</boody>


    

表格的合并：

rowspan------表示在单元格上垂直方向上去跨行（合并行）

<body>
     <table  border="1"  width="300px"  height="400px"  align="center"  cellpading="10px" cellspacing="10px">
        <tr>
           <td rowspan="2">&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>    
       </tr>
       <tr>
          
           <td>&nbsp;</td>
           <td>&nbsp;</td>      
        </tr>
        <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           
        </tr>
     
     </table>
</boody>


    

colspan-------表示单元格上水平方向款列

<body>
     <table  border="1"  width="300px"  height="400px"  align="center"  cellpading="10px" cellspacing="10px">
        <tr>
           <td colspan="2">&nbsp;</td>
           <td>&nbsp;</td>     
       </tr>
       <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>      
        </tr>
        <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
        </tr>
     </table>
</boody>


    

1.5列表标签

主要有三种：有序列表、无序列表、数据列表

1.5.1 有序列表----ol

type属性-----设置序号的种类，默认的是我们的数字

<body>
     <ol type="1">
         <li>前端</li>
         <li>前端</li> 
         <li>前端</li>
         <li>前端</li>
     </ol>   
     <ol type="A">
         <li>前端</li>
         <li>前端</li> 
         <li>前端</li>
         <li>前端</li>
     </ol>   
     <ol type="a">
         <li>前端</li>
         <li>前端</li> 
         <li>前端</li>
         <li>前端</li>
     </ol>   
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>

start属性------控制序号开始的位置 (在浏览器中，数字可以识别，但是英文不一定）

<body>
     <ol type="1" start="7">
         <li>前端</li>
         <li>前端</li> 
         <li>前端</li>
         <li>前端</li>
     </ol>   
     <ol type="A" start="C">
         <li>前端</li>
         <li>前端</li> 
         <li>前端</li>
         <li>前端</li>
     </ol>   
     <ol type="a">
         <li>前端</li>
         <li>前端</li> 
         <li>前端</li>
         <li>前端</li>
     </ol>   
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>
     <ol type="1">前端</ol>

reversed属性-----表示降序（反序排列）

1.5.2无序列表-----dl

type属性-------无序列表的样式disc(默认取值 实心圆）circle(空心圆） square（实心方框）

<body>
      <ul>
          <li>前端</li> 
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
      </ul>
        <ul type="disc">
          <li>前端</li> 
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
      </ul>
        <ul type="circle">
          <li>前端</li> 
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
      </ul>
        <ul type="square">
          <li>前端</li> 
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
          <li>前端</li>
      </ul>

1.5.3数据列表------dl

<body>
   <dl>
       <dt>这是地方新闻</dt>
         <dd>这是内容1</dd>
         <dd>这是内容2</dd>
         <dd>这是内容3</dd>
         <dd>这是内容4</dd>
         <dd>这是内容5</dd>
       <dt>这是国际新闻</dt>
         <dd>这是内容1</dd>
         <dd>这是内容2</dd>
         <dd>这是内容3</dd>
         <dd>这是内容4</dd>
         <dd>这是内容5</dd>
       <dt>这是国内新闻</dt>
         <dd>这是内容1</dd>
         <dd>这是内容2</dd>
         <dd>这是内容3</dd>
         <dd>这是内容4</dd>
         <dd>这是内容5</dd>
   </dl>

1.6多窗口框架

一个页面可以显示多个窗口-----frameset（不能和body标签连用）

cols----定义页面列方向的尺寸或者数目

rows-----行

(不知道的值选星号  不能三个选星号）现在HTML5不支持

<frameset cols="25%,40%,*">
    <frame src=""></frame>
    <frame src=""></frame>
    <frame src=""></frame>
</frameset>

这个现在可以用

<body>
     <iframe src="" frameboder="0"></frame>