本文详细介绍了HTML的基础知识，包括HTML5的文档类型、语言属性lang、字符集charset、常用标签如DOCTYPE、lang、charset、img、链接a、表单元素input、textarea、以及表单的提交方式GET和POST。还探讨了字符集、meta属性、CSS中的1px与设备像素比、浏览器渲染等概念，并提供了实例和练习。
文章目录
一.介绍HTML
1. html概述
HTML是HyperText Markup Language（超文本标记语言）的缩写
-
语言：用来交流的工具
-
超文本：页面内可以包含图片、链接、音乐、视频等非文字元素
-
标记：一种标识符，可以告诉浏览器如何显示其中的内容；
- 标签是由<>包围的关键词，通常成对出现，分为标签开头和标签结尾。（部分标签是单标签）
- 标签分为三部分:标签名称，标签内容，标签属性
tips：
-
HTML 不是一种编程语言（HTML中没有变量，流程控制等），而是一种标记语言（markup language）
-
标记语言是一套标记标签 (markup tag)
如：
<b>我是你爹</b> -
HTML 使用标记标签来描述网页
-
HTML文档也叫做 web 页面
2.HTML元素标签分类
- 常规元素(双标签)
- 空元素(单标签)
常规元素(双标签)
<标签名> 内容 </标签名> 比如<body>我是文字</body>
空元素(单标签)
<标签名 /> 比如 <br />或<br>
3.HTML标签关系
-
嵌套关系父子级包含关系
-
并列关系兄弟级并列关系
-
- 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。
二、常用标签
1.文档类型DOCTYPE
**「文档类型」**用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。
2.页面语言lang
2.1 lang的用法
lang指定该html标签内容所用的语言
<html lang="en">
en 定义语言为英语
zh-CN定义语言为中文
2.2 lang的作用
- 根据根据lang属性来设定不同语言的css样式，或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别
3.字符集charset
3.1定义
字符集(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
- UTF-8是目前最常用的字符集编码方式
- 让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。
<meta charset="UTF-8" />
3.2meta属性（name 和 http-equiv）
3.2.1name属性的取值
-
keywords(关键字) 告诉搜索引擎，该网页的关键字
-
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
-
viewport(移动端的窗口)
-
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
-
author(作者)
-
generator(网页制作软件）
-
copyright(版权)
-
viewport的用法
通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。
在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。
3.2.2 http-equiv有以下参数
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
-
content-Type 设定网页字符集(Html4用法，不推荐)
-
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
-
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
-
Refresh(刷新),自动刷新并指向新页面。
-
cache-control（请求和响应遵循的缓存机制）
例子：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale=1 minimum-scale=1 user-scalable=no>
<!--
1.viewport标记，用于指定用户是否可以缩放Web页面.
2.width和height 分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度.
3.initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面.
4.maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制，值的范围为0.25~10.0之间。
5.user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图，值为yes时允许用户进行缩放，值为no时不允许缩放。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--1.用以声明当前页面用chrome内核来渲染。-->
<!--
这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。 -->
<!-- 2. 为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。
<meta http-equiv="x-ua-compatible" content="IE=edge" >
-->
<!-- 3.多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
-->
扩展知识：
1.css中的1px并不等于设备的1px
在移动端浏览器中以及某些桌面浏览器中， window对象有一个devicePixelRatio属性（设备像素比），它的官方的定义为：设备分辨率和设备独立像素的比例，也就是 devicePixelRatio = 设备的物理像素（分辨率） / 独立像素（实际css中像素）。独立像素也就是设备的宽度（device-width），device-width = 设备分辨率/devicePixelRatio(设备像素比) 。
2.浏览器的渲染：
| 浏览器版本 | 结果 | 描述 |
|---|---|---|
| Windows Store app或Windows UI中的浏览器 | IE 10 标准模式 | 这是Windows Store app和Windows UI中唯一支持的模式 |
| Internet Explorer for the Desktop 或者 Internet Explorer 9 | IE9 标准模式 | 这正是x-ua-compatible指定的模式，而且浏览器支持这种模式 |
| Internet Explorer 8 | IE8 标准模式 | 因为浏览器不支持IE9标准模式，所以使用浏览器支持的最高标准模式 |
| Internet Explorer 7, Internet Explorer 6 或者 Internet Explorer 5.5 for mac | IE5 (Quirks)模式 | 这些浏览器不支持这个标签头，并且网页中也没有指定<!DOCTYPE> |
4.其他标签
- 标题标签h(h1~h6)
- 段落标签p,可以把 HTML 文档分割为若干段落
- 水平线标签hr
- 换行标签br
- div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
- b和strong 文字以粗体显示
- i和em 文字以斜体显示
s和del 文字以加删除线显示- u和ins 文字以加下划线显示
5.图像标签img
<img src="D:/web/note/img/640.png" width="500" height="300" border="3" title="这是绝对路径" />
效果：
5.1.路径
5.1.1相对路径：
5.1.2.绝对路径：
在电脑的哪个地方或者哪个网址
<img src="C:/Users/cccwww/Pictures/html学习笔记/640.png" width="500" height="300" border="3" title="这是绝对路径" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/y7EkeCWAzmrC7zFuibKPfkDKFUfyH6IibvRnVibwMPVz0xv1K2EqzYRWEa6bVhZuTib8vxaTsBKuow67JT0Ghuy0icw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" width="500" height="300" border="3" title="这是绝对路径" />
6.链接标签
1.基本用法
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self" 默认窗口弹出方式
target="_blank" 新窗口弹出
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
2.src 和 href 的区别
2.1src 是引入资源的 href 是跳转url的
- src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
- href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
3.锚点定位：通过创建锚点链接，用户能够快速定位到目标内容
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two">
tips：
- 外部链接 需要添加 http:// www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
7. 注释标签
<!-- 注释语句 -->
快捷键是： ctrl + /
或者 ctrl +shift + /
8.特殊字符
9.什么是XHTML
-
XHTML 指**「可扩展超文本标签语言」**（EXtensible HyperText Markup Language）。
-
XHTML 的目标是取代 HTML。
-
XHTML 与 HTML 4.01 几乎是相同的。
-
XHTML 是一个 W3C 标准。
三、表单
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
1.表单元素：
指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
1.1 input元素
<input type="属性值" value="你好">
input 输入的意思，标签为单标签
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。文本字段的默认宽度是 20 个字符。 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单）表单处理程序在表单的 action 属性中指定：action_page.php |
| name | 如果要正确地被提交，每个输入字段必须设置一个 name 属性。 |
input常用属性：
1.2 label标签
label 标签为 input 元素定义标注（标签）。
**作用：**用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢
- 第一种用法就是用label标签直接包含input表单， 适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
<!-- 第一种-->
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
<!--第二种-->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
1.3 textarea控件(文本域)
通过textarea控件可以轻松地创建多行文本输入框.
文本框和文本域区别:
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type=“text” | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
<form action="action_page.php">
如果省略 action 属性，则 action 会被设置为当前页面。
<form action="action_page.php" method="POST">
1.何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
**注释：**GET 最适合少量数据的提交。浏览器会设定容量限制。
2.何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
form表单属性
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
|---|---|
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
练习题：
代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale=1 minimum-scale=1 user-scalable=no>
<!--
1.viewport标记，用于指定用户是否可以缩放Web页面.
2.device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度.
3.initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面.
4.maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制，值的范围为0.25~10.0之间。
5.user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图，值为yes时允许用户进行缩放，值为no时不允许缩放。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--用以声明当前页面用chrome内核来渲染。-->
<style>
body{
background:#FFB6C1;
}
.box{
background:#F8F8FF;
width:500px;
height:550px;
margin:50px auto;/*外边距盒子居中*/
}
/*设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/
.box h2{
font-size:24px;
line-height: 50px;
color:#fd8653;
border-bottom:1px solid #d5d5d5;
font-weight:normal;
margin:10px auto 20px 30px;/*上 右 下 左*/
}
form{
margin:15px 0 25px 25px;
overflow:hidden;/*超出部分隐藏*/
display: -webkit-flex;/*Webkit内核的浏览器，必须加上-webkit前缀。*/
display: flex;/*display 属性规定元素应该生成的框的类型*/
-webkit-flex-flow: row wrap;/*webkit表示浏览器内核，水平方向从左往右排列，换行*/
flex-flow: row wrap; /*设置或检索弹性盒模型对象的子元素排列方式*/
}
label {
width: 150px;
text-align: right;/*文本对齐*/
font-size:14px;
}
input, textarea {
width: 200px;
margin-bottom: 20px;
}
textarea {
height: 150px;
}
input[type=checkbox] {
width: auto;
}
.form_check{
width:400px;
height:30px;
margin-left:150px;
color:#333;
font-size:10px;
}
.register{
width:250px;
height:38px;
background:#00ccff;
border:0px;
font-size:18px;
color:#fff;
margin-left:150px;
}
</style>
<title>表单练习一</title>
</head>
<body>
<div class="box">
<h2>注册表单</h2>
<form action="">
<label for="username"> 用户名：</label>
<input type="text" id="usename" value="请输入用户名" />
<label for="password"> 密码： </label>
<input type="password" id="password" value="请输入密码" />
<label for="password"> 确认密码：</label>
<input type="password" id="password" value="请确认密码" />
<label for="email"> 邮箱：</label>
<input type="email" id="email" value="请输入邮箱" />
<label for="introduction">个人介绍:</label>
<textarea id="introduction"></textarea>
<div class="form_check">
<input type="checkbox" name="check" />
<span >同意协议</span>
</div>
<input type="submit" value="注册" class="register" />
</form>
</div>
</body>
</html>
flex布局：
1.认识Flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari，Chrome */
display: flex;
}
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
2.容器的属性
| 容器的属性 | 属性和作用 |
|---|---|
| flex-direction：决定项目的排列方向） | row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 |
| flex-wrap：一条轴线排不下，如何换行 | nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。 |
| flex-flow：设置或检索弹性盒模型对象的子元素排列方式 | row nowrap，row wrap |
| justify-content：项目在主轴上的对齐方式 | flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 |
| align-items：项目在交叉轴上如何对齐 | flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 |
| align-content：多根轴线的对齐方式 | flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 |
3.项目的属性
| 项目的属性 | 属性和作用 |
|---|---|
| order | 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 |
| flex-grow | 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。所有项目的flex-grow属性都为1，则它们将等分剩余空间 |
| flex-shrink | 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 |
| align-self | 允许单个项目有与其他项目不一样的对齐方式 |
| flex-basis | 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 |
扫一扫
1015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
