HTML学习笔记

橘颂_Wendy

已于 2022-08-01 19:31:54 修改

阅读量641

点赞数

分类专栏：前端开发学习笔记文章标签： html 学习

于 2022-07-10 15:24:33 首次发布

本文链接：https://blog.csdn.net/weixin_46121269/article/details/125594314

版权

文章目录

一、 HTML简介
二、HTML基本结构
三、HTML常用标签
四、表格
- 1.基础表格
- 2.表格中的合并
五、表单
六、框架

一、 HTML简介

超文本标记语言。
超文本：超越了普通文本文档，可以添加一些普通文本文档做不了的事，比如：图片。视频。表格等等。
标记语言：包含一系列标签，意思就是文字有文字标签，图片有图片标签。

【浏览器内核】(排版引擎、解释引擎、渲染引擎)

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	webkit	苹果浏览器内核
chrome/Opera	blink	chrome/Opera 浏览器内核，blink其实是webkit的分支

问题：HTML是不是编程语言

1.HTML就是一种超文本标记。

2.HTML不能写一些逻辑代码

3.HTML不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

网页的构成标准:

1.基本结构: 网页的基础轮廓

2.样式: 网页的元素大小,以及颜色

3.交互:页面与用户的互动,或者说是行为.

对应的前端技术:

1.HTML负责基础结构,就是网页上有什么.

2.CSS负责网页看起来是什么样子.

3.JavaScript负责网页与用户的交互,比如爱奇艺的首页.

HTML：预定义标签

XHTML：自定义标签

HTML5: 预定义标签，自定义标签.

面试题：XHTML与HTML5的区别

1.XHTML自定义标签。HTML5里面包含预定义标签。
2.XHTML语法更严格，必须使用小写。标签必须有闭合语句，属性值必须加上双引号
3.HTML5语法比较宽松

HTML5自定义标签

<!DOCTYPE html>
<html lang="en" xmlns="zdy">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        zdy\:dybt{
     
                display: block;
                font-size: 2em;
                margin-block-start: 0.67em;
                margin-block-end: 0.67em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
                font-weight: bold;
            }
    </style>
    
</head>
<body>
    <h1>大漠孤烟直</h1>
    <zdy:dybt>长河落日圆</zdy:dybt>
    <hr color="red" width="100%" size="5px"/>
</body>
</html>

二、HTML基本结构

文件结尾：.html或者.htm

HTML结构

html4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

DTD(Document Type Definition): 文档类型声明

DTD是一个指令(说明), 作用是用来告诉浏览器,当前文档使用的语言规范以及其版本. 方便浏览器以更高效合适的方式对网页文档内容进行解释和渲染展示.

问题: 如果html文件不写DTD,网页可以执行吗?

答案: 可以,但是,会处于怪异模式

标准模式（严格模式)： html文档正常声明DTD,浏览器严格按照DTD声明的标准解析展示HTML效果。

怪异模式(混杂模式): 如果html文档未做DTD, 则浏览器会按照自己的内核预设置的标准进行HTML文档效果展示.由于不同浏览器内核不统一,所以会出现在不同浏览器,展示效果不统一,不一致. 还会存在版本约束冲突的问题.

怪异模式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
     
            width: 200;
            height: 200;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.HTML结构标签详解：

声明文档类型。如果不声明。也可以执行。只不过会产生怪异模式。

1.1 html标签（文档标记）

html表示整个网页，我们所书写网页内容都应该写到html标签中.

lang : language 语言的意思

en:表示页面为英文

ch-zn：表示页面为中文

一般可以忽略。

1.2 head标签（头部标记）

<head>
    <meta charset="UTF-8"></meta>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
</head>

1.3 title 网页标题标签（标题标记）

<title></title>

头部文件，我们可以设置网页的编码格式,设置网页的标题以及其他的元信息,并且还可以进行外部的CSS文件和JS文件的引入.

1.4 body标签（主体标记）

body标签一般用来存放我们在网页上显示的内容。

<body> 
    这是body里面的内容。就是为了显示在页面当中
</body>

body标签背景相关属性

属性名	解释说明
background	设置body的背景图片
bgcolor	设置body的背景颜色

动态文本标记

<marquee></marquee>

1.5 meta标签（元数据标签）

我们一般进行网页信息设置,都会通过使用元数据标签进行设置

规定网页的初始化效果

<!--例如: 设置网页字符编码-->

<meta charset="utf-8">
<!--utf-8 ：万国码-->

<html lang="en">
<head>
    <!-- 设置网页编码集 -->
    <meta charset="UTF-8">
    <!-- 设置网页关键字   简洁  明确 -->
    <meta name="keywords" content="更高  更快  更强">
    <!-- 设置网站简介 -->
    <meta name=