HTML的正确入门姿势——基本结构与基本标签

2022-10-27 15:14:27

一、什么是HTML

HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。

二、HTML文档的结构

HTML文档主要包括三大部分：文档声明部分、<head>头部部分、<body>主体部分。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>我的第一个网页</title>

    </head>

    <body>

    </body>

</html>

三、HTML的基本标签

1.<head>头部部分

1.1meta标签

<meta charset="utf-8" />

<!--
↑设置网页的字符集编码格式：
GB2312：国标码。简体中文的编码格式。
GBK：扩展的国标码。比国标吗多了更多的编码格式。
utf-8；万国码。可以兼容绝大多数国家的语言。

html4.01之前，声明字符集编码的格式：<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

-->

<meta name="keywords" content="杰瑞教育,html5,Web开发"/>

<meta name="description" content="这是我在杰瑞开发的第一个网页。我真厉害！！！！！"/>

1.2title标签

<title>杰瑞首页</title>

1.3link标签

链接网页与其他文件。

下面举个栗子：链接小图标

<link rel="icon" href="img/icon.PNG"/>

2.<body>主体部分

2.1 标签的分类

HTML标签，分为“块级标签”和“行级标签”。

【块级标签和行级标签的区别】

1、块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左往右依次显示
2、块级标签的宽度默认是百分之百，行级标签的宽度由文字内容撑开；
3、块级标签可以设置宽度、高度、边距等属性
行级标签不能设置上述属性

从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)”
成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。例如：<h1></h1> <p></p> <title></title>
自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合(/可以省略)。例如<hr /> <link /> <meta />

2.2 常见的块级标签

1、h标签：标题标签，默认加粗，h1最大，h6最小

2、hr标签：水平线标签

3、br标签：换行标签，在代码中敲回车，在网页中并没有作用，必须使用<br>断行。

4、p标签：段落标签，表示网页中的一段文字

5、blockquote标签：引用标签，表示标签中的文字是应用自其他网站的内容。浏览器默认显示效果：整段向后缩进

6、cite：表示引用内容的来源，常写引用的网址URL。

7、pre标签：预格式标签，与p标签不同的是，pre标签会保留代码中的空格和回车，在网页中直接显示。最常的作用，是在网页中显示代码段，保留代码段格式。

8、div分区标签，用于配合css使用。将网页划分为块，可以包裹各种标签。<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>HTML基本标签</title>

    </head>

    <body>

                <h1>我真帅！</h1>

        <h2>我真帅！</h2>

        <h3>我真帅！</h3>

        <h4>我真帅！</h4>

        <h5>我真帅！</h5>

        <h6>我真帅！</h6>

                <hr/>

                <p>这是一个段落。这是一个段落。<br />这是一个段落。这

                    是一个段落。</p>

        <p>这是一个段落。这是一个段落。这是一个段落。这是一个段

                    落。</p>

                <blockquote cite="www.jredu100.com">

                       我是个帅哥 ！

                </blockquote>  

                <pre>

            预

            格

            式

            标

            签</pre>

<div style="width:100%;height:20px;background-color: red;">

    这是div里面的文字

</div>

2.3 基于布局的块级标签

1、有序列表ol： order list。一个有序列表由多个li组成

<ol>

    <li>第一项</li>

    <li>第二项</li>

    <li>第三项</li>

</ol>

2、无序列表ul： unorder list

<ul>

                <li>第一项</li>

                <li>第二项</li>

                <li>第三项</li>

            </ul>

3、定义列表dl： difine list。

定义列表包含两部分：
<dt></dt>：定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题
<dd></dd>：定义列表的描述项，相对于标题向后缩进显示，一个标题可以有多个描述项。

<dl>

    <dt>定义列表的标题</dt>

    <dd>定义列表的描述项1</dd>

    <dd>定义列表的描述项2</dd>

    <dd>定义列表的描述项3</dd>

</dl>

2.4 了解：组合标签figure

包含两部分：
img 一张图片
figcaption：图片的标题，在图片正下方显示。

<figure>

    <img src="img/icon.PNG" />

    <figcaption>图片的标题</figcaption>

</figure>

2.5 常用的行级标签

1、span标签：用于包裹行内的文字。常配合css使用修改文字样式。

↓栗子：“帅”字颜色变红，字体变48像素

我真<span style="color: red;font-size: 48px;">帅</span>！！！

2、em/strong/i/b 区别

1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义。
(强调的作用，可以让搜索引擎快速的抓取网页的重点部分。可以实现代码的语义化。)
2、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。

<em>em标签，倾斜+强调</em>

<strong>strong标签，加粗+强调</strong>

<i>i标签，倾斜</i>

<b>b标签，加粗</b>

<s>删除线</s>

 <u>u标签，下划线</u>

【常见引用标签】
常见的引用标签有：blockquoye、q、cite
区别：
1、显示效果上：blockquote整段缩进、q加引号、cite倾斜
2、从功能上：blockquote用于引用一整段内容，是块级标签。q引用一句话，是行级标签。cite常用于引用作品名、书画名。

3、img图片标签

①、src属性：表示图片所在的路径。
　　[路径的表示方式]
　　a网络上的图片地址。不建议使用。使用http：//协议
　　b可以使用图片的绝对路径。仅供了解。使用file：//协议。严禁使用。因为网页使用http协议，无法打开file：//协议的文件
　　　　绝对路径写法：file：///盘符：/文件路径
　　c使用相对路径。推荐使用的唯一方式。
　　　　a.图片在当前文件的下一层，“文件夹名/图片名(带后缀)”
　　　　b.图片与当前文件在同一层，直接写“图片名”。
　　　　c.图片在当前文件的上一层，“../图片名”。
　　　　注意：图片必须包含在项目里面，不能退出项目根目录
②、width、height(宽度、高度)属性。
③、title：鼠标指上时显示的文字。
④、alt：图片无法加载时显示的文字，省略alt将默认显示title内容。
⑤、align：图片周围的文字，相对于图片的排列方式：
　　top：文字居上
　　center：文字居中
　　bottom：文字居底

<img src="img/TX.JPG" width="100" height="100" title="鼠标指上时显示的文字" alt="" align="center"/>

4、a标签：超链接

a、href属性：超链接跳转的地址。可以是网页链接，也可以是本地html文件的相对路径。
b、target属性：超链接新页面打开的位置。
　　_self在当前页面打开(默认) _blank在新页面打开
c、title属性：鼠标指在超链接上显示的文字。

【功能性超链接】
a、给指定邮箱发送邮件。mailto：//协议。写法：mailto：//邮箱地址
　　　eg:<a href="mailto://983364230@qq.com">点击给帅哥发邮件！</a>
b、tencent：与指定QQ聊天。tencent：//协议。写法：tencent://message/?uin=QQ号码
　　eg:<a href="tencent://message/?uin=983364230">与帅哥聊天</a>
c、锚链接：点击超链接可以跳转到页面的指定位置(锚点)
　　①在页面的指定位置定义一个锚点：<a name="top"></a>
　　②将超链接的href属性，改为“#锚点名称”：<a href="#top">跳转顶部</a>
　　③跳转到其他页面锚点的方式：<a href="其他页面地址.html#锚点名称">跳转到其他页面指定位置</a>

 <a href="#top" target="_blank" title="百度">这是一个超链接</a>

5、字体大一号和小一号，已淘汰。修改字体统一使用css

<small>小一号字体</small>

 <big>大一号字体</big>

【其他行级标签，了解即可】
s标签：带删除线
u标签：带下划线
dfn标签：定义专业术语
abbr标签：专业术语缩写词
code：提示搜索引擎当前为一段计算机代码，但是不会保留代码格式，需要配合pre标签共同使用。pre包含code
var：声明变量
bdo：定义文本显示方向，有一个重要属性：dir， ltr从左往右 rtl从右往左
kbd：表示需要用户输入的文字
sub：下标
sup：上标
time：表示时间

        <u>u标签带下划线</u>

        <span style="text-decoration: underline;">css实现下划线</span>

        <s>s标签带删除线</s>

        <span style="text-decoration: line-through;">css实现删除线</span>

        我们正在学习<dfn>HTML5</dfn>，简称为<abbr>H5</abbr>。

        <pre>

        <code>

jsLoader({

    name : 'iplookup',

    url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'

});

        </code>

        </pre>

        <var>x</var>+<var>y</var>=1

        <bdo dir="rtl">我真帅</bdo>

        请输入“<kbd>Esc</kbd>”退出系统。

        H<sub>2</sub>O   X<sup>2</sup>

        现在是<time>16:10</time>

【w3c倡导的web结构】
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码，必须要实现语义化

【w3c的规范】
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的标签，不能发生交叉
②块级标签可以包裹行级，行级标签不能包裹块级；p标签不能包裹p标签等...

2.6 表格

表格table标签
表格中的一行，用tr表示；
一行中的每个单元格，用td表示；
首行的表头中每个单元格用th表示，th默认文字会加粗，居中。

【表格中的各种属性】
1、border：给表格的每个td和整个table加边框。如果border的值>1，则只有最外层边框加粗，td上的边框不变。

2、cellspacing:设置单元格与单元格之间的间距。
　　cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示两条线的宽度。
[设置表格边框合并]
可以使用css设置：style="border-collapse: collapse;"
设置边框合并以后，cellspacing属性将会失效。

3、cellpadding:单元格内边距，单元格中文字与边框之间的距离。

4、width/height：表格的宽度 /高度

5、align：设置表格在浏览器中居左、居中、居右

6、Bgcolor：表格背景色
　　bordercolor：表格的边框颜色
　　background：表格背景图。背景色和背景图同时存在，背景图生效。

【表格的行列属性】
作用于tr或td上的属性

1、width/height：宽度/高度

2、bgcolor：背景色
当表格的属性与行列的属性发生冲突时，优先级采用“近者优先”的原则：table<tr<td

3、align：设置表格中的文字水平对齐方式（right、center、left）
Valign：设置表格中的文字垂直对齐方式（top、center、bottom）

【注意】当表格属性与行列属性相冲突时，以行列属性为准
（近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式！

【表格的跨行与跨列】
1、跨列：colspan="n" 如果某个单元格跨n列，择该单元格右侧n-1个td就不需要了。
2、跨行：rowspan="n" 如果某个单元格跨n行，择该单元格下方n-1个td就不需要了。

代码如下：

　　　　<table border="1"; cellspacing="0"; style="border-collapse: collapse;" cellpadding="10"

            width="500"; height="400"; align="center"; Bbgcolor="yellow"; bordercolor="red";

            background="img/TX.JPG"; >

            <tr bgcolor="red">

                <th width="300"; bgcolor="cyan"; align="right"; valign="top"; rowspan="3">1-1</th>

                <th colspan="3">1-2</th>

            </tr>

            <tr>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

            </tr>

            <tr>

                <td>3-2</td>

                <td>3-3</td>

                <td>3-4</td>

            </tr>

        </table>

【表格的结构化】
完整的表格结构，包括
caption：表格的标题，无论caption标签放在表格的第几行，表格标题永远在表格的正上方居中
thead：表格的表头部分。永远在表格最上部
tbody：表格的身体部分。永远在表格的thead之下，tfoot之上
tfoot：表格的尾部。永远在表格的最下部。

表格的直列化：
表格有几列，就可以在表格的最上方写几个<col />标签，每个<col />就对应着第几列，可以对<col />标签修改样式、
添加name等属性，表示这一列的所有td同步修改；
如果，需要对多列修改共同样式，可以使用<colgroup></colgroup>包裹多个<col />

代码如下：

　　　　　<table>

            <col style="background-color: red;"/>

            <colgroup style="background-color: blue;"/>

                <col />

                <col />

            <caption>表格的标题</caption>

            <thead>

                <tr>

                    <th>序号</th>

                    <th>姓名</th>

                    <th>性别</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>张三</td>

                    <td>男</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>李四</td>

                    <td>女</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>王二</td>

                    <td>不明</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td>合计</td>

                    <td></td>

                    <td>3</td>

                </tr>

            </tfoot>

        </table>

2.7 表单

【form表单】
1、form表单有两个重要的属性
　　action：表示将表单提交给哪个服务器地址。
　　method：表单提交数据的方式，可选值有get、post两种。

[get和post的区别]
　　①get使用url传递数据，所有内容在地址栏可见，不安全。
　　 post的数据无法在地址栏看到，较安全。
　　②get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，并且可以传递图片、视频等文件。
　　③get的传输速度要比post快。

[get传递数据的URL格式]
http：//原来的地址.html？name1=value1&name2=value2
比如：http：//127.0.0.1:8020/0595.html?username=123
所以，input使用时，name属性必不可少，缺少name，将导致该输入框的数据不向后台传递。

2、input的常用属性：
　　①type：表示当前输入框是何种类型的输入框；
　　②name：给输入框起别名。向后台传递时，使用name=value的形式传递。

　　③value：当前input的默认值；
　　④placeholder：输入框的提示内容，当输入框有value时提示内容消失。

　　⑤hidden：隐藏当前输入框。可以写为hidden="hidden",也可以省略属性值，只写<input type="text" hidden>
　　　　隐藏的输入框依然可以向后台传递数据
　　⑥disabled：禁用当前输入框。可以显示，不能使用。
　　　　被禁用的输入框内容，将不能向后台传递数据。
　　⑦ checked="checked" 设置单选/多选按钮，默认选中。
3、input的type类型：
　　①text：普通的文本框；
　　②password：密码框输入的内容，显示为小黑点。
　　③radio：单选按钮，单选按钮的value不能省略，这个value需要传到后台；
　　　　单选按钮，凭借name是否相同，区分按钮是否为同一组。同一组按钮只能选中一个，name必须相同。
　　　　checked="checked" 设置单选按钮，默认被选中。
　　④checkbox：多选按钮，其他与单选按钮相同。
　　⑤file：文件上传框。
　　　　accept属性可以限制只能上传何种类型的文件。"*"表示可以接受所有文件，"image/*"表示只能接受图片。
　　　　multiple="multiple" 设置可以上传多个文件。
　　⑥submit：表单提交按钮
　　⑦reset：表单重置按钮，点击将表单恢复为初始状态。
　　⑧image：图形提交按钮，src属性导入图片，与submit都具有提交表单的作用。
　　⑨button：显示为按钮形状，但是没有任何作用。
　　⑩hidden：隐藏的输入框，与普通输入框+hidden="hidden" 的作用相同。
4、select 下拉选择区块
　　①select里面的每一项，用<option></option>标签表示；
　　②name属性，需要写到select标签上；
　　③option标签如果有value属性，择向后台传递的将是value属性的值，
　　　　如果没有value属性，则传递的是<option></option>标签之间的文字。
　　④option添加属性中，selected="selected"设置选中默认项
　　⑤select添加属性multiple="multiple",设置当前下拉控件可以多选。
　　⑥option添加属性title，表示鼠标指上后的文字。
　　⑦select可以使用<optgroup></optgroup>标签对选项进行分组，用label属性显示分组名

　　　　　　　　　　　　　　<select name="city">

                            <optgroup label="沿海">

                                <option value="123">青岛</option>

                                <option selected="selected">烟台</option>

                            </optgroup>

                            <optgroup label="内地">

                                <option title="济南">济南</option>

                                <option>淄博</option>

                            </optgroup>

                        </select>

5、textarea 文本域
　　①文本域大小控制：
　　　　可以用文本域属性cols="20"(宽度多少字符) rows="20"（高度等于多少行）
　　　　可以使用css样式style="width: 200px; height: 300px;"
　　②设置文本域大小不能拖动 style="resize：none;"
　　③设置文本域为只读模式，不能修改
　　　　<textarea readnoly="readonly"></textarea>
　　④文字超出区域处理：
　　　　使用style="overflow: xx"样式，可以设置文字超出区域的显示的方式:
　　　　>>>overflow:hidden; 超出区域的文字隐藏不显示；
　　　　>>>overflow: scroll:无论文字多少，都会显示水平垂直滚动条；
　　　　>>>overflow: auto：自动，默认效果。文字多显示滚动条，文字少不显示滚动条
　　　　>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条。
　　　　overflow-x: scroll;overflow-y: hidden;

form表单代码如下：

　　　　<form action="" method="get" id="form1">

            <table>

                <tr>

                    <td>用户名</td>

                    <td>

                        <input type="text" name="username"  value="sdg"

                             disabled/>

                        <input type="text" name="username"  value="sdg"

                             hidden="hidden"/>

                    </td>

                </tr>

                <tr>

                    <td>密码</td>

                    <td>

                        <input type="password" name="password" value="" placeholder="请输入密码"/>

                    </td>

                </tr>

                <tr>

                    <td>性别</td>

                    <td>

                        <input type="radio" name="sex" value="男" />男

                        <input type="radio" name="sex" value="女" />女

                        <input type="radio" name="sex" value="不明" checked="checked" />不明

                    </td>

                </tr>

                <tr>

                    <td>兴趣</td>

                    <td>

                        <input type="checkbox" name="hobby" value="吃" />吃

                        <input type="checkbox" name="hobby" value="喝" />喝

                        <input type="checkbox" name="hobby" value="玩" />玩

                        <input type="checkbox" name="hobby" value="乐" />乐

                    </td>

                </tr>

                <tr>

                    <td>身份证</td>

                    <td>

                        <input type="file" name="card" accept="image/*" multiple="multiple"/>

                    </td>

                </tr>

                <tr>

                    <td>城市</td>

                    <td>

                        <select name="city">

                            <optgroup label="沿海">

                                <option value="123">青岛</option>

                                <option selected="selected">烟台</option>

                            </optgroup>

                            <optgroup label="内地">

                                <option title="济南">济南</option>

                                <option>淄博</option>

                            </optgroup>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>阅读服务协议：</td>

                </tr>

                <tr>

                    <td colspan="2">

                        <textarea style="width: 300px; height: 200px; resize: none; overflow: scroll;"

                            readonly="readonly">这是一份你必须同意的协议</textarea>

                    </td>

                </tr>

                <tr>

                    <td>

                        <input type="submit" value="注册"/>

                    </td>

                    <td>

                        <input type="reset"  name="重置"/>

                    </td>

                </tr>

                <tr>

                    <td>

                        <input type="image" src="img/icon.PNG"/>

                    </td>

                    <td>

                        <input type="button"  value="一个并没有什么卵用的按钮"/>

                    </td>

                </tr>

            </table>

        </form>

【html5智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，
　　然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定
　　<form id="ff"></form>
　　<input form="ff"/>
2\H5给我们新增了许多input的新的type类型
　　range color date email url等
3、H5新增的input属性：
　　①form属性：关联指定表单的id
　　②placeholder：输入框的提示内容
　　③required="required" 表示必填
　　④autofocus：指定输入框自动获得焦点
　　⑤autocomplete：可以设置是否开启自动提示完成功能，默认为开启状态，
　　设置为off表示关闭，设置为on表示打开
　　可以为form标签设置autocomplete，控制表单所有输入框的自动提示功能。

码农公寓