最基础的网页开发语言

 

　　全称： Hyper Text Markup Language 超文本标记语言

 

　　超文本：

 

　　是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本

 

　　标记语言：

 

　　由标签构成的语言，标记语言并非编程语言

 

　　语法

 

　　html文档后缀名为".html" 或者 “。htm”标签分为：围堵标签（有开始标签和结束标签）、自闭合标签（开始标签和结束标签在一起，如

 

　　）标签可以嵌套在开始标签中定义可以定义属性。属性由键值对构成，值需要用引号（单双都可）引起来html标签不区分大小写，然而推荐小写

 

　　html：html文档的根标签head：头标签，用于指定html文档的一些属性，引入外部的资源title：标题标签body：体标签< !DOCTYPE html>：定义文档标签

 

　　注释： <!-- 注释内容 --><h1> 到<h6>：标题标签，字体大小递减<p>：段落标签<br>：换行标签<hr>：展示一条水平线<b>：字体加粗<i>：字体斜体<font>：字体标签（已淘汰）<center>：文本居中

 

　　示例：

 

　　有序列表：<ol> 加 <li>

 

　　无序列表：<ul>加<li>

 

　　<a> </a>：定义一个超链接

 

　　常用属性：

 

　　href：指定访问资源的URL（统一资源定位符）target：指定打开资源的方式：

 

　　_self：默认值，在当前页面打开_blank：在空白页面打开

 

　　div：每一个div占满一整行，属于块级标签span：文本信息在一行显示，属于行级标签，也叫内联标签

 

　　html5中为了提高程序的可读性，提供了一些标签

 

　　<header>：一般用在网页头部<footer>：一般用在网页尾部

 

　　table：定义表格

 

　　width：宽度border：边框cellpadding：定义内容和单元格之间的距离cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条bgcolor：背景色align：对齐方式 tr：定义行td：定义单元格th：定义表头单元格caption：表格标题thead：定义表格的头部分tbody：定义表格的体部分tfoot：定义表格的脚部分

 

　　表单

 

　　概念：用于采集用户输入的数据，用于和服务器进行交互form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围。

 

　　常用属性：

 

　　action：指定提交数据的URLmethod：提交数据的方式  表单提交的数据应指定name属性 表单项标签

 

　　input：可以通过type属性值，改变元素展示的样式

 

　　type属性：

 

　　text：文本输入框，默认值

 

　　placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 password：密码输入框radio：单选框

 

　　注意

 

　　要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一致一般会给每一个单选框提供value属性，指定其被选中后提交的值checked属性，可以指定默认值  checkbox：复选框file：文件选择框hidden：隐藏域，用于提交一些信息按钮：

 

　　submit：提交按钮，可以提交表单button：普通按钮image：图片提交按钮   label：指定输入项的文字描述信息select：下拉列表textarea：文本域

 

　　Cascading style sheets：层叠样式表

 

　　层叠：多个样式可以作用在同一个html元素上，同时生效

 

　　功能强大将内容展示和样式控制分离，降低耦合度让分工协作变得更加容易提高开发效率

 

　　在标签内使用style属性指定css代码

 

　　在head标签内，定义style标签，style标签的标签体内容就是css代码

 

　　定义css资源文件，在head标签内，定义link标签，引入外部的资源文件

 

　　假设：

 

　　有一first.css文件，存放在css文件夹下

 

　　可以在html中引入first.css，使其生效

 

　　格式：

 

　　选择器：筛选具有相似特征的元素

 

　　注意：每一个属性需要使用";"分隔，最后一个可以不加

 

　　筛选具有相似特征的元素

 

　　分类：

 

　　基础选择器（优先级：id选择器 > 元素选择器 > 类选择器）

 

　　id选择器： #id { }元素选择器（）：标签名称 { }类选择器： .class { } 扩展选择器

 

　　选择所有元素： * { }并集选择器： 选择器1, 选择器2… { }子选择器： 选择器1 选择器2 { } --> 选择器1下的选择器2父选择器： 选择器1 > 选择器2 { } --> 选择器2的父选择器1属性选择器： 元素名称[属性名=“属性值”] { } --> 选择属性名称，属性名=属性值的元素伪类选择器： 元素： 状态 { } --> 选择一些元素具有的状态