HTML

HTML笔记大纲

1 基本介绍

HTML元素

1.级别
    容器级 <div> </div> 内部可存放任意内容
 
    文本级 <p></p> 只能存放文字或类似文字的内容
 
2. 元素对空白不敏感（即可通过空格、换行、缩进对内容进行更改，使其变得更清晰）
 
3.空白折叠现象：元素内容如果是文本，所有文本之间如果有空格换行、缩进等空白字符，
                在浏览器中加载时连载一起的空白会折叠成一个空格显示。

HTML属性

1.书写：开始标签内部 <p class = "abc">段落</p>
 
2.属性 ：属性名 key
        属性值 value
 
3.一个标签内可以设置多个不同属性，中间用空格隔开
        <p class = "abc" id = "p">段落</p>
 
4.部分标签属性可设置多个属性值，所以属性值都必须写在同一对双括号内，值与值之间需要使用空格分隔
        <p class = "abc  efg hij">段落</p>
 
一个标签 => 不同属性 
            部分属性 => 不同属性值

VS code 编辑器

1.插件
    Chinese Language 中文界面
    Auto Rename Tag  修改HTML标签，自动完成尾部闭合标签的同步修改
    open in browser  右键设置在默认浏览器中打开（Alt + B)
 
2.快捷键
    ！     + Tab  生成主体部分
    标签名 + Tab  快速生成标签
    标签名*n      生成n个相同的标签
    h$*n   + Tab    
    Ctrl + Enter 换行

HTML基本骨架

1.基本骨架
    <html>
 
        <head>
            <title>网页标题</title>
        </head>
 
        <body >
        网页主体
        </body>
 
    </html>
 
2.类型
    <html>标签 ： 定义HTML文件的根元素，所有的标签要写在<html>标签内
 
    <head>标签 ：  内部用于对网页的设置，注意head标签中必须设置的标签是title
 
    <title>标签 ： 让页面拥有一个属于自己的标题
                   title中的关键字可以做为搜索引擎抓取时的关键字，提高SEO搜
                   索引擎的优化内部内容会显示在搜索结果的标题部分做为浏览器
        		   收藏夹的默认网页标题
 
 
    <body>标签 ：  定义网页主体部分，由于存放所有的HTML显示内容的标签
                        <p>,<h1>,<a>,<div>等
                   <body>内部的元素内容会显示在浏览器的窗口中

HTML DTD、命名空间、字符集

1.DTD （文档定义类型DocType Definition）
    1>位置：完整的HTML文件的第一行内容
    2>作用：
            告诉浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照
            对应版本的HTML语法进行解析页面
 
    3>HTML5
    <!DOCTYPE html>
 
2.命名空间：（xmlns）
    1>定义：<html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性
    
         XHTML1.0版本
         <html xmlns = "http://www.w3.org/1999/xhtml" xml:="en">
        </html>
 
        HTML5版本
        <html lang = "en">
        </html>
    
    2>总体上说是为了相同标签语义相同
        xml:可拓展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，
        	是HTML的补充
        
        xml:lang = "en" |
        lang = "en"     |这两个表示所有的标签内容的语言都是英语
 
        lang = "zh-cn" 表示中文
 
        对搜索引擎和浏览器有帮助
 
3.字符集   
    1><head>标签内部的<meta>标签通过http- equiv属性定义了当前的网页所使用
        	的字符编码。
        char: character, 字符。set:集合。
 
        XHTML1.0版本
        <meta http- equiv="Content-Type" content=" text/html;
                                                 charset=UTF-8">
        HTML 5版本
        <meta charset="UTF-8">
 
    2>常用字符集编码
        国际通用字库
        ●UTF-8: 以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文
        		字，一个汉字为3个字节大小。
        中文国标字库
            gb2312: 共收入汉字6763个和包括拉丁字母、希腊字母、日文平假
            名及片假名字母、俄语西里尔字母在内的682个。
 
            gbk:    是gb2312的扩展，增加了繁体字，共收入21886个汉字和图
            形符号，其中汉字(包括部首和构件) 21003个， 图形符号
            883个，一个汉字为2个字节大小。
 
    3>使用情况建议:
            1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
            2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。
 
            注意: meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出
            现两个字库不匹配，浏览器加载时出现乱码。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--应该是将来做移动端的适应接口-->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2常用标签

注释

    <!-- 注释-->
    1.在源代码中添加描述性的提示信息，便于我们]阅读代码。
    2.对于HTML纠错也大有帮助，可以通过注释某-行HTML代码，以便检索错误的位置。
    3.暂时注释掉一 部分不用的代码，便于后期恢复代码。

标题

    h$*7快捷键
 
1.标题标签
    标题(Heading)是通过<h1>-<h6> 六个标签分别来对六个级别的标题进行定义的。
    <h1>定义最大的标题，<h6>定义最小的标题。
    <h1>- <h6>标签都是双标签，且是容器级标签。
 
 
2.标签级别
    标题标签之间是不能互相嵌套的，下一 级标题与上级标题之间通过同级关系书写，
    下一级标题解释说明的是前面距离最近的上一级标题。
        正确写法
                <h1>-级标题</h1>
                <h2>二级标题</h2>
 
        错误写法
                <h1>
                    <h2>二级标题</h2>
                </h1>
 
3.
    ●标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，
       其中<h1>标签最重要，<h2>标签次重要，以此类推。
    ●<h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
    ●<h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，
      如果一个页面出现多个<h1>,反而降低权重。约定俗成的，-个页面中只会出现一个<h1>。

段落标签和换行标签

1.段落标签
    段落(paragraph) 是通过<p>标签进行定义的。
    <p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的
    <font>标签等。
 
2.
换行标签
    ●<br/> (breaking) 标签是HTML中一个简单的换行符。
    ●<br />标签是一个单标签。
    ●在需要换行的位置可以使用<br />标签书写，但是<br />与<p>不同，<br />
        没有建立新的、段落的语义，只是简单的进行强制换行。

文本格式化

1.
    ●HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
    ●但是在HTML .4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，
		css负责格 式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01
		和XHTML1.0transitional版本中依旧可以使用。
 
2.文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
 
加注释的重要
        <!-- b  定义粗体文本，bold -->
        big     定义大号字
        em      定义着重文字，emphasis, 自带斜体效果
        <!-- i  定义斜体字，italic -->
        small   定义小号字
        strong  定义加重语气，自带加粗效果
        sub     定义下标字，subscript
        sup     定义上标字，superscript
        ins     定义插入字，自带下划线效果，insert
        del     定义删除字，delete
 
        s       不赞成使用，使用del代替, strike的简化
        strike  不赞成使用，使用del代替
        <!-- u  不赞成使用，定义下划线,使用css中样式代替,underline -->

图像

1.简述
    ●图像(image) 由<img>标签进行定义。
    ●<img>标签是单标签，本身相当于一个特殊的文本。
    ●<img>标签的作用是在 指定的位置插入一张图片。
    ●在HTML文件，常用的插入图片的类型有: jpg、 png、 gif。
 
2.标签属性
    由于<img>为单标签，所以它只能通过属性进行相关的图像设置。
    <img>常用属性展示:
 
    1> src 表示图片的路径;  <img src="smile01.jpg"/>
        <!-- 
            如果需要插入-张图片 到HTML中，<img>标签必须设置src属性。
            src:全称source资源， 属性值是图片查找的路径。
        
       
        -->
    2> 高度和宽度
        width    表示图片的宽度;
        height   表示图片的高度;
        <!-- 
            属性值:以px为单位的数值，或者省略px不写。
            如果不设置两个属性，会以图片的原始尺寸加载。
            如果设置属性:只设置了其中一个，另一个会等比例变换;如果两个都设置，
		    按照设置值加载。
         -->
 
 
 
    3. border 边框属性;它的值可以设置边框的厚度;
                <img src="smile01.jpg" border="20">
                注意: border属性可以使用css进行设置，
					css中的边框有更多的设置效果。
 
 
    4. title:设置的是鼠标悬停时的提示文本。
                属性值:自定义的提示文字内容。
                <img src="smile01.jpg" title= "点击查看原网站">
 
    5.alt:
                设置的是图片查找错误时，出现的替换文本。
                如果能正常找到图片，替换文本是不显示的。
                属性值:自定义的替换内容。
                <img src="smile01.png" alt= "这是一张微笑的表情">
 
 
3. 路径:
        路径:指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
        部分标签的属性需要设置为路径，例如<img> 的src属性。
        路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
 
        1.相对路径：以HTML文件本身为参考点查找
 
        <!-- 
            相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置
		   进行查找，包含三种方向。
 
 
            同级查找:指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式;
            <img src="smile01.jpg">
 
            子级查找:指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文
				   件夹名称，然后通过关闭符号/进入文件夹查找里面的文件;如果
				   有多层文件夹，需要/进入多层。
            <img src="images/smile02.png">
            <img src="images/tupian/smile03.jpg">
 
            上级查找:指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文
				   件夹到，上一层，路径写法利用../表示跳出一级，如果跳出多级
				   书写多次../,直到找到文件。
            <img src="../../smile04.jpg" />
            <img src="../images/smile01.jpg" />
 
 
         -->
        2.绝对路径 ：从电脑盘符or从网址形式查找
 
            注意：
				*1地址使用的是正斜杠/
				*2从盘符出发的绝对路径的缺点:
                            a.盘符出发的路径不可移植，不可移动。
                            b.盘符出发的路径容易出现中文字符，
						    中文的路径容易出现错误。
 
 
        <!-- 
            绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发
		   进行查找，或者使用网址形式查找。
 
            盘符出发:例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子
				   级查找写法直至找到目标文件。
            <img src="C:/Users/teacher/Documents/html/case/images/
												smile02.png"/>
 
            网址形式:要查找的文件是来自网络资源，路径写法以http://开头。
    		<img src= "http://img3.imgtn.bdimg.com/it/u=1084243323,
 
         -->

音频和视频

1.音频
    1*添加
        .音频使用<audio>标签进行定义。
        <audio>是双标签。
        ●同图片一样，需要使用src属性设置音频查找的路径。
        音频文件支持的格式包括: .mp3、 .ogg、 .WaV。
 
    2*控制
        音频加载后不会自动显示播放器的控制条，需要使用controls属性
        进行设置，属性值也是 controls.
        <audio src=" audio.mp3" controls="controls"> </audio>
 
2.视频
    1*添加
        视频的设置方法与音频非常类似。
        视频使用<video>标签进行定义。
        <video> 是双标签。
        使用src属性设置视频查找的路径。
        视频文件支持的格式包括: .mp4、 .ogg、 .webm。
        
    2*控制
        视频也需要使用controls属性设置控制条，属性值也是controls。
        <video src="video.mp4" controls="controls" ></video>

超级链接

1.概述
        HTML使用超级链接与网络上的另一个文档相连。
        超链接可以是一个字，一个词，或者一组词，也
        可以是一幅图像，可以点击这些内容来跳转到新
        的文档或者当前文档中的某个部分。
 
2.
        在HTML中使用<a>标签可以创建链接。
        a全称anchor,锚的意思。
        ●<a>为双标签。
        作用:在指定的位置添加超级链接，提供用户进行点击和跳转。
        ●<a>标签可以实现两种跳转:跨页面跳转、页面内跳转。实现跳转的
            方式需要用到一些标签属性。
        <a>链接内容</a>
 
3.href属性
        href全称hypertext reference,超文本引用，用于规定链接的目标地址。
        属性值:链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。
        href属性非常重要，<a>标签要想实现点击跳转，必须设置该属性，拥有这个属性<a>标签在
        鼠标移上时才会显示一个小手指针状态。
 
4.target属性
        使用target属性，可以定义被链接的文档在何处跳转显示。
        属性值有两种:
        _self:默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
        _blank:空白的，表示跳转的页面在新窗口打开。
 
5.title属性
        title设置的是鼠标悬停时的提示文本，与<img>标签类似。
        属性值:自定义的文字内容。
        该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
        <a href="smile.html" title-"点击查看源网页">
            <img src="images/smile02.png" />
        </a>

锚点跳转

1.页面内锚点跳转
    这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。
    制作方法分为两个步骤，分别是设置锚点、添加链接。
 
        1*  设置锚点，也就是设置跳转目标位置，有两种设置方式。
               1-在目标位置找到任意一个标签，给它添加id属性，
				id的属性值必须是唯一的。
				id的属性值自定义规则:
					必须以字母开头，后面可以有字母、数字、
					下划线和横线，区分大小写。
                 <h2 id="mubiao">目标位置</h2>
 
                2- 在目标位置添加一个空的<a>标签，只设置一个name属
                    性，name属性值设置方式与id相同，也必须是唯一的。
                    <a name="mubiao"></a>
 
        2*  添加链接
                链接到锚点，在需要点击的位置设置<a>标签，给a的href属
                性设置属性值为#id属性值或者#加a的name属性值。
                    <a href="#mubiao">点击文本</a>
 
 
2.跨页面锚点跳转
    这种跳转方法综合了跨页面跳转和锚点跳转。
    制作方法也分为两个步骤，分别是设置锚点、添加链接。
    第一步:设置锚点，方式与页面内锚点跳转一致， 在目标网页的指定位置设置
            用id或name属性。
    第二步:链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id。
    <a href="new.html#mubiao">点击文本</a>

布局标签

1.布局标签：
    <div>和<span>标签常用作布局工具,我们俗称盒子,后期h5也增加了更多布局标签。
    <div>和<span>都是没有具体明确的语义的。
 
2.<div>标签
    div:全称division, 分割、区域、跨度的意思。俗称大盒子。
    <div>是双标签，是最经典的容器级标签，内部可以放置任意内容。
    作用:多用于划分网页区域，进行结构布局。- -般将相关的内容使用<div>包裹起来，
        整体设置大的布局效果。
 
3.<span>标签
    span:小区域、小跨度的意思。俗称小盒子。
    <span>也是双标签，容器级标签。
    作用:在不改变整体效果的情况下，可以辅助进行局部调整。

表单

1.表单的组成
    HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击
    的小控件。在HTML中，一个完整的表单通常由表单域、提示信息和表单控件(也称为表单
	元素) 3个部分构成。
 
2.功能
    表单域:相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处
    理表单数据所用程序的ur|地址，以及数据提交到服务器的方法。如果不定义表单域，
    表单中的数据就无法传送到后台服务器。
    提示信息:一个表单中通常还需要包含-些说明性的文字，提示用户进行填写和操作。
    表单控件:包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提
    交按钮、重置按钮等。

表单域

1.概述
    HTML表单域使用<form>标签进行定义。
    <form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放
        在一个<form>标签之内。
    <form>标签为双标签，容器级标签。
 
2.标签属性
    <form>标签通过对应属性规定提交数据的方法和提交位置。
属性名 属性值 描述
action url 指定接收并处理表单数据的服务器程序的url
method get/post 用于设置表单数据的提交方式
name 自定义名称 规定表单的名称 
3.书写：
     <form action="data.php" method="get" name="FristForm"></form>

input标签

1.<input>标签
    ●<input>标签是最重要的一个表单元素。
    ●<input>标签为单标签， 本身相当于- -个特殊的文本。
    ●<input>标签需要通过标签属性实现各种功能。

input 标签常用属性

2.文本框、密码框
    2-1单行文本输入框: text
        <input>标签的type属性值为text。
        定义提供用户输入的单行文本的输入框，不能输入多行文字。
        常用value属性定义默认的输入文字。
		<input type="text" value="请输入您的用户名">
	2-2密码输入框:password
        <input>标签的type属性值为password。
        定义提供用户输入的密码框。
        password字段中的字符会被做掩码处理(显示为星号或实心圆)
 
3.单选框、复选框
    3-1单选框:radio
        <input>标签的type属性值为radio。
        定义提供用户点击选择的单选框。
        单选框一般都是成组出现， 多个单选框组成一组选择的情况。
        同一组单选框之间必须是互斥的关系，通过给同一组单选框都
	    设置相同的name属性值实现。
        <input type="radio" name="sex" />男
        <input type=" radio" name="sex" />女
 
    3-2复选框: checkbox
        <input>标签的type属性值为checkbox。
        定义提供用户点击选择的多选框。
        复选框允许用户在有限数量的选项中选择零个或多个选项。
        同一组复选框最好也设置相同的name属性。
            <input type="checkbox" name="hobby" />唱歌
            <input type="checkbox" name="hobby" />代码
            <input type="checkbox" name="hoblby" />运动
 
4.默认选中设置
        单选框和复选框都可以提前设置默认选中项。
        <input>标签有一-个checked属性，如果不设置表示默认没有选中。
        属性值如果设置为"checked"，表示该项默认被选中。
	    <input type="radio" name="sex" checked="checked" />男
        <input type="checkbox" name="hobby" checked="checked" />唱歌

女

5.按钮
标签有四种形式的按钮:

type 名称 特点
button 普通按钮 没有任何特殊功能
reset 重置按钮 将同一个< form>中填写的表单内容清空，恢复成默认
submit 提交按钮 将填写数据提交到
中指定的后台服务器，并重置清空中填写的信息
image 图片按钮 默认与提交按钮的效果相同，使用的图片需要利用src属性,查找正确路径 
举例：
        <input type="button" value="普通按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">
        <input type="image" src="路径">
 
 
6.文件上传: file
 
        <input>标签的type属性值为file。
        定义文件上传按钮，可以提供用户选择本地文件进行.上传服务器。
        <input type= "file">
        使用input的multiple属性，可以决定是否可以选择多个文件。
        <input type="file" multiple="multiple" /> 
 
7.文本域<textarea>
        1*定义：
            文本域使用<textarea>标签定义，制作可以输入多行文本的区域。
            <textarea>标签为双标签，本身相当于一个特殊的文字。
            文本域可以设置默认输入的文字，在双标签之间书写默认文字。
 
        2*属性：<textarea>有两个标签属性，可以设置显示区域大小。
        <!-- 后期使用CSS写，这里了解就行
            rows:行，属性值是数字，数字是几表示文本框显示的最大行数，如果
				超过了行数，会被隐藏并且出现滚动条。
            cols:列，属性值是数字，数字是几，表示在出现滚动条之后，每一行
			    显示的最大字节数(一个汉字按2字节计算)。
           		 <textarea cols="30" rows=" 10">
						默认输入文字
                 </textarea>
 
				代表（30/2==15）列，10行
         -->

下拉菜单

1.标签
    下拉菜单需要至少两个标签完成结构:
        <select>:选择，表示定义下拉菜单整体结构。
        <option>:选项，表示定义下拉菜单的每一项。
 
    两个标签都是双标签，文本级标签。
 
2.默认选中项
        默认情况下，选中的是第一项。
        下拉菜单可以通过给<option>标签设置selected属性，属性值为selected,
        更改默认选中项。
        <option selected="selected">北京</option>
 
3.分组管理
        下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
        可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签。
        关系: select > optgroup > option
        <optgroup>可以设置一个label属性， 表示给这一-组选项添加一 个分组
                  标签名，分组 标签<optgroup>是不能被点击选择的。
 
 <!-- 下拉菜单 -->
        <p>
            一线城市：
            <select>
                <!-- 分组 -->
                <optgroup label="中国城市">
                <option>北京</option>
                <option selected ="selected">上海</option>
                    					<!--设为默认项 -->
                <option>广州</option>
                </optgroup>
 
                <optgroup label="外国城市">
                <option>巴黎</option>
                <option>旧金山</option>
                <option>东京</option>
                </optgroup>
 
            </select>
        </p>

label标签

1.作用：
        <label>标签的作用是帮表单元素定义标注(标记)
        如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>
        内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。
        <!-- 
                所有的表单元素都可以通过绑定其他内容去扩大
                触发点击范围，这时需要使用一个<label>标签。
        -->
 
2.绑定方法
    2-1 方法一
        1给表单元素设置id属性。
        2.然后将需要绑定的其他内容用<label>标签包裹。
        3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。
              <input type="radio" name="1" id="通信工程01">
              <label for="通信工程01">通信工程</label>
 
    2-2 方法二
        如果绑定内容和表单元素写在一起，可以化简绑定写法。
        直接使用<label>标签将绑定内容与表单元素起进行嵌套。
             <label> 
                 <input type="radio" name="1" id="男">通信工程 
            </label>

字符实体

在普通文字书写时，有一些特殊符号不能直接书写(例如
连续的空格)，或者符号具有特殊功能也不能直接书写
(例如<>符号)
可以使用一些HTML提前预留好的替换字符进行书写，这
些替换字符叫做字符实体。

3c手册

列表

列表

1.列表
    列表用于制作HTML中的一系列项目。
    通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。
    根据项目的内容不同，可以有三种语义的列表结构:无序列表、有序列表、定义列表。

2.举例：

无序列表

1.无序列表标签
    无序列表需要两个标签参与，分别是<ul>和<li>。
    ul: unordered list,表示定义-一个无序列表的大结构。
    li: list item,列表项，定义的是无序列表内的某一项。
    <ul>和<li>是嵌套关系，快捷键: ul>li。
            一个列表中可以有任意个列表项。
                <ul> 
                <li>列表项1</li> 
                <li>列表项2</i>
                <li>列表项3</li>
                <li>列表项4</li>
                </ul>
 
2.注意事项
    1. <ul>内部只能嵌套<li>, <|i>标签不能脱离<ul>单独书写。
    2.<li>标签是一个经典的容器级标签，内部可以放置任意内容，
        甚至可以放一组ul>li无序列表结构.
    3.无序列表的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的。
    4.无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。

有序列表

1.有序列表标签
   有序列表的语法与无序列表非常类似，只是在语义上有差异。
   有序列表由两个标签组成，分别是<ol>和<li>。
   ol: ordered list,表示定义一个有序的列表的大结构。
   li: list item,定义的是有序列表的每一项。 <ol>和<li> 是嵌套关系，
       快捷键: ol>li。<ol>标签内部可以嵌套任意多个<|i>标签。
       
           <ol>
               <li>列表项1</li>
               <li>列表项2</li>
               <li>列表项3</li>
               <li>列表项4</li>
           </ol>
 
2.注意事项
 1.<ol>内部只能嵌套<li>标签，而<li>不能脱离<ol>单独书写。
 2.<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放ol>li。
 3.有序列表的列表项<li>之间，存在顺序先后之分,根据内容的顺序需要合理调整位置。
 4.有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是<ol>标签的作
   用，而是css负责的。

定义列表

1.定义列表标签
    自定义列表不仅仅是一-列项目，而是项目及其注释的组合。
    由三个标签组成完整的结构，包含<dl>、 <dt>和<dd>。
    dl: definition list,表示定义一一个自定义列表的大结构。
    dt: definition term,表示定义自定义列表中的一个主题或者术语。
    dd: definition description,定义解释项，表示描述或解释前面的定义主题。
 
    <dl>内部只能嵌套<dt>和<dd>, <dt> 与<dd>是同级关系。
    <dl>
        <dt>主题</dt>
        <dd>解释项</dd>
    </dl>
 
2.注意事项
    1. <dl>内部只能嵌套<dt>和<dd>, <dt> 与<dd>不能脱离<dl>单独书写。
    2.dl内部可以放多组dt和dd,每个dd解释说明的是前面的距离最近的一个dt。
    3.每个dt后面可以有0到多个解释项的dd,每个dd解释的都是前面距离最近的一个dt。
    4.dt和dd标签也是容器级标签，内部可以放置任意内容。
    5.定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
    6.配合着css布局效果，最好每个dl中只添加一组dt和dd,便于后期管理。

表格

表格基础

1.创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、 <td>标签。
    table:表格，定义的是整个的表格大结构。
    tr: table rows,表格的行，定义的是表格由多少行组成。
    td: table data,表格数据，也叫表格单元格，定义的是每一行内部的单元格。
 
2.<table>的属性
    <table>标签可以添加border边框属性。
    属性值:数字，表示像素值。
    表格的单元格之间有默认的空隙，会导致双线边框。
    解决方法:设置标签样式属性style。
    属性值: border-collapse : collapse;表示边框塌陷。
 
3.表头单元格
    如果要绘制表头，使用标签<th>, table head data,表头单元格。
    在表格中绘制的时候，替换的是<td>的位置。
    <th>标签中自带默认的css样式效果，文字显示粗体居中。

合并单元格

1.
    表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置。
    rowspan:跨行合并。上下的合并。
    colspan:跨列合并。左右的合并。
    属性值:数字，数字是几表示跨几行或跨几列合并。
 
2.制作技巧
    1.先列出所有行<tr>,以最小单元格为标准。
    2.再添加每一行的<td> 或<th>单元格。
    3.划分单元格所在行时，顶边对齐的属于同一行。
    4.将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小
    的单元格。
 
3.举例
 <style>
        td {
            width: 400px;
        }
</style>
    <table border="1" style="border-collapse: collapse;">
        <!--  -->
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
 
        <!--  -->
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>
        <!--  -->
        <tr>
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <!--  -->
        <tr>
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
 
    </table>

3.实现效果

表格分区

<table>内部最直接的子级包含四个分区标签，他们都是双标签。
    caption:表格的标题，内部书写标题文字。
    thead: table head,表格的头部。内部嵌套tr>th。
    tbody: table body,表格的主体。内部嵌套tr>td。 
    tfoot: table foot,表格的页脚。内部嵌套tr>td。
四个分区可以选择性的进行组合。
posted @   NanFeng-JinHe  阅读(46)  评论(0)  编辑  收藏  举报
相关博文：
· javascript
· JavaWeb-动力节点
· html5
· html标签
· HTML基础
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛