一 html
- 1html 是什么
- 超文本标记语言,通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则
- 浏览器按照顺序渲染网页文件.然后根据标识符解释和显示内容.但要注意的是,对于不同的浏览器,对于同一标签,可能会有完全不相同的解释,(兼容性)
- 静态网页文件扩展名: .html .htm
2 .html 不是什么
html不是编程语言,而是一种标记语言 (makeup language)
html 使用标记标签来描述网页
3 html 结构
<!DOCTTYPE html>告诉浏览器使用什么样的 html 或者xhtml 来解析html文档
<html></html>是文档的开始和结束标记.此元素告诉浏览器 其自身是一个html文档,在他们的中 间是文档的头部<head>和身体<body>
<head></head> 元素出现在文档的开头部分.<head>与</head>之间的内容不会再浏览器的文档
窗口显示,但是期间的元素有特殊重要的意义.
<title></title>定义网页标题,在浏览器标题栏显示
<body></body>之间的文本是可见的网页主题内容
3 html 的格式
* html 标签是由尖括号包围的关键词,比如<html>
* html 标签通常是成对出现的(双边标记),比如<div></div>
*标签不区分大小写,<html> 和<HTML>,推荐使用小写
*标签分为两部分:开始标题<a>和结束标题</a>,两个标签之间的部分.我们叫做标签体
有些标签功能比较简单,使用一个标签即可,这种标签叫作自闭和标签
* 标签阔以有若干个属性,也阔以不带属性,如<head>就不带任何属性
*标签阔以嵌套,但是不能交叉嵌套 如<a><b></a></b>
标签的语法
<标签名 属性1 = "属性值1" 属性2 = "属性值2"...> 内容部分</标签名>
<标签名 属性1 = "属性值1" 属性2 = "属性值2".../>
二 常用标签
1.<!DOCTYPE>标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
a. BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
b, CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat.
2 <head> 内常用的标签
<meta>标签
meta介绍:meta元素可提供有关页面的元信息,针对搜素引擎和更新频度的关键词
<meta>标签位于文档的头部,不含任何内容
<meta>提供的信息用户不可见
meta标签的组成: meta总共有两个属性 分别是 http-equiv属性 和name属性,不同的属性
又有不同的参数值,这些不同的参数值又实现了不同的网页功能.
(1)name属性;主要用于描述网页,与之对应的属性值为 content,其中的内容主要是便于搜素机器人 查找信 息 和分类信息用的.
<meta name="keywords" content="北京汽车网，北京汽车报价，北京车市最新报价， 北京汽车报道，北京易车网，北京汽车团购服务"> <meta name="description" content="北京汽车网，北京汽车报价，北京车市最新报价，北京汽车报道，北京易车网，北京汽车团购服务">
(2)http-equiv属性:相当于http的文件开头作用,他可以向浏览器传回一些有用的信息,以帮助正确 的显示网页内容,与之对应的属性值为content ,其中的内容就是各个参数的变量值.
<title>meta标签</title> <meta charset="UTF-8"> <meta http-equiv="content-type" charset="utf8">和上面的是一样的，都是指定编码的 <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--两秒之后跳转到百度页面(注意后面的引号，分别在秒数的前面和网址的后面)--> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <!--设定当前网页的兼容模式为IE7(哪怕你用其他版本的浏览器打开，它也是支持IE7版本的)-->
非 meta标签
<!--设置头部图标--> <link rel="icon" href = "http://www.jd.com/favicon.ico"> <link rel = "stylesheet" href = "css.css"> <script src="hello.js"></script> #加载js
3 body 内常用的标签
基本标签
<hn> :n 的取值范围 1-6. 用来表示标题
<p> :段落标签 .包裹的内容被换行,并且上下文之间有一行空白
<b> <strong> 加粗标签
<strike> :为文字加上一条中线
<em> <i> 文字倾斜
<sup>和<sub> 上角标和下角标
<br> 换行
<hr> :水平线
<body>
<h1><span>sale $9.9</span> <del>原价9988元</del></h1>
<div id = "topbar">
<div class = "top-l">左边区域</div>
<div class = "shopbar"> 购物<span>车</span></div>
<div class="info">登陆</div>
</div>
<div id = "header">
我是头部
</div>
<div id ="container">
我是内容区域
</div>
<div id = "footer">
我是脚步
</div>
</body>
</html>
总结知识点
标签分类1
自闭和标签:单标签
闭合标签:双标签
标签分类2
块级标签:就是独占一行 ,可以自己设置宽高 如div p h1 -h6
内联标签:按内容占位.高度和广度是由自己的内容填充的 如 a br img
判断块级标签和内联标签的方法：
1.是否独占一行（可以通过设置背景颜色去判断）
2.是否可以单独为元素设置高度和宽度
<div></div> :其只是一个块级元素,并无实际意义,主要通过css为其赋予不同的表现
<span></span> 并无实际意义主要通过css为其赋予不同的表现
图形标签:<img>
src:要显示图片的路径
alt:图片没有加载成功的提示
title:鼠标悬浮时的提示信息
width:图片的宽
height: 图片的高(宽高两个属性只用1 个会自动等比缩放)
超链接标签:<a></a>
什么是超链接
所谓的超链接就是从一 个网页指向一个目标的链接关系,这个目标阔以是另一个网页,也阔以是相同网页 上的不同位置,还可以是一个图片,一个电子邮件地址,甚至一个应用程序
''' <a href="" target="_blank" >click</a> href属性指定目标网页地址。该地址可以有几种类型： 绝对 URL - 指向另一个站点（比如 href="http://www.jd.com） 相对 URL - 指当前站点中确切的路径（href="index.htm"） 锚 URL - 指向页面中的锚（href="#top"） '''
表单标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <meta name = "viewport" content = "width=device-width inital -scale =1 "> </head> <body> <form action ="https://www.baidu.com/s"> <input type = "text" name = "wd" value =""/> <input type="submit" value="搜索ya"> </form> </body> </html>
功能:表单用于向服务器传输数据,从而实现用户与WEB服务器的交互.
表单能够包含 input系列的标签,比如文本字段,复选框,单选框,提交按钮等
表单还可以包括textarea,select,fieldset 和label标签
表单属性:
action:表单提交到哪里,,一般指向服务端的一个程序,程序接受到表单提交过来的数据(即表单元素值)
做相应处理
method:表单提交的方式,post/get默认取值就是get
##########################################
<!----src :链接的图片资源-->
<!--alt: 图片资源加载失败,显示的文本-->
<!--html标签的特征
1 空白折叠现象
对空白和换行不敏感
标签要严格封闭
html 中
1 行内标签
(1) 在一行内显示 span strong em i del a
不能设置宽高-->
<!--2 行内块标签
(1)在一行内显示
(2) 可以设置宽高-->
<!--2块级标签-->
<!--(1)独占一行
(2) 可以设置宽高,如果不设置宽高,默认的宽是父亲的100%.高度是内容的宽高-->