前端学习【HTML学习】

最新推荐文章于 2023-03-14 09:00:00 发布

_Vrtual .

最新推荐文章于 2023-03-14 09:00:00 发布

阅读量345

点赞数 3

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_61466362/article/details/122496080

版权

一、HTML初识

1、什么是网页？

网站：网站指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页：网页是网站中的一“页”，通常是HTML格式文件，它要通过浏览器来阅读。

网页是网站构成的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常以.htm或.html后缀结尾的文件，因此将其称为HTML文件。

2、什么是HTML？

HTML指的是超文本标记语言,它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言。标记语言是一套标签。

超文本的两层含义：

（1）：它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）。

（2）：它可以从一个文本跳转到另一个文件，与世界各地主机的文件连接（超链接文本）。

网页小结

网页是图片、链接、文字、视频、声音等元素组成，其实就是一个HTML文件。

网页的制作：有前端人员写HTML文件然后浏览器打开就看到了网页。

HTML：超文本标记语言

用来制作网页的一门语言，由标签组成的，比如图片标签、链接标签、视频标签等。

3、web标准

web标准是由WSC组织和其他标准化组织制定的一系列标准的合理。

WSC是国际最著名的标准化组织。

为什么需要web标准？

因为浏览器不同，它们显示页面或排版有些许不同。

web的构成：主要包括结构、表现、形为三部分。

1、结构：用于对网页元素进行整理和分类，现阶段主要为HTML。

2、表现：用于设置网页元素的版式、颜色大小外观，主要为css。

3、形为：指一网页模型的定义及交互的编写，现为学js。

web标准提出最佳方案：结构、样式、行为相分离。

4、HTML的语法规范

包括在“< >”中，并且标签一般都是成对出现，

例： <html> </html>（一对标签）

开始标签结束标签

还有单标签<br/> 但非常少。

（1）HTML标签是由尖括号包围的关键字。

（2）通常为成对出现。

（3）特殊也有单标签。

5、标签关系

双标签关系可以范围两类：包含关系和并列关系。

包含关系

<head>

<title></title>

</head>

并列关系

<head></head>

<body></body>

6、VSCode工具生成骨架标签新增代码

书写HTML文件常用工具即为VSCode

（1）<!DOCTYPE>标签：文档类型声明标签

作用：告诉浏览器使用哪种HTML版本来显示网页。

例：<!DOCTYPE html> 当前页面使用HTML5版本来显示网页。

注意：<!DOCTYPE >声明处于文档最前位置，处于<html>标签前。

<!DOCTYPE >不是HTML标签，它就是文档类型声明标签。

（2）lang语言种类

作用：用来定义当前网页显示语言。

en定义语言为英文。
zh-CN定义语言为中文。

（3）字符集

字符集是多个字符的集合以便于计算机能够识别和存储各种文字。

在<head>标签内可以通过<meta>标签的charset属性来规定html文档一个使用哪种字符编码。例：<meta charset="UTF-8"/> 不写可能会引起乱码的情况。

charset常用到的有：GB2312、BIG5、GBK和UTF-8。

UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

二、HTML基本标签

标签语义：标签含义即标签是用来干嘛的

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰。

1、标题标签 <hl-h6>

为了使网页更具语义，常在页面使用到标题标签。

HTML提供了6个等级的网页标签，即<h1-h6>

语法格式 <h1>一级标题</h1>

标签语义：作为标题使用，并依据重要性递减。

特点：1、加了标题标签的文字会变得加粗，字号也依次变大。

2、一个标题独占一行。

2、段落标签和换行标签

段落标签

在网页中要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中<p>标签用于定义段落，它可以将网页分为若干段。

语法格式: <p>段落</p>

特点：1、文本在一个段落中会自动根据浏览器窗口大小换行。

2、段落和段落之间有一定大小的空隙。

换行标签

在HTML中，一个段落中文字会从左到右排序直到窗口右端才会自动换行，如果希望一段文字强制换行就需要换行标签。

语法格式： <br/>

特点：1、<br/>为单标签。

2、<br/>只是换行。

3、文本格式化标签

在网页中有时需要文字设置粗体、斜体、下划线等效果，这就需要文本格式化标签。

标签语义：突出重要性，比普通文字重要。

4、图像标签和路径

在HTML标签中<img>标签用于定义HTML页面中图像<img src="图像URL">

src为<img>的必须属性，它用于指定目标文件的路径和文件名

图像标签的属性：

注意：

可以拥有多个属性，写在标签名后。
属性不分前后，属性与属性用空格分开。
属性采取键值对的格式，即key=“value”（属性=“属性值”）。

路径分类：相对路径绝对路径

1、相对路径：以引用文件所在位置为参考基础而建立的目录路径。

相对路径分类：

同一级路径：<img src="b.jpg"/>
上一级路径：<img src="images/b.jpg/">
下一级路径：<img src="/b.jpg"/>

2、绝对路径：目录下的绝对位置，直接达到目标位置。

5、超链接标签

在HTML标签中<a>标签定义超链接，作用为从一个页面链到另一个页面。

语法格式：

<a href="跳转目标" target="目标窗口弹出方式"> 文本或图像</a>

href:用于指定链接目标的url地址。（必须属性）当为标签应用href属性时，它就具有了超链接功能。

target：用于指定链接打开方式，其中_self为默认值，_blank为在新窗口打开方式。

链接分类

外部链接 <a href="http://www.baidu.com">百度</a> (target 打开窗口方式)
内部链接<a href="index html" >首页</a>(网站内部页面之间相互连接)
空链接 <a href="#">首页<a> (当前没有确定页面)
下载链接（href是地址为文件或压缩包下载）
网页元素链接 （在网页中各种网页元素）
锚点链接 （点击链接快速到某个位置）

锚点链接：

首先在链接文本的href属性中，设置属性值为#名称的形式，如<a href="#two">第二条</a>

其次找到目标标签<h3 id="two">第二</h3>

6、注释标签

语法格式：

特殊字符：

7、表格标签

1、表格的主要作用：用来展示数据、显示数据。

2、表格的基本语法

<table>

<tr>

<td>单元文案</td>

</tr>

.........

</table>

[

<table></table>用于定义表格的标签

<tr>定义表格行

<td>定义表格单元格

]

8、表头单元格标签：表头单元格文字都加粗居中显示（<th>标签）

bgcolor：规定表格边框的宽度。

cellpadding：规定单元边沿与其内容之间的空白

cellspacing：规定单元格之间的空白。

frame：规定外侧边框的哪个部分是可见的。

rules：规定内侧边框的哪个部分是可见的。

summary：规定表格的摘要。

width：规定表格的宽度。

9、表格结构标签

因为标签特别长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

<thead>标签表格头部 <tbody>标签表格主体

10、合并单元格

合并单元格的方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格个数”

目标单元格<写合并代码>

跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最右侧单元格为目标单元格，写合并代码。

合并单元格三部曲

跨行/跨列
找目标单元格<td colspan=“2”></td>
删除多余单元格

11、列表标签

列表是用来布局的

列表最大的特点为整齐、有序，作为布局自由、方便。

列表分类：无序列表、有序列表、自定义列表

1、无序列表

<ul>标签表示html页面中项目的无序列表、一般会以项目符号显示列表项，而列表项使用<li>标签。

语法格式：

<ul>

........

</ul>

注意：

各列表项无级别之分
<ul>中只能有<li>标签
<li>中可以放任何元素标签
无序列表有自己的样式属性

2、有序列表

语法格式：

<ol>

........

</ol>

注意：

各列表项无级别之分
<ol>中只能有<li>标签
<li>中可以放任何元素标签
有序列表有自己的样式属性

3、自定义列表

语法格式：

<dl>定义列表 <dt>定义项目名称 <dd>描述每个项目名字

<dl>

</dl>

注意：

<dl>中只能有<dd> <dt>
<dd> <dt>无个数限制

12、表单

为什么需要表单？

为了收集用户信息。

1、表单的组成

表单域、表单控件、提示信息

2、表单域：一个包含表单元素的区域

<form>标签两个最重要的属性：action 和 method

input的type类型有很多，这里有text和password两种

button的type类型默认为submit，另外还有button, reset类型

语法格式：

<form action="url地址" method="提交方式" name="表单名">

各种表单元素控件

</form>

3、input 之type属性

input输入表单元素（单标签）

<input>标签用于收集信息

13、label标签

label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。
这里写图片描述


<input type='checkbox' name='basket' id='basketball'>   
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>   
<label for="football">足球</label

14、select下控表单元素

作用: 用于定义下拉列表

格式:
<select>
<option>列表数据1</option>、

注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

15、textarea文本域标签

当用户要输入内容较多时，用textarea文本域标签。

语言格式：

<textarea rows="3" cols="20">

文本内容

</textarea>

1、cols，垂直列。在没有做样式表设置的情况下，它表示一行中可容纳下的字节数。例如cols=60，表示一行中最多可容纳60个字节，也就是30个汉字。另外要注意的是，文本框的宽度就是通过这个来调整，输入好cols的数值，然后再定义输入文字字体的大小（不定义的话，会采用默认值），那么文本框的宽度就确了。（宽度根据每行最多可容纳的字数与字体大小来确定）

2、rows，水平列。表示可显示的行数，例如rows=10，表示可显示10行。超过10行，则需要拖动滚动条来浏览了。（同上，文本框的高度就是通过这个来控制的。）

累死了！！！

_Vrtual .

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习【HTML学习】

一、HTML初识1、什么是网页？网站：网站指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页：网页是网站中的一“页”，通常是HTML格式文件，它要通过浏览器来阅读。网页是网站构成的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常以.htm或.html后缀结尾的文件，因此将其称为HTML文件。2、什么是HTML？HTML指的是超文本标记语言,它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。
复制链接

扫一扫