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. 【BIGDATA】在Centos上部署ElasticSearch 7.3.2及kibana

    一.下载: 首先,下载ElasticSearch和kibana安装包,版本自选,官方下载页https://www.elastic.co/cn/downloads/ 二.版本检查 很重要的一步,要检查C ...

  2. shell练习(1)创建100个用户

    shell练习(1)创建100个用户 默默努力的小白. 2020-04-15 16:28:49 49 收藏文章标签: linuxshell版权随机创建100个用户,并生成随机密码,并将密码放入一个文件 ...

  3. 048.Python前端css

    一 CSS介绍 1.1  CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; prop ...

  4. MYSQL数据库快速添加测试数据方法

    先添加两条数据,这里最好添加两条不一样的数据 INSERT INTO "表名"(**, **) VALUES (**,**),(**,**) 然后再次添加数据,这次把查询到的数据添 ...

  5. 【Azure 事件中心】azure-spring-cloud-stream-binder-eventhubs客户端组件问题, 实践消息非顺序可达

    问题描述 查阅了Azure的官方文档( 将事件发送到特定分区: https://docs.azure.cn/zh-cn/event-hubs/event-hubs-availability-and-c ...

  6. 删除本地解压版Mysql

    1.关闭服务 以管理员身份运行cmd,使用命令net stop mysql停止服务. 2.卸载服务 使用命令mysqld -remove mysql卸载服务. 这时候在服务里已经找不到mysql服务了 ...

  7. 【greys使用】阿里greys在线诊断工具

    Greys是一个Java进程的异常诊断工具,可以在不停止程序的前提下,对一些问题进行检测.这个框架主要是采用Java的探针技术,可以做到动态修改java的字节码技术.前提是Jdk版本6+.(prema ...

  8. python中使用excutemany执行update语句,批量更新

    python中使用excutemany执行update语句,批量更新 # coding:utf8 import pymysql import logging connection = pymysql. ...

  9. Comparison of Laser SLAM and Visual SLAM

    Comparison of Laser SLAM and Visual SLAM 目前,SLAM技术广泛应用于机器人.无人机.无人机.AR.VR等领域,依靠传感器可以实现机器的自主定位.测绘.路径规划 ...

  10. 解决:ImportError: DLL load failed while importing _sqlite3: 找不到指定的模块。

    Django框架学习第一步,创建一个Django工程. 本次采用的是创建虚拟环境来创建Django工程.本地解释器采用anaconda ,内置Python3.8 在pycharm中报错: 内容如下:I ...