HTML基础知识

最新推荐文章于 2024-07-18 20:18:47 发布

AgainKin

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量243

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/AgainKin/article/details/129803071

版权

网页是指在因特网上根据一定规则，使用html等，制作的用于展示特定内容相关的网页集合；
网页是网站的一页，通常是html格式的文件，它要通过浏览器来阅读；
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素结尾的文件，因此俗称HTML文件；
html是指超文本标记语言，它是用来描述网页的一种语言，不是编程语言，是一种标记语言；
标记语言是一套标记标签；
文本标准是由W3C组织和其他标准化组织指定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。

web标准的构成

主要包含结构（html）、表现（css）、行为（JavaScript）三个方面；

结构：用于网页元素的整理和分类，网页的结构，相当于我们的骨骼

表现：用于设置网页元素的版式、颜色、大小等外观样式，及我们可以直观看到的，相当于我们的外观；

行为：指网页模型的定义及交互的编写，相当于我们的行为动作；

HTML标签

双标签<html></html>
单标签<br/>
html标签通常是成对出现的
双标签关系可以分为两类：包含关系和并列关系
包含关系：<head>
            <title></title>
         </head>
并列关系：<head></head>
         <body></body>


html基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签）
页面的内容也是在这些基本标签上书写
html页面也称为html文档


<html></html>   HTML标签页面中的根标签(层级最大)
<head></head>   文档的头部标签（包含title等标签），我们必须要设置的标签是title
<title></title> 文档的标题标签，可以设置属于自己的网页标题
<body></body>   文档的主体元素包含文档的所有内容，页面，内容基本是放到body里面的
html文档后缀名必须是 .html 或 .htm


文档类型声明标签
 * <!DocTYPE>文档类型声明作用及时告诉浏览器使用=哪种html版本来显示网页
    *
    <!DocTYPE html>这句代码的意思是当前页面采取的事html5版来显示网页
    *
注意：<!DocTYPE>声明位于文档中的最前面的位置，处于<html>标签之前


<!DocTYPE>不是一个html标签，它就是文档类型声明标签
lang语言种类
用来定义当前文档显示的语言
en定义的语言为英语
zh-CN定义语言为中文
fr为法语
定义英文的文档可以显示中文，定义中文的文档也可以显示英文
字符集：是多个字符集的集合，使计算机能够识别和存储各种文字
在<head>标签内，可以通过<meta>标签的charset属性来规定html文档应该使用哪种字符的编码
charset常用的值有GB2312    BIG5    GBK   UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符

语义标签

学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的
html常用的标签<h></h>     标题标签<h1>~<h6>
单词head的缩写，意为头部，标题
标签语义，作为标题使用，并且根据重要性递减
标题一共六级，文字加粗一行显，由大到小依次减，从重到轻随之变，语法规范书写后，具体效果刷新见
段落和换行标签（重要）<P></p>
在html标签中，<p>标签用于定义段落，单词paragragh。意为段落
语义：可以把html文档分为若干段落
换行标签<br/>单词break  意为打断，换行。语义，强制换行
文本格式化标签
语义：突出重要性，比普通文字更重要
加粗    <strong></strong>或<b></b>
倾斜    <em></em>  或<i></i>
删除线  <del></del> 或<s></s>
下划线  <ins></ins>或 <u></u>

div和span标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的
div是division的缩写，表示分割，分区
span意为跨度，跨距
特点：
<div>标签是用来布局，但是现在一行只能放一个<div>大盒子，div默认是块标签
<span>标签用来布局，一行上可以放多个<span>小盒子，默认是行标签

img图像标签

图像标签
<imh src="图像url"/>
单词image的缩写，意为图像
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性
src      图片路径   必须属性
alt      文本    替换文本，图像不能显示的文字
title    文本    提示文本，鼠标放到图线上显示的文字
width    像素    设置图像的宽度
height   像素    设置图像的高度
border   像素    设置图像的边框粗细
<img src="图像"  alt="替换文本"/>以此类推
宽度，高度修改其一即可，会等比例缩放
图像标签注意点：
图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性，属性与属性之间均已空格分开
属性采取键值对的格式，即key=“value”的格式
属性=“属性值”

a 超链接标签

在html标签中<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
超链接语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
单词allchor缩写，意为锚
href用于指定链接目标的url地址，(必须属性），当为标签应用href属性时，它就具有了超链接的功能
target用于指定连接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

链接分类

外部链接：<a href="www.baidu.com">百度</a>
内部链接：网站内部页面之间的相互链接，直接链接，内部页面名称即可
空链接：如果当时没有指定链接目标时，<a href="#"></a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载文件
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
锚点链接：当我们点击链接，可以快速定位到页面中的某个位置，在链接文本的href属性中，设置属性值为#名字的形式
如<a href="#two">第2集介绍</a>
找到目标位置标签，里面添加一个id属性=刚才的名字
如<h3 id="two">第2集介绍</h3>
注释：如果需要在html文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签  ctrl+/
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的

表格

表格的主要作用：主要用于展示数据表格的基本语法：
<table>
     <tr>
        <td>单元格内的文字</td>...
     </tr>....
</table>

<table></table>是用于定义表格的标签
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
<td></td>标签用于定义表格中的行，必须嵌套在<tr></tr>标签中
字母td指表格数据（table data），即数据单元格的内容
表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示<th>标签表示html表格的表头部分(table head)

<table>
    <tr>
      <th>姓名<th>...
    </tr>...
</table>

表格属性：表格标签属性实际开发我们不常用，后面通过css来设置
目的有2个
记住这些英语单词后面css会使用
直观感受表格的外观形态
align    left、center、right   规定表格相对周围元素的对齐方式
border   1或“”    规定表格单元是否拥有边框，默认为“”表示没有边框
cellpadding     像素值     规定单元边沿与其内容之间的空白，默认1像素
cellspacing     像素值      规定单元格之间的空白，默认2像素
width         像素值或百分比    规定表格的宽度
如<table align="center"></table>
表格结构标签：
使用场景：因为表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域，这样可以更好地分渭表格结构
<thead></thead>用于定义表格的头部，<thead>内部，必须拥有<tr>标签，一般是位于第一行
<tbody></tbody>:用于定义表格的主体，主要用于放数据本体，以上两个标签都是放在<table></table>标签中
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的样式，它控制相邻单元格的边框
语法：
border-collapse：collapse
边框大小会影响盒子实际大小
合并单元格：
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
目标单元格（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲
先确定是跨行还是跨列合并
找到目标单元格，写上合并方式=合并单元格数量。比如：<td colspan="2"></td>
删除多余的单元格

列表标签

表格是用来显示数据的，那么列表是用来布局的
列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便
根据使用场景不同，列表可以分为三大类：无序列表，有序列表和自定义列表

无序列表

<ul>标签表示html页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
语法格式：
<ul>
   <li>列表项1</li>
   <li>列表项2</li>...
</ul>
list-style:none;去掉小圆点
无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
<li></li>之间相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式，属性，但是实际使用时，我们会使用CSS来设置

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定顺序排列定义
在html标签中，<ol>标签用于定义有序列表，列表顺序以数字来显示，并且使用<li>标签定义列表项
语法格式：
<ol>
   <li>列表项1</li>
   <li>列表项2</li>...
</ol>
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
<li></li>之间相当于一个容器，可以容纳所有元素
有序列表会带有自己的样式，属性，但是实际使用时，我们会使用CSS来设置

自定义列表

使用场景：常用于术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
在html标签中，<dl>标签用于定义描述列表（或定义列表）
该标签会与<dt><dd>一起使用
语法格式：
<dl>
   <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>...
</dl>
<dl></dl>里面只能包含<dt>和<dd>
<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

表单标签

使用表单目的是为了收集用户的信息
在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息3个部分构成
表单域是一个表单元素的区域
在HTML中，<form>标签用于定义表单域，实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action=“url地址” method="提交方式" name="表单域名称">
各种表单元素空间
</form>

action    url地址    接收并处理表单数据的服务器程序的url地址
method    get/post   设置表单数据的提交方式，取值为get/post
name      名称       指定表单的名称，以区分同一个页面中的多个表单域

表达控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件，常见的有：

input 输入表单元素
select下拉表单元素
textarea文本域元素

input输入表单

input是输入的意思，而在表单元素中<input>标签用于收集用户信息
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式，（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）
<input type="属性值"/>
<input/>标签为单标签
type属性设置不同的属性值，用来指定不同的控件类型，type属性的属性值及其描述如下:

button       定义可点击按钮（用于通过js启动家脚本）
checkbox     定义复选框file定义输入字段和浏览器按钮，供文件上传
hidden       定义隐藏的输入字段image定义图像形式的提交按钮
password     定义密码字段，该字段中的字符被掩码
radio        定义单选按钮
reset        定义重置按钮，重置按钮会清除表单中的所有数据
submit       定义提交按钮，会把表单数据发送到服务器
text         定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除type属性外，<input>标签还有其他很多属性，如下

name     由用户自定义      定义input元素的名称
value    由用户自定义      规定input元素的值
checked   checked      规定input元素首次加载时应当被选中
maxlength    正整数     规定输入字段中的字符的最大长度

name和value是每一个表单元素都有的属性值，主要给后台人员使用
name和表单元素的名字，要求单选按钮和复选框相同的name值
checked属性主要针对于单选按钮和复选框，主要作用一打开页面就要可以默认选中某个表单元素
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

text： 定义单行文本输入框，这是默认的输入类型。

<input type="text" />

password： 定义密码输入框，输入字符会经过掩码处理，表现为一连串的点。

<input type="password" />

file： 定义文件上传控件

<input type="file" />

radio： 定义单选按钮。同一组按钮，name值一定要一致。注意，radio类型的input标签无法设置padding和border样式（ie10及以下版本的浏览器除外）。

<input type="radio" />

checkbox： 定义多选按钮。同一组按钮，name值一定要一致。注意，radio类型的input标签无法设置padding和border样式（ie10及以下版本的浏览器除外）。

单选按钮和多选按钮类型的input标签支持checked特性。

<input type="checkbox" />

hidden： 定义隐藏的输入字段，用于在表单中添加对用户不可见，但需要提交的额外数据。注意，disabled特性无法与type特性值为hidden的input标签配合使用。

<input type="hidden" />

button： 定义按钮，没有任何默认行为，常用于用户点击时触发JS脚本。

<input type="button" />

image： 定义图像形式的提交按钮。该类型可以设置width、height、src、alt这四个特性。用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用。如果图片有name特性，也会随坐标发送。

<input type="image" name="isub" src="http://sa/sub.jpg" width="99" height="99" alt="图片" />

submit： 定义表单的提交按钮。

<input type="submit" />

reset： 定义表单的重置按钮。

<input type="reset" />

color： 创建一个调色板来选择颜色。颜色值以url编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的url编码。safari和ie浏览器不支持该特性。

<input type="color" />

tel： 定义一个电话输入域。外观上与单行文本框没有差异，在手机端会唤出数字键盘。

<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}" />

email： 定义一个email地址输入域，会自动验证email域的值，外观上与单行文本框没有差异，在手机端会唤出英文键盘。 email类型的input标签支持multiple特性。ie9及以下版本的浏览器以及safari浏览器不支持该类型。

<input type="email" name="email" multipl />

url： 定义一个url地址输入域，会自动验证url域的值，外观上与单行文本框没有差异。ie9及以下版本的浏览器以及safari浏览器不支持该类型。

<input type="url" />

search： 定义搜索框，外观上与单行文本框没有差异。

<input type="search" />

number： 定义数字框，特性值可为小数。在手机端会唤出数字键盘。ie浏览器不支持该类型。与之配合的特性如下所示。
max：规定允许的最大值
min：规定允许的最小值
step：规定合法的数字间隔
value：规定默认值

<input type="number" min="0" max="10" step="0.5" value="6" />

range： 定义包含一定范围内数字值的输入域，处理包含在一定范围内的数字输入。ie9及以下版本的浏览器不支持该类型。与之配合的特性如下所示。
max：规定允许的最大值
min：规定允许的最小值
step：规定合法的数字间隔
value：规定默认值

<input type="range" min="0" max="10" step="0.5" value="6" />

如果不设置min和max特性，则默认min=0，max=100。

选取日期和时间的新输入类型

<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime" />
<input type="datetime-local" />

ie和firefox这6种日期类型都不支持，chrome不支持datetime类型。要预设控件的日期和时间，可以用字符串设置value属性。

date 　　 YYYY-MM-DD
time 　　hh:mm:ss.s
datetime 　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local YYYY-MM-DDThh:mm:ss:s
month 　　　　 YYYY-MM
week 　　 YYYY-Wnn

YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数,从1月的第一周开始是1，直到52

select下拉菜单（表单元素）

使用场景：在页面中，如果有多个选项让用户选择并且想要节约页面空间时，我们可以使用<select>标签空间定义下拉列表
语法：
<select>
      <option>选项1</option>
      <option>选项2</option>...
</select>
 <select>至少包含一对<option>
在<option>中定义selected="selected"时，当前项为默认项

textarea文本域（表单元素）

<textarea> 表单元素
使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：
<textarea rows="3" cols="20">
文本内容
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小
表单元素几个总结点
表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.
这三组表单元素都应该包含在form表单域里面,并且有 name 属性

<form>
<input type=“text " name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>

label标签

<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，
浏览器就会自动将焦点转到或者选择对应的表单元素用来增加用户体验
语法：
<label fox ="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心：<label>标签的for属性应当与相关元素的id属性相同

特殊字符

空格符 &nbsp;       <小于号&lt;            >大于号&gt;     &和号  &amp；
￥人民币&yen;         版权&copy;          注册商标&reg;
摄氏度&deg；      正负号&plusmn;        *乘号&times;     除号&divide;
平方&sup2；    平方3&sup4;

路径

相对路径

目录文件夹和根目录
根目录：打开目录文件夹第一层就是根目录
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
简单来说：图片相对于html页面的位置
同一级路径     ./<img src="baidu.gif"/>
下一级路径:    /<img src="images/baidu.gif"/>
上一级路径：   ../<img src="../baidu.gif"/>

绝对路径

是指目录下的绝对位置，通常从盘符开始的路径
例如：D：\web\img\logo.gif   或完整的网络地址