HTML:描述语义

一、HTML

  HTML:Hypertext Markup Launguage,超文本标记语言,是网页的就文件格式,用于描述网页语义。

  

二、HTML骨架

  DTD手册:http://www.w3school.com.cn/tags/tag_doctype.asp

<!DTD>
<html>
    <head>
    <!-- 字符集 -->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <!-- 关键字 -->
    <meta name="keywords" content="手机,电脑,冰箱,彩电">
    <!-- 描述 -->
    <meta name="description" content="爱前端-全国最适合0基础学员的前端开发工程师培训....">
    
    </head>
    <body>

    </body>
</html>

三、HTML标签

  文本级:

  容器级:容器级标签,只有div  li  dd  dt  td,其余都是文本级标签

1. 常用标签

  h:标题

  p:段落

  img:图片   

<img src="images/m.jpg" alt="这是一副美景图片"/>

  a:超链接

    锚点:<a name="top"></a>   

    跳到锚点:<a href="#top">返回顶部</a>

<a href="temp.html" title="点击我" target="_blank">超链接</a>

2. 列表

  1. 无序列表 ul li

    li是一个非常经典的容器级标签,里面可以放任何东西,甚至,再放置一个ul(二级列表),甚至三级列表。

    注意:ul的儿子标签,只能是li,不能是其他任何标签

  2. 有序列表 ol li

  3. 定义列表 dl dt dd

    定义列表:表示定义某事的列表

    dt dd 是非常经典的容器级标签

3. 表单

  form,是功能型标签,不是一个结构型标签,from是给后台哥哥用的,rorm有两个属性:method、action。

  input:输入控件

    text、password、radio、checkbox

    button、submit、reset

  select>option

  textarea

  

<!-- 用户更好的体验 -->
<input type="radio" name="sex" id="nan"/>
<label for="nan"></label>

4. 表格

<!-- 表格 -->
<table>
    <!-- 表格标题 -->
    <caption>table title and/or explanatory text</caption>
    <thead>
        <tr>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- rowspan="跨行" colspan="跨列"-->
            <td>data</td>
        </tr>
    </tbody>
</table>

<table border="1">
    <tr>
        <th rowspan="3">地区</th>
        <th rowspan="2" colspan="2">2005年耕地面积</th>
        <th colspan="4">耕地保有量</th>
        <th rowspan="2" colspan="2">基本农田保护面积</th>
    </tr>
    <tr>
        <th colspan="2">2010年</th>
        <th colspan="2">2020年</th>
    </tr>
    <tr>
        <th>万公顷</th>
        <th>万亩</th>
        <th>万公顷</th>
        <th>万亩</th>
        <th>万公顷</th>
        <th>万亩</th>
        <th>万公顷</th>
        <th>万亩</th>
    </tr>
    <tr>
        <td>北京</td>
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
    </tr>
    <tr>
        <td>北京</td>
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
    </tr>
    <tr>
        <td>北京</td>
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
    </tr>
    <tr>
        <td>北京</td>
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
        <td>123</td>    
    </tr>
</table>

 5. div、span

  div是典型的容器级标签,没有默认的样式

  span是行内标签

四、废弃的标签

  现在的HTML标签只负责语义、结构、不负责样式,但是在2008之前,HTML也是负责样式的。

  b、u、i、del,这些标签没有丝毫语义,只当作钩子用

  strong、em 带有一点语义,但也有样式色彩

五、总结

  

HTML在现在的社会,就是负责页面语义和结构的,所以标签极大的简化。页面上常用的标签实际上就几个:

  容器: divulli)、oldltable

  放文字的: h系列、pspana

  文本流: imginput

  当做css钩子: bui

最后最后强调一下,HTML放什么标签,不是看什么样子,要看语义!

  

  

  

原文地址:https://www.cnblogs.com/zhoujian43/p/6824393.html