HTML知识点整理

作者: OnePi | 来源:发表于2016-12-04 23:06 被阅读5826次

    写在前面:这是一篇HTML知识点整理笔记!


    HTML

    ㈠HTML入门

    HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)

    HTML 编辑器

    • Sublime Text 3
    • WebStorm

    ㈡ HTML文档结构

    HTML文档基本结构

    DTD(Document Type Definition)  -------------- 文档定义类型
    <html>  -------------- 文本描述网页
        <head>  -------------- 文档头部标记:含脚本,样式表等等。
            <meta />   -------------- 定义文档字符集、使用语言、作者等基本信息
            <title>标题</title>  -------------- 定义文档的标题
        </head>
        <body>   -------------- 网页主体,是可见的页面内容
            <h1>Hello world</h1> -----------标题
        </body>
    </html>
    
    • <html> 与 </html> 之间的文本描述网页
    • <body> 与 </body> 之间的文本是可见的页面内容
    • <head>与</head>头部元素的容器:
      • <head> 定义关于文档的信息。
        <title> 定义文档标题。
        <base> 定义页面上所有链接的默认地址或默认目标。
        <link> 定义文档与外部资源之间的关系。
        <meta> 定义关于 HTML 文档的元数据。
        <script> 定义客户端脚本。
        <style> 定义文档的样式信息。

    例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
            <title>制作我的第一个网页</title> 
        </head> 
        <body> 
            <h1>Hello world</h1>
        </body> 
    </html> 
    

    HTML 文档类型

    • <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
    • 作用:指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    //HTML 5
    <!DOCTYPE html>
    
    //HTML 4.01 Strict
    该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    //HTML 4.01 Transitional
    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    
    //HTML 4.01 Frameset
    该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
    
    //XHTML 1.0
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

    HTML 标记标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    • HTML 标签是由尖括号包围的关键词,比如 <html>
    • HTML 标签分为单标记和双标记:
      • 单标记:<标记名称 属性名称="属性值" ... />,比如
      • 双标记:<标记名称 属性名称="属性值" ... ></标记名称>,比如 <b> 和 </b>;第一个标签是开始标签,第二个标签是结束标签

    HTML 属性

    • 属性总是以名称/值对的形式出现,比如:name="value"

    • 属性总是在 HTML 元素的开始标签中规定。

    • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

      属性    值&描述
      class 规定元素的类名(classname)
      id        规定元素的唯一 id
      name    名称,一般也是唯一的
      style 规定元素的行内样式(inline style)
      title 规定元素的额外信息(可在工具提示中显示)
      ...
      

      注意:实际中很少用到,都通过css和js来设置!

    注释

    //注释:<!--注释-->
    <a href="www.baidu.com">百度一下 你不知道</a> <!--注释写在这里-->
    
    //注释一行代码
    <!-- 此刻不显示图片:
    [站外图片上传中……(3)]
    -->
    
    //条件注释
    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->
    

    ㈢ 元素(标签+属性+文本)

    HTML 元素:

    HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

    • HTML 元素以开始标签起始
    • HTML 元素以结束标签终止
    • 元素的内容是开始标签与结束标签之间的内容;某些 HTML 元素具有空内容(empty content)
    • 大多数 HTML 元素可以嵌套

    1. 文字

    <b>字体加粗</b>
    <i>斜体字体</i>
    <u>下划线</u>
    <s>删除线</s>
    
    上标:X<sup>2</sup>
    下标:Y<sub>3</sub>
    
    //字体相关属性:
    <font size="5" color="red" face="黑体">字体,添加属性值</font>  
    <font size="3" color="#333333" face="黑体">size的值是1~7;color的表达方式:英语单词 RGB 十六进制</font>  
    

    2. 标题 段落 换行 水平线

    //标题:
    <h1 align="center">1号标题</h1>
    <h2>2号标题</h2>
    <h3>3号标题</h3>
    <h4>4号标题</h4>
    <h5>5号标题</h5>
    <h6>6号标题</h6>
    
    
    //段落:<p></p>
    <p>第一段</p>
    <p align="left">第二段</p>
    <p align="center">第三段</p>
    <p align="right">第四段</p>
    
    
    //换行:<br />                 
    <br />  //换行
    
    
    //水平线:<hr />
    <hr />
    <hr size="10" width="800"/>
    <hr size="10" width="800" noshade="noshade"/>  
    <hr size="30%" width="80%" /> //随屏幕百分比变化
    

    3. 图片 超链接 锚点链接

    /* 相对路径和绝对路径
     绝对路径:协议+主机+路径+文档
     相对路径:./ 当前目录  ../ 父级目录   / 根目录   ../../父目录的父目录
    
    URL:scheme://host.domain:port/path/filename
    */
    
    
    //图像:<img src="" />
    
    [站外图片上传中……(4)]
    
    属性:
    scr    //source 图像的URL地址
    title  //鼠标悬停显示的图片描述
    alt    //在浏览器无法载入图像时展示给读者提示的信息
    width
    height
    broder //边框
    
    
    
    //超链接:<a href=""></a>
    
    <a href="http://www.baidu.com" target="_blank"></a>
    
    href: 链接地址
    target: 定义被链接的文档在何处显示  _blank(新标签打开)  
                                    _self (当前标签打开) 
                                    _parent
                                    _top
    
    
    //锚点链接:定义一个唯一的'id' 赋给href 实现跳转
    <a href="#p1">点击前往第七段</a>
    <p id="p1">第七段</p>
    

    4. HTML的实体

    在 HTML 中,某些字符是预留的:小于号(<)和 大于号(>),会误认为是标签。
    因此,在 HTML 源代码中使用字符实体(character entities)来显示预留字符。
    &nbsp;  //空格
    &quto;  //引号
    &yen;  //¥
    &times; 
    &divede;
    
    HTML的实体.png

    5. 列表: ol ul li

    分为:
       有序列表:<ol></ol> 
       & 
       无序列表:<ul></ul>
    
    1)有序列表: 用于显示具有统一特征的有序数据
    
    <ol type="i" start="3">
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ol>
    
    属性   值              描述
    type   1 数字(默认)    排序
           a 字母
           A 大写字母A
           i 小写罗马
           I 大写罗马
    start  数字           起始数字
    
    
    2)无序列表:用于显示同一特征的无限数据
    
    <ul type="circle">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
    
    属性   值                  
    type   disc 实心圆(默认)     
           circle  空心圆
           square 实心矩形
           none  无
    

    6. 表格: table

    • 用途:table元素的作用是显示表格化的数据!
    • table元素可以嵌套。
    //用途:table元素的作用是显示表格化的数据!
    
    <table>  ---------表格
      <tr>   ---------行
        <th>内容</th>  ---------单元格(字体加粗)
        <td>内容</td>  ---------单元格
        <td>内容</td>
      </tr>
    </table>
    
    
    table属性               值           
    width
    height
    bgcolor           背景颜色(英语颜色;RGB;十六进制)
    background        背景图片
    border
    bordercolor
    cellpadding       单元格与内容之间的间距
    cellspacing       单元格与单元格的边距
    align  
    
    
    tr属性            值
    align           (left|center|right)
    bgcolor         (英文颜色|rgb(255,255,255)|十六进制)
    valign          垂直对齐方式(top|middle|bottom)
    
    
    
    th td属性         值
    align           (left|center|right)
    bgcolor         (英文颜色|rgb(255,255,255)|十六进制)
    valign          垂直对齐方式(top|middle|bottom)
    rowspan         行合并
    clospan         列合并
    
    
    
    <table border="1" bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="pink" align="center">
      <tr>
        <th colspan="3">表格的表头:合并3列</th>
        <td rowspan="5">合并5行</td>
      </tr>
      <tr bgcolor="blank" align="left" valign="top">
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    
    
    
    
    //表格的嵌套
    <table border="1" cellspacing="0" cellpadding="10">
      <tr>
        <th>[站外图片上传中……(5)]</th>
        <td align="center" valign="top">
          <table>
            <tr>
              <th rowspan="6">JEEP 牧马人</th>
            </tr>
            <tr>
              <td>姓名</td>
              <td>CwLife</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
             <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </table>
        </th>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
    

    7. 表单: form

    • 作用:用于收集用户输入;

    • 表单元素:

      <input type=""/> 根据不同的 type 属性,可以变化为多种形态。
      <select></select> 定义下拉列表。
      <textarea></textarea> 定义多行输入字段(文本域)。
      <button></button> 定义可点击的按钮。

    作用:用于收集用户输入;
    表单元素: 指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
    
    <form action="action_page.php" method="POST" name="">
      表单元素...
    </form>
    
    属性
    name      表单的名字
    method    规定在提交表单时所用的方法:get/post
    action    定义在提交表单时执行的动作
    
    
    
    
    常用的表单元素:
    
    <input type=""/>  根据不同的 type 属性,可以变化为多种形态。
    <select></select>  定义下拉列表。
    <textarea></textarea>  定义多行输入字段(文本域)。
    <button></button> 定义可点击的按钮。
    
    文本框:<input type="text"> 定义供文本输入的单行输入字段。
    <input type="text" name="控件名字" value="值" maxlength="最大输入字符长度" size="控件宽度" readonly="readonly"(只读) />
    
    密码框:<input type="password"> 定义密码字段。
    <input type="password" name="控件名字" value="值" maxlength="最大输入字符长度" size="控件宽度" readonly="readonly"(只读) />
    
    多选勾选控件:<input type="checkbox"> 定义复选框
    <input type="checkbox" name="控件名字" value="值" checked="checked"(已选中) disabled = "disabled"(禁用控件) />
    
    单选勾选控件:<input type="radio"> 定义单选按钮。
    <input type="radio" name="控件名字" value="值" checked="checked"(已选中) disabled = "disabled"(禁用控件) />
    
    提交表单按钮:<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
    <input type="submit" value="按钮字样" />
    
    重置表单按钮:
    <input type="reset" value="按钮字样" />
    
    上传文件按钮:
    <input type="file" name="文件名称">
    
    隐藏域:
    <input type="hidden" name="控件名字" value="值" />
    
    按钮:<input type="button> 定义按钮。
    <input type="button" onclick="alert('Hello World!')" value="Click Me!">
    
    <!--
    HTML5 增加了多个新的输入类型:(老式浏览器不支持的输入类型,会被视为输入类型 text)  
        •   color
        •   date
        •   datetime
        •   datetime-local
        •   email
        •   month
        •   number
        •   range
        •   search
        •   tel
        •   time
        •   url
        •   week
    
    <input type="number"> 用于应该包含数字值的输入字段。
    <input type="number" name="quantity" min="1" max="5">
    
    <input type="color"> 用于应该包含颜色的输入字段。
    <input type="color" name="favcolor">
    
    <input type="range"> 用于应该包含一定范围内的值的输入字段。
    <input type="range" name="points" min="0" max="10">
    
    <input type="date"> 用于应该包含日期的输入字段。
    <input type="date" name="bday" max="1979-12-31"><br>
    
    <input type="month"> 允许用户选择月份和年份。
    <input type="month" name="bdaymonth">
    
    <input type="week"> 允许用户选择周和年。
     <input type="week" name="week_year">
    
    <input type="time"> 允许用户选择时间(无时区)。
    <input type="time" name="usr_time">
    
    <input type="datetime"> 允许用户选择日期和时间(有时区)。
    <input type="datetime" name="bdaytime">
    
    <input type="datetime-local"> 允许用户选择日期和时间(无时区)。
    <input type="datetime-local" name="bdaytime">
    
    <input type="email"> 用于应该包含电子邮件地址的输入字段。
    <input type="email" name="email">
    
    <input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。
    <input type="search" name="googlesearch">
    
    <input type="tel"> 用于应该包含电话号码的输入字段。
    <input type="tel" name="usrtel">
    
    <input type="url"> 用于应该包含 URL 地址的输入字段。
    <input type="url" name="homepage">
    -->
    
    
    
    多行文本控件:
    <textarea name="控件名称" cols="设置长度" rows="设置宽度">
      文本内容
    </textarea>
     
    
    下拉框控件:
    <select name="控件名字">
      <option value="值" selected="selected"(已选中)>选择内容</option>
      <option value="值" >选择内容</option>
      <option value="值" >选择内容</option>
    </select>
    
    下拉选项的分组:
    <optgroup label="分组标签01">
      <option value="值" selected="selected"(已选中)>选择内容</option>
      <option value="值" >选择内容</option>
      <option value="值" >选择内容</option>
    </optgroup>
    
    
    //e.g.
      <select name="请选择">
        <optgroup label="分组一">
          <option value="值" selected="selected">选择内容1</option> <!--默认选中-->
          <option value="值" >选择内容2</option>
          <option value="值" >选择内容3</option>
        </optgroup>
        <optgroup label="分组二">
          <option value="值" selected="selected">选择内容1</option> <!--默认选中-->
          <option value="值" >选择内容2</option>
          <option value="值" >选择内容3</option>
        </optgroup>
        <optgroup label="分组三">
          <option value="值" selected="selected">选择内容1</option> <!--默认选中-->
          <option value="值" >选择内容2</option>
          <option value="值" >选择内容3</option>
        </optgroup>
      </select>
    
    
    
    按钮:
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    
    
    
    实例:
    
    <form name="" method="" action="">
      用户名:<input type="text" name="控件名字" value="" maxlength="" size="" readonly="readonly" />
      <br />
      密 码:<input type="password" name="控件名字" value="" maxlength="6" />
      <hr />
      多选一<input type="checkbox" name="控件名字" value="值" />
      多选二<input type="checkbox" name="控件名字" value="值" />
      多选三<input type="checkbox" name="控件名字" value="值" />
      
      <hr />
      男<input type="radio" name="控件名字" value="值" checked="checked" /> <!--默认选项;-->
      女<input type="radio" name="控件名字" value="值" /> <!--关联要同名字-->
      <hr/>
      <select name="请选择">
        <optgroup label="分组一">
          <option value="值" selected="selected">选择内容1</option> <!--默认选中-->
          <option value="值" >选择内容2</option>
          <option value="值" >选择内容3</option>
        </optgroup>
        <optgroup label="分组二">
          <option value="值" selected="selected">选择内容1</option> <!--默认选中-->
          <option value="值" >选择内容2</option>
          <option value="值" >选择内容3</option>
        </optgroup>
        <optgroup label="分组三">
          <option value="值" selected="selected">选择内容1</option> <!--默认选中-->
          <option value="值" >选择内容2</option>
          <option value="值" >选择内容3</option>
        </optgroup>
      </select>
    
      <hr/>
      <input type="submit" value="登录" />
      <input type="reset" value="重置按钮" />
      <button>按钮标题</button>
    
      <hr />
      <input type="file" name="filename">
    
    </form>
    

    实践:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
       <title>用户注册例子</title> 
    </head> 
    <body> 
        <form name="" method="" action="">
            <table align="center" width="500" cellspacing="0" cellpadding="10" border="1" bgcolor="cyan">
                <tr>
                    <th colspan="2">用户注册</th>
                </tr>
                <tr>
                    <th>用户名:</th>
                    <td>
                        <input type="text" name="inputyourname" value="" maxlength="20" \>
                    </td>
                </tr>
                <tr>
                    <th>密 码:</th>
                    <td>
                        <input type="text" name="inputyourpsw" value="" maxlength="20" \>
                    </td>
                </tr>
                <tr>
                    <th>性 别:</th>
                    <td>
                        男<input type="radio" name="sex" value="" \>
                        女<input type="radio" name="sex" value="" \>
                        保密<input type="radio" name="sex" value="" checked="checked"\>
                    </td>
                </tr>
                <tr>
                    <th>爱 好:</th>
                    <td>
                        <input type="checkbox" name="love" value="" checked="checked" \>唱歌
                        <input type="checkbox" name="love" value=""  \>跳舞
                        <input type="checkbox" name="love" value=""  \>绘画
                        <input type="checkbox" name="love" value=""  \>书法
                        <input type="checkbox" name="love" value=""  \>篮球
                        <br \>
                        <input type="checkbox" name="love" value=""  \>足球
                        <input type="checkbox" name="love" value=""  \>乒乓球
                        <input type="checkbox" name="love" value=""  \>游泳
                        <input type="checkbox" name="love" value=""  \>溜冰
                    </td>
                </tr>
                <tr>
                    <th>家 乡:</th>
                    <td>
                        <select name="">
                            <optgroup label="第一选区">
                                <option value="" selected="selected">选项11</option>
                                <option value="">选项12</option>
                                <option value="">选项13</option>
                            </optgroup>
                            <optgroup label="第二选区">
                                <option value="">选项21</option>
                                <option value="">选项22</option>
                                <option value="">选项23</option>
                            </optgroup>
                            <optgroup label="第三选区">
                                <option value="">选项31</option>
                                <option value="">选项32</option>
                                <option value="">选项33</option>
                            </optgroup>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>自我介绍:</th>
                    <td>
                        <textarea cols="50" rows="10" >
                            请输入自我介绍:
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button>我要注册</button>
                    </td>
                </tr>
            </table>
        </form>
        
    </body> 
    </html>
    

    实例结果:

    8. 框架: frameset

    //通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
    
    1. 框架结构标签:<frameset></frameset>
    作用:定义如何将窗口分割
    属性名  值
    rows  横向分割(固定值px|百分比|*)有三种写法:(200,300,500)(20%,30%,*)(20%,*,*)
    cols  纵向分割(固定值px|百分比|*)
    border 边框宽度(px)
    frameborder 是否显示边框(0|1) 0-不显示 1-显示
    
    
    
    2.框架标签:<frame />
    作用:定义了放置在每个框架中的HTML文档。
    属性
    scr    URL链接
    name   窗口名称
    scrolling    滚动条,默认显示(no)
    noresize     边框是否可以被拖动(noresize)
    
    
    //e.g.:设置一个两列的框架集: 第一列占据浏览器窗口的 25%。第二列占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中
    <frameset cols="25%,75%">
       <frame src="frame_a.htm">
       <frame src="frame_b.htm">
    </frameset>
    
    
    
    3.内联框架:<iframe src=""></iframe>
    作用:用于在网页内显示网页
    <iframe src="demo_iframe.html" width="200" height="200" frameborder="0"></iframe>
    
    
    
    4. noframes标签: <noframes></noframes>
    用于为不支持框架集的浏览器显示文本
    
    e.g.
    <noframes>对比起,您的浏览器不支持框架集类型</noframes>
    
    
    框架集练习:后台管理系统
    //home.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang = "EN"> 
    <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
       <title>框架集练习--后台管理系统</title> 
    </head> 
        <frameset rows="150,*" border = "1" frameborder ="1" >  <!--切割成上下两部分(150,*)-->
            <frame src="head.html" noresize="noresize" /> <!--顶部head.html-->
            <frameset cols ="200,*" border ="3" frameborder = "1">  <!--切割左右两部分(150,*)-->
                <frame src="leftnavi.html" noresize="noresize" />  <!--左边导航栏leftnavi.html-->
                <frame src="right1.html" noresize="noresize" name="body" />  <!--右侧是主题:right1.html-->
            </frameset>
        </frameset>
    
    </html>
    
    
    
    //.head.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
       <title>制作我的第一个网页</title> 
    </head> 
    <body> 
       <h1 align="center">后台管理系统</h1>
    </body> 
    </html>
    
    
    
    //leftnavi.html
    <body> 
       <ul type="none">
         <li><h3><a href="right1.html" target="body">选择一</a></h3></li>
         <li><h3><a href="http://www.163.com" target="body">网页首页</a></h3></li>
         <li><h3><a href="http://www.baidu.com" target="body">百度主页</a></h3></li>
         <li><h3><a href="http://www.sina.com.cn" target="body">新浪中国</a></h3></li>
         <li><h3><a href="">选择一</a></h3></li>
         <li><h3><a href="">选择一</a></h3></li>
         <li><h3><a href="">选择一</a></h3></li>
         <li><h3><a href="">选择一</a></h3></li>
       </ul>
    </body> 
    
    
    //right.html
    

    9 样式和脚本

    //样式标签:<style></style>  
    //脚本标签:<script></script>
    

    10. 块: div span

    HTML 元素被定义为块级元素或内联元素。

    • 块级元素:以新行来显示。
    • 内联元素:不会以新行来显示。
    //div和span标签
    
    <div> 元素是块级元素,常用于组合其他 HTML 元素的容器,进行文档布局。---
    <span> 元素是内联元素,常用作文本的容器。
      
      
    块级元素:
    <body></body>
    <div></div>  //常用的布局元素
    <h1></h1>...<h6></h6>
    <ol></ol>
    <ul></ul>
    <li></li>
    <p></p>
    <table></table>
    <tr></tr>
    <td></td>
    
    
    内联元素:
    <a href=""></a>
    <i></i>
    <u></u>
    <b></b>
    <span></span>  //文本标签
    <font></font>
    

    相关文章

      网友评论

      • 7e24e47c8f5f:其实也可从效果倒推来学习,《H5有了这些新玩法,还怕没灵感?》,从这里选效果,然后来实现,有目的的实践,没有成就感的学习是对自己信心的消耗
      • 随心了:谢了
      • 晨见:很不错!!
      • 0056b2bc8c83:特别好的复习资料
        0056b2bc8c83:@Alfred_xyz 最开始 是后端,然后,慢慢变成了 前段,总觉得自己有点,先天不足 :sob:
        0056b2bc8c83:@Alfred_xyz 不啊,概念梳理,特别的好。 :blush:
        OnePi:@fzxy77 你也要考试?
      • 06b8579c8ff0:总结的很到位哦
        OnePi:@千年虫cc 谢谢 :blush:
      • 鸢尾嵌宇:很有用。 :+1:
        OnePi:@鸢尾嵌宇 谢谢 :blush:
      • 静侯花开: :smile: 基础的不能再基础了
        OnePi:@静侯花开 HTML的知识本身比较基础 毕竟要与CSS JS活用才会威力无穷
      • 清無:小白
      • 阿哲wizard:好
        OnePi:@阿哲wizard 谢谢鼓励啊 :blush:
      • 温暖一支鹿:我咋一考完网页HTML就看见这个了😭
        OnePi:@见鹿A :sweat: 这个居然还英汉互译? 翻译成汉语?
        温暖一支鹿: @Alfred_xyz 第一题英汉互译你造吗🙃
        OnePi:@见鹿A 。。。对着答案了?
      • cb52b246ae3c:刚好期末复习

      本文标题:HTML知识点整理

      本文链接:https://www.haomeiwen.com/subject/qcakpttx.html