29.1、前端概述：

1、html、css、js之间的关系：

html是页面布局，css是页面渲染，js是让页面动起来(让页面和用户进行交互)；

2、浏览器访问web站点获取html页面图示：

3、html是什么：

（1）html：htyper text markup language，即超文本标记语言：

1）超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

2）标记语言: 标记（标签）构成的语言。

（2）网页==HTML文档，由浏览器解析，用来展示的：

1）静态网页：静态的资源，如xxx.html；

2）动态网页：html代码是由某种开发语言根据用户请求动态生成的；

4、html文档树型结构图：

29.2、html标签：

1、什么是html标签：

（1）html标签是由一对尖括号包裹的单词构成，例如<html>，注意所有标签中的单词不可能以数字开头；

（2）html标签不区分大小写，例如<html>和<HTML>的效果相同，推荐使用小写；

（3）html标签分为两部分，开始标签和结束标签，例如<a>和</a>，两个标签之间的部分我们叫做标签体，这种标签叫做闭合标签；

（4）有些html标签的功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，例如:<br/>、<hr/>、<input/>、<img/>；

（5）html标签可以嵌套，但是不能交叉嵌套，例如"<a><b></a></b>"的写法是错误的；

2、html标签的属性：

（1）通常是以键值对形式出现的，例如name="lc"；

（2）属性只能出现在闭合标签的开始标签或自闭合标签中；

（3）属性名字全部小写，属性值必须使用双引号或单引号包裹，例如name="lc"；

（4）如果属性值和属性名完全一样，直接写属性名即可. 例如readonly="readonly"可以直接写成readonly；

3、<!DOCTYPE html> 标签：

（1）介绍：

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中对页面的渲染也不同。在

W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility

Mode)。由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars

mode)，这就是二者最简单的区别。W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧

的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面

显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。

这样浏览器渲染上就产生了Quircks mode和Standars mode两种渲染方法共存在一个浏览器上。

（2）查看html页面模式：

1）window.top.document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

2）这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，

这也就是恶魔的开始，浏览器按照自己的方式解析渲染页面，那么在不同的浏览器就会显示不同的样式。如果你的页面添加

了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这

样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是<!DOCTYPE html>的作用。

4、<head> 标签下的元素：

（1）<meta> 标签：

1）meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值

就实现了不同的网页功能。

2）name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和

分类信息用的。

示例：

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="这是一个神奇的网站">

3）http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页

内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

示例：

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">

<!--注意后面的引号，分别在秒数的前面和网址的后面-->

<meta http-equiv="content-Type" charset=UTF8">

<!--设置网页编码格式-->

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

<!--X-UA-Compatible：表示在高版本的ie浏览器上指定以特定ie版本编译html页面，该网页需要支持w3c的标准-->

（2）非<meta>标签：

<title>lc</title>

<!--网页标签栏显示的文字-->

<link rel="icon" href="http://www.jd.com/favicon.ico">

<!--网页标签栏显示的图片-->

<link rel="stylesheet" href="css.css" type="text/css">

<!--链接的css文件-->

<script src="hello.js" type="text/css"></script>　

<!--链接的js文件-->

5、<body>标签：

（1）基本标签：

<hn>: n的取值范围是1~6，从大到小. 用来表示标题；

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白；

<b>、<strong>: 加粗标签；

<strike>: 为文字加上一条中线；

<em>: 文字变成斜体；

<sup>和<sub>: 上角标 和 下角表；

<br>: 换行；

<hr>: 水平线；

<div>

<span>

1）块级标签：<p>、<h1>、<table>、<ol>、<ul>、<form>、<div>

2）内联标签：<a>、<input>、<select>、<img>、<sub>、<sup>、<textarea>、<span>

3）block（块）元素的特点：

总是在新行上开始；

宽度缺省是它的容器的100%，除非设定一个宽度；

它可以容纳内联元素和其他块元素；

4）inline元素的特点：

和其他元素都在一行上；

宽度就是它的文字或图片的宽度，不可改变；

内联元素只能容纳文本或者其他内联元素；

5）特殊字符

&lt;&gt;&quot;&copy;&reg;

<!--输出结果为：<>"

&nbsp;：表示空格；

HTML特殊字符编码对照表网址：https://www.jb51.net/onlineread/htmlchar.htm

-->

（2）图形标签<img>：

src属性: 要显示图片的路径；

alt属性: 图片没有加载成功时的提示；

title属性: 鼠标悬浮时的提示信息；

width属性: 图片的宽；

height属性: 图片的高 (宽高两个属性只用一个会自动等比缩放)；

（3）超链接标签(锚标签)<a>：

href属性: 要连接的资源路径 格式如下: href="http://www.baidu.com"；

target属性: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容；

name属性: 定义一个页面的书签；

href="#<id>"：用于(锚)跳转；

（4）列表标签：

1）

<ul>: 无序列表；

<ol>: 有序列表；

<li>: 列表中的每一项；

2）

<dl>: 定义列表；

<dt>: 列表标题；

<dd>: 列表项；

（5）表格标签<table>：

border属性: 表格边框；

cellpadding属性: 表格内边距(td中的内容离td边框的距离)；

cellspacing属性: 表格外边距(tr离表格外边框的距离)；

width属性: 表格宽度，像素百分比（最好通过css来设置长宽）；

<tr>(表格元素标签): 表格的行标签；

<th>(tr标签的元素标签)：数据单元格标签(字体会会加粗)；

<td>(tr标签的元素标签)：数据单元格标签；

rowspan(数据单元格属性)：数据单元格竖跨多少行；

colspan(数据单元格属性)：数据单元格横跨多少列(即合并单元格)；

<thead>、<tbody>(表格元素标签)：表格头和表格主体部分，为表格进行分区，主要是给人看的，不常用；

（6）表单标签<form>：

1）表单标签说明：

表单用于向服务器传输数据；

表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等；

表单还可以包含textarea、select、fieldset和 label 元素。

2）表单标签的属性：

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互，要提交的所有内容都应该在该标签中。

action: 表单提交到哪，一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web。

method: 表单的提交方式为post或get，默认取值是get（get提交的键值对放在地址栏中的url后面，安全性相对较差，对提交内容的长度也有限制），建

议使用post提交表单数据（提交的键值对不在地址栏，安全性相对较高，对提交内容的长度理论上无限制）。

enctype="multipart/form-data"：提交文件时需要添加该属性。

表单标签发送数据的格式：{"username":["lc"],"password":[1234],"hobby":["music","movie"],"gender":["man"]}

3）表单元素：

A）<input>标签：

a）type属性：

说明：type属性主要是设置input标签输入框的类型；

text：文本输入框；

password：密码输入框；

radio：单选框；

checkbox：多选框；

submit：提交按钮；

button：按钮(需要配合js使用)；

file：提交文件，form表单需要加上属性enctype="multipart/form-data"；

b）name属性：

说明：name属性是表单提交项的键，注意和id属性的区别，name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为

了方便客户端编程，在css和javascript中使用的。

c）value属性：

说明：value属性是表单提交项的值，对于不同的输入类型，value 属性的用法也不同；

type="button", "reset", "submit"：定义按钮上的显示的文本；

type="text", "password", "hidden"：定义输入字段的初始值，可以不写该属性，由用户进行输入，用户输入的优先级最高；

type="checkbox", "radio", "image"：定义与输入相关联的值；

d）checked属性：

type="checkbox", "radio"：定义选项框默认被选中；

e）readonly属性：

type="text", "password"：定义文本框为只读；

f）disabled属性：

对所有的input标签都好使，表示将数据框变为不可用；

g）hidden属性：

对所有的input标签都好使，表示隐藏input标签；

h）placeholder属性：

type="text", "password"：定义文本输入的提示，在文本框中显示为灰色的字；

B）<select>下拉标签：

a）name属性：表单提交项的键；

b）size属性：选项显示的个数；

c）multiple属性：选项多选；

d）<select>的元素标签：

<option>标签：下拉选中的每一项；value属性表示表单提交项的值，如果不填是option标签中的值，value的优先级最高；selected属性表示下拉选默认被选中。

<optgroup>标签：为每一项加上分组；

e）示例代码：

省

<select name="hebeisheng">

<optgroup label="河北省">

<option value="beijing">邯郸</option>

<option value="hebei">廊坊</option>

<option value="henan" selected="selected">唐山</option>

<option value="shanxi">保定</option>

</optgroup>

</select>

<!--页面显示：

-->

C）<textarea>文本域标签：

name属性：表单提交项的键；

rows属性：文本域默认有多少行；

cols属性：文本域默认有多少列；

value属性：文本域默认内容，可以不写该属性，由用户进行输入；

D）<label>标签：

说明：特效标签，当点击文本框的名字时，焦点会聚到文本框内，默认没有该功能；

示例：

<label for="lc">姓名</label>

<input id="lc" type="text">

<!--页面显示：

-->

E）<fieldset>标签：

说明：为表单内的标签添加边框；

示例：

<fieldset>

<legend>登录</legend>

<input type="text">

</fieldset>

<!--页面显示：

-->

29.3、补充：

1、注意html标签的嵌套规则：

（1）块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

（2）有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

（3）li内可以包含div

29、html介绍的更多相关文章

  1. MT【29】介绍向量的外积及应用举例

    我们在学校教材里学到的数量积(内积)其实还有一个孪生兄弟向量积(外积),这个对参加自主招生以及竞赛的学生来讲是需要掌握的,这里稍作介绍: 原理: 例题: 应用:

  2. 第一阶段·Linux运维基础-第2章·Linux系统目录结构介绍

    01 变量与PS1 02 添加用户 03 关闭SELinux 04 关闭iptables 05 显示中文乱码排查过程 06 总结 07 目录结构课程内容 08 Linux目录结构特点 09 Linux ...

  3. 36.React基础介绍——2019年12月24日

    2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...

  4. HTML+CSS知识点总结

    转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...

  5. Python2.6-原理之类和oop（上）

    来自<python学习手册第四版>第六部分 一.oop:宏伟蓝图(26章) 在这之前的部分中,经常会使用"对象"这个词,其实,到目前为止都是以对象为基础的,在脚本中传递 ...

  6. Python2.7-异常和工具

    来自<python学习手册第四版>第七部分,而且本书发布的时候3.1还未发布,所以针对本书的一些知识会有些滞后于python的版本,具体更多细节可以参考python的标准手册. 一.异常基 ...

  7. 史上最全的HTML、CSS知识点总结，浅显易懂。

    来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...

  8. iOS开发——面试总结（一）

    面试总结(一) 通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: 1.搞清楚touch事件的传递(事件的响应链) 事件的响应(responder chain) 只有继承了UIRespon ...

  9. iOS 必备技术点

    IOS面试问题总结 分类: IOS开发2013-11-20 17:26 5873人阅读 评论(1) 收藏 举报   目录(?)[+]   通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: ...

  10. IOS面试问题总结

    IOS面试问题总结 分类: IOS开发2013-11-20 17:26 10458人阅读 评论(1) 收藏 举报   目录(?)[+]   通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题 ...

随机推荐

  1. [设计模式] 读懂UML图

    类之间关系(由强到弱) realize(继承):三角+实线(指向类),继承类(SUV是一种汽车) generalization(实现):三角+虚线(指向接口),实现接口(汽车是一种车) composi ...

  2. zip密码破解小脚本

    zip密码破解小脚本 博主: 逍遥子 发布时间:2018 年 05 月 31 日 2745次浏览 1 条评论 1074字数 分类: kali 专栏 首页 正文 分享到:    文件源码 import ...

  3. 用nvm的方式安装node

    一.nvm简介 Node Version Manager(Node版本管理工具)由于以后的开发工作可能会在多个Node版本中测试,而且Node的版本也比较多,所以需要这么款工具来管理.   nvm的安 ...

  4. docker容器中日志文件过大处理方法

    背景 :在日常工作中一个基于centos镜像构建起来的python爬虫程序,日志文件在两个月内到了500G,日志存放在根目录下面,在不扩容的情况下把这个问题给解决掉.通过定时任务和脚本的方法,定期的清 ...

  5. python 交换变量值为何不需要中间变量

    python 元组解包unpacking,同一语句中多重赋值 cpython 认为几种变量的交换是比较常见的,提供了专门的优化指令,像[-5,256]预先放到了整数池中一样,

  6. Python break/continue - Python零基础入门教程

    目录 一.break 二.continue 三.重点总结 四.猜你喜欢 零基础 Python 学习路线推荐 : Python 学习目录 >> Python 基础入门 在 Python wh ...

  7. Guava Cache，Java本地内存缓存使用实践

    Guava Cache,网上介绍很多,我就不赘述了. 分享一篇好的文章: Guava Cache内存缓存使用实践-定时异步刷新及简单抽象封装 Google Guava 3-缓存 在原作者基础上,我做了 ...

  8. Go语言web开发---Beego的session

    一.简介 Session是一段保存在服务器上的信息,当客户端第一次访问服务器时创建Session,同时也会创建一个名为beegosessionID,值为创建的Session的id的Cookie. 这个 ...

  9. Camera噪声问题

    Camera噪声问题 Camera RGB 域的噪声 以上部分属于sensor processing,接下来的部分属于color.luminance processing. gamma gamma是在 ...

  10. pytorch空间变换网络

    pytorch空间变换网络 本文将学习如何使用称为空间变换器网络的视觉注意机制来扩充网络.可以在DeepMind paper 阅读更多有关空间变换器网络的内容. 空间变换器网络是对任何空间变换的差异化 ...