前端开发学习笔记-HTML篇

最新推荐文章于 2024-10-15 15:40:50 发布

原创最新推荐文章于 2024-10-15 15:40:50 发布 · 432 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端开发

本文主要介绍了HTML的基本概念，包括HTML在网页结构中的角色，W3C和WHATWG的区别，以及HTML的基本构成和常用标签，如段落、标题、链接、图片、表格、列表和表单元素等。

一、何为HTML

HTML：超文本标记语言，负责构建网页的结构(超文本即超链接)

二、网页的构成

网页由三部分构成

HTML：通过一系列标签来搭建网页结构（骨骼）
CSS：通过样式表来负责网页的样式表现（皮肤+外貌）
JavaScript：指定网页的动作（大脑，指挥身体的行动）

三、W3C和WHATWG

W3C(万维网联盟)：定义HTML CSS HTTP XML等标准
WHATWG(网页超文本应用技术小组)：推进了HTML5

四、HTML的基本构成

<!DOCTYPE html>-----声明使用的html版本(h5后此声明适用于所有的html版本)
<html>

声明文档包含的信息使用html编写的；

所有的网页内容都包含于其中；

一个页面中只能有一个html标签；

包含head、body两个子标签
<head>

表示网页的元数据；

作为html的子元素出现；

一个网页中只有一个head标签；

包含meta、title等子标签；

内部样式表和外部样式表的引入写在该标签内；

... ...(由于未系统学完，后续应该还有其他子标签，再一一补齐

4. <body> ---用于设置网页的主体；是html的子标签

五、标签的语法

双标签：<标签名称>标签内容</标签名称>
单标签：<标签名称/>标签内容

六、常见的标签

1. <html> 详见上四第2条；

2. <head> 详见上四第3条；

3. <title> ：表示网页标题，在网页的标题栏显示，如下图所框出部分

4. <body> 详见上四第4条；

5. <p>段落标签

表示网页中的一个段落；

属于块元素，可设置宽高边框等属性；

默认有16px的外边距值；

6. <span>

划分区域的标签，无实际意义；

属于行内元素，不能设置宽高属性；

7. <div>

划分区域的标签，没设置样式时无实际意义；

属于块元素，可设置宽高边框等属性；

div里的内容也自成一行；

div和p标签的区别：div默认没有外边距值；

在网页的分栏布局里起到重要作用；

在浮动、盒子模型里应用很多；

8. <h1>~<h6>

能表示六级标题标签；

<h1>重要级别最高，<h6>最低；

一般使用到 <h3>就不再继续使用<h4~h5>了；

各级标题的字体大小如下图所示：

9. <hr>

在页面中打印水平；

可以将页面划分为上下两部分；

10. <b>或<strong>

加粗标签；推荐使用<strong>

11. <em>或<i>

倾斜标签；

12. <br/>

强制换行；

13. <a>

超链接标签；

属性：href——引入超链接的访问地址；

target——表示超链接打开的窗口位置，有两个值 _self(默认值，表示在当前窗口打开)和 _blank(表示在新的窗口打开)；

title——超链接标题，当鼠标滑过超链接时的提示信息；

14. <img>

图片标签，用于向网页添加外部图片；

属性：src——指向图片所在路径；图片路径以下几种形式

绝对路径：从图片所在的盘符写起，一直写道当前文件夹下的图片名称+扩展名

相对路径：a.当当前文件与目标文件在同一目录下时，直接书写目标文件的文件名+扩展名；例如<img src="pic.png">
b.当当前文件与目标文件所处的文件夹在同一目录下时，书写文件的文件夹名/目标文件文件名+扩展名；例如<img src="img/pic.png">
c.当当前文件所在的文件夹与目标文件在同一目录下时，写法如下： ../目标文件文件名+扩展名；例如<img src="../pic.png">

alt——图片的描述信息，当因故加载不出图片时就会出现alt值；

title——图片标题，当鼠标滑过图片时的提示信息；

width——声明图片的宽度；

height——声明图片的高度；

15. table

表格标签，用于显示数据；

下图为一个2行×3列的表格：

<tr> 行标签；<td> 列标签

*生成表格的快捷键：table>tr*x>td*y+enter——生成x列，y行的表格

表格的属性：

width——单元格的宽度；

height——单元格的高度；

border——单元格的边框样式；

bordercolor——单元格的边框颜色；

bgcolor——表格的背景色；

cellspacing——单元格与单元格之间的间距；

cellpadding——单元格与内容之间的空隙；

对齐方式——align="left/center/light"；

合并单元格属性：colspan="所要合并的单元格的列数" ——合并列

rowspan="所要合并的单元格的行数" ——合并行

合并之后需要删掉多余的单元格；

16. 列表list

① 无序列表

语法: <ul type="">
<li>无序列表</li>
<li>无序列表</li>
</ul>
注：<ul type="disc">：实心圆标
<ul type="circle">：空心圆标
<ul type="square">：实心方块

② 有序列表

语法 : <ol type="">
<li>有序列表</li>
<li>有序列表</li>
</ol>
注：type的值：1(数字编序) A/ a(大/小写字母) I/i(大/小写罗马数字)
若<ol type="a" start="数字">，表示a后的第X个字母开始编号，当X大于等于27 时，会成为两位字母编号形式

③自定义列表

语法: <dl>
<dt>可以是文字或图片</dt>
<dd>相关文字</dd>
</dl>

17. 表单<input>

作用：收集用户信息；

语法：<form method="post/get" action="">

</form>

分类：

文本框： type="text"；

密码框： type="password"；

单选按钮：type="radio"；

复选按钮：type="checkbox"；

提交按钮：type="submit"；

重置按钮：type="reset"；

图片按钮：type="image" 相当于一个图片按钮；

上传文件：type="file"；

隐藏字段：type="hidden"；

下拉列表：<select><option></option></select>；

文本域：<textarea>；

字段集：

表单属性：

value：表示文本框或按钮信息，输入信息时不会被覆盖

placeholdder：提示文本，输入信息时会被覆盖

name：组名，给要进行选择的一组选项附加的，便于js查看及传送信息

id：由程序员起，用于和label标签搭配使用

label：设置选项文字也可选中

eg. <input type="radio" name="sex" id="woman">

disabled：禁用

onlyread：只读

checked：选中

select/option支持的属性
size：显示几个
multiple：选多个
textarea支持的属性

cols---可输入的文本列数
row---可输入的文本行数
width：文本框宽度
height：文本框高度
esize:none-----使文本域大小固定
resize:vertical---水平方向可改变文本框大小
resize:horizontal---垂直方向可改变文本框大小
文本框的预置内容要放在标签之间，而非在标签内部定义value值并且会显示空格，换行等字符