全方位学习超文本标记语言——HTML

最新推荐文章于 2023-12-14 17:04:35 发布

御弟謌謌

最新推荐文章于 2023-12-14 17:04:35 发布

阅读量224

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/abraham_ly/article/details/109320169

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

系统学习超文本标记语言——HTML

一、网页简介？

网页是因特网上可以访问的信息页。网页由文字、图像、音频、视频、超链接等元素组成。

二、HTML简介

1、HTML？

HTML是用来描述网页的一种语言

HTML全称（Hyper Text Markup Language），指的是超文本标记语言
HTML不是C、Java、Python这样的编程语言，而是一种标记语言
HTML使用标记标签来描述网页

2、HTML文档？

以 .html 或 .htm为后缀的文件称之为HTML文档

HTML文档包含了HTML标签及其文本内容
HTML文档也叫Web页面

3、HTML标签？

HTML标记标签通常被称为HTML标签（HTML tag）

HTML标签是由尖括号包围的关键词
```
<html>
```
HTML标签通常是成对出现的
```
<html>内容</html>
```
标签对中的第一个标签是开始标签，第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签

三、浏览器内核

1、内核介绍

浏览器内核也称为“渲染引擎”，主要用于解析HTML语法并进行渲染。W3C（万维网联盟）虽然规定了Web标准，但最终还是浏览器内核决定浏览器该如何显示网页内容以及页面的格式信息。不过，除了IE以外，目前主流的浏览器内核都已经比较完美的支持W3C标准了。

2、主流浏览器内核

浏览器	内核
IE	Trident
火狐	Gecko
谷歌	blink
苹果	webkit
欧朋	blink

四、Web标准

1、定义

Web标准是一个由W3C（欧洲万维网联盟）研发的一种Web标准，它由结构（HTML），样式（css）和行为（js）组成

2、为什么要Web标准？

对于浏览器开放商和web程序开发人员在开发新的应用程序时遵守指定的标准更有利于web更好的发展。开发人员按照Web标准制作网页，这样对于开发者来说更加简单了，因为他们可以很容易了解彼此的编码，并且使用Web标准，将确保所有浏览器正常显示您的网站而无需费时重写。遵循标准的Web页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码。

五、HTML结构

1、根标签

<html></html>

2、头部标签

<head></head>

3、主体标签

<body></body>

4、标题标签

<title></title>

5、标签的关系

嵌套关系

<html>
	<head></head>
</html>

并列关系

<head></head>
<body>></body>

6、标签的分类

双标签

<title><title>

单标签

</br>

7、html 中一些格式的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

DOCTYPE

声明文档类型，告知浏览器要按照html的语法规则去解析
lang=“en”

页面的语言类型
charset=“UTF-8”

编码格式，起到翻译的作用

六、HTML常用标签

1、标题标签h

标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

特点

①标题的部分用标题标签

②文字加粗、加黑了

③标题标签h1-h6

④页面中只能有一个h1标签

2、段落标签p

<p></p>

3、水平线标签

</hr>

4、换行标签

</br>

5、文字标签

<span></span>
<!--在一行显示-->

6、盒子标签

<div></div>
<!--在一列/换行显示-->

7、文字类标签

倾斜标签	或
加粗标签	或
下划线标签	或
删除线标签	或

8、图像标签

格式

<img src="url" alt="">

属性

属性	说明
src	图像的路径（来源）
alt	当图像加载错误是显示的文字
title	当鼠标悬停在图像上显示的文字
width	图像的宽度
height	图像的高度
border	图片的边框

属性的特点

①属性之间不分先后顺序

②属性名与属性值之间以键值对的形式存在

③属性名与属性值之间以等号分隔，属性值要以引号包裹

<img src="./../images/小狗.jpg" alt="这是一只小狗" title="点击查看" width="200" height="100" border="1">

9、链接标签

<a href="跳转目标" title="鼠标悬停时显示的文字" target="窗口的弹出方式"></a>

属性

属性	描述
href	跳转指定的页面
title	鼠标悬停显示的文字
target	设置窗口的弹出方式。_self(默认会覆盖原本的窗口)，_blank(会以新的窗口打开)
#	会阻止页面跳转，但是会刷新页面

分类

①外部链接

<a href="http://www.baidu.com">百度一下</a>
<!--写完整的 协议 域名 网址-->

②内部标签

<a href="根目录下的某个html文件">新闻页面</a>

③空链接

<a href="#">首页</a>
<!--没有确定的链接目标-->

④下载链接

<a href="压缩包.zip">源码</a>
<!--地址是一个文件或压缩文件，那么会下载这个文件-->

⑤网页元素链接

<a href="http://www.baidu.com"><img src="图标.jpg" alt="图标"></a>

⑥锚点链接

<a href="#id属性值"><h4>出生年月</4></a>
<!--找到目标的标签，在该标签的后边添加一个id属性=属性值-->
<p id="year">出身年月</p>

七、路径

相对路径

说明：从当前文件出发，在同一个根目录下找文件

向上一级：…/

向下一级：/
```
 <img src="./../images/首页.png">
```
绝对路径

说明：从当前文件的根目录所在的盘符出发，依次往下，直到找到当前文件
```
 <img src="E:\前端学习\HTML\源码\01-2020.10.21\作业\03-路径\image1\image2\image3\图2.jpg">
```

八、列表

1、有序列表

在网页上定义一些有编号的列表内容，比如去1，2，3。那么就可以使用

和
标签配合使用

<ol>
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容3</li>
</ol>

2、无序列表

在网页上定义一系列无编码的内容列表，那么可以使用

和
标签配合使用。此时在网页上生成的列表的前面都会有一个小图标，这个小图标在不同浏览器上的效果会有所不同，所以一般会用样式去掉默认的小图标。如果需要图标，可以用样式自定义一个图标，从而达到不同浏览器上效果相同的目的。在实际开发中这种列表会经常使用。

<ul>
    <li>新闻标题1</li>
    <li>新闻标题2</li>
    <li>新闻标题3</li>
</ul>

3、定义列表

定义列表通常用于术语的定义。

标签表示列表的整体，标签定义术语的题目，

标签是对术语的解释。定义列表不仅仅是一个项目，而是项目和解释的组合。

<dl>
    <dt>术语题目1</dt>
    <dd>术语题目1的解释</dd>
    <dt>术语题目2</dt>
    <dd>术语题目2的解释</dd>
    <dt>术语题目3</dt>
    <dd>术语题目3的解释</dd>
</dl>

九、表单

表单用于搜集或获取不同类型用户输入的数据，表单由不同类型的标签控件组成。相关标签及其用法如下：

1、<form>标签

定义整体的表单区域

action属性：定义表单数据提交的地址
method属性：定义表单提交的方式，一般有"get"方式和"post"方式

get 方式和 post 方式的区别？

get（默认）	post
请求参数会出现在地址栏中	请求参数不会出现在地址栏中
传送的数据量较少	传送的数据来较多
从服务器中获取数据	向服务器传送数据
安全性低	安全性高

2、<label>标签

为表单（input）元素定义文字标注

for属性：与关联控件的id属性值相同，此时点击label控件中的文字，就会将鼠标焦点转变到该关联的控件上

3、<input>标签

定义通用的表单元素或类型

type 属性

类型	描述
text	定义单行文本输入框
password	定义密码输入框
radio	定义单选按钮
checkbox	定义复选按钮
file	定义上传文件按钮
submit	定义提交按钮
reset	定义重置按钮
button	定义不同按钮
image	定义图片提交按钮，src属性定义url
hidden	定义隐藏表单域，用于存储值

value属性

定义表单元素的值
name属性

定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签

定义多行文本输入框

cols属性：定义文本输入框的列值
rows属性定义文本输入框的行值

<textarea name="多行文本框" id="" cols="30" rows="10"></textarea>

5、下拉菜单

<select>标签和<option>标签配合使用，可以定义下拉菜单中的元素选项

 <select >
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
 </select>

6、注册表单综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<body>
    <h4>表单注册</h4>
    <!-- 表单区域 -->
    <form action="#">
        <!-- 账户：文本框区域 -->
        <p>
            <label for="text" id="text">
            账户：<input type="text" id="text" name="username">
            </label>
        </p>
        <!-- 密码：密码框 -->
        <p>
            <label for="password" id="password">
                密码：<input type="password" id="password" name="password">
            </label>
        </p>
        <!-- 性别：单选按钮 -->
        <p>
        <label for="">性别：</label>
        <input type="radio" name="sex" value="0">男
        <input type="radio" name="sex" value="1">女
        </p>
        <!-- 爱好：复选按钮 -->
        <p>
        <label for="">爱好：</label>
        <input type="checkbox" name="like" value="sing">唱歌
        <input type="checkbox" name="like" value="run">跑步
        <input type="checkbox" name="like" value="swimming">游泳
        </p>
        <!-- 照片：上传按钮 -->
        <p>
            <input type="file" name="persion_pic">
        </p>
        <!-- 个人描述：文本域 -->
        <p>
            <label for="">个人描述</label>
        </br>
            <textarea name="" id="" cols="20" rows="5" name="about"></textarea>
        </p>
        <!-- 籍贯：下拉菜单 -->
        <p>
            <label for="">籍贯：</label>
            <select name="sict" id="">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">西安</option>
            </select>
        </p>
        <!-- 提交和重置：提交重置按钮 -->
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

十、表格

1、<table>标签

用于声明一个表格，常用属性如下：

border属性：定义表格的边框，数值类型
cellpadding属性：定义单元格与内容之间的距离，数值类型
cellspacing属性：定义单元格与边框之间的距离，数值类型

2、<tr>标签

定义表格中的一行

3、<td>和<th>

定义一行中的一个单元格，<td>表示普通单元格，而<th>表示表头单元，会有加粗的效果。他们的常用属性如下：

align属性：设置单元格中内容的水平对齐方式，值为left、center、right
valign属性：设置单元格中内容的垂直对齐方式，值为top、middle、bottom

4、单元格合并

跨列合并

在表格中，两列中左右连接的单元格合并为跨列合并，使用colspan属性进行合并，colspan=“合并的单元格数量”，此时要删除的单元格数量=合并的单元格数量-1
跨行合并

在表格中，两行中上下连接的单元格合并为跨行合并，使用rowspan属性进行合并，rowspan=“合并的单元格数量”，此时要删除的单元格数量=合并的单元格数量-1

十一、页面布局概述

页面布局也叫做排版，是指将文字和图像等元素按照我们的意愿有机的排列在一个页面中，布局的方式为两种：

1、table布局

通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。

2、HTML+CSS（div+css）布局

主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

十二、table布局实例

table来做整体页面的布局，布局的技巧归纳为如下几点：

1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。

2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。

3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。

4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式

5、通过属性或者css样式设置单元格中元素的样式

御弟謌謌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
全方位学习超文本标记语言——HTML

系统学习超文本标记语言——HTML目录系统学习超文本标记语言——HTML一、网页简介？二、HTML简介1、HTML？2、HTML文档？3、HTML标签？三、浏览器内核1、内核介绍2、主流浏览器内核四、Web标准1、定义2、为什么要Web标准？五、HTML结构1、根标签2、头部标签3、主体标签4、标题标签5、标签的关系6、标签的分类7、html 中一些格式的作用六、HTML常用标签1、标题标签h2、段落标签p3、水平线标签4、换行标签5、文字标签6、盒子标签7、文字类标签8、图像标签9、链接标签七、路径八、
复制链接

扫一扫