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

时间:2023-02-25 14:18:08

一、什么是HTML

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

二、HTML文档的结构

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
</body>
</html>

<!--
↑文档类型声明:让浏览器按照html5的标准对代码进行解释与执行。
↑文档类型声明必不可少,而且,必须放在文档最上方。
↑如果不写文档类型声明,浏览器会默认按照兼容模式运行,但可能会出现不明bug。
-->

三、HTML的基本标签

1.<head>头部部分

<!--
↑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开发"/>

<!--
设置网页关键字:
name="keywords"表示当前语句用于设置网页关键字
content=""表示网页的关键字内容。多个关键字之间用英文逗号分隔。
-->

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

<!--
设置网页描述:
name="description" 表示当前语句用于设置网页描述
content="" 表示网页的描述内容。
网页的描述,在搜索引擎中搜索网站时,标题下面的一段文字,就是网页的描述内容。
-->


1.2title标签

<title>杰瑞首页</title>

<!--
↓网页的标题,也就是网页选项卡上的文字。
-->


1.3link标签

链接网页与其他文件。

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

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

2.<body>主体部分

<!--
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,控制表单所有输入框的自动提示功能。