01
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文章，图形、动画、声音、表格、链接等。
02
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
一、基本快捷键
二、HTTP简介
超文本传输协议，Hypertext Transfer Protocol
这是一个文件的传输协议，我们上网的时候，所有的文件都是通过HTTP这个协议，从服务器上传输到客户的电脑里面的
网页是真实物理的文件。并且一个网页是很多的物理文件组成的：HTML文件、文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器，访问网址，服务器上面的文件就会通过HTTP请求悄悄地传输到用户的电脑中的临时文件夹中，在用户的电脑中执行、渲染、呈递。
网页的原理：用户输入网址后，对应的服务器就发现有人请求我的网页了，所以这个服务器就会把网页和相关的、js文件、css文件、flash文件都通过HTTP协议传输到用户的电脑里面。HTML页面在用户的电脑里面进行渲染。HTTP协议指的是超文本传输协议。每一个网址，都对应了服务器上面的确定的文件。
三、HTML基础
html、css、js都是纯文本的
纯文本文件是：
a. 只有文本，没有样式；
b. 用记事本等纯文本编辑器可读，不是乱码
HTML是超文本标记语言
a. 英语：HyperText Markup Language;
b. 现在的业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的；
基本HTML网页结构如下，body标签里的内容是浏览器上所视内容
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>页面标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
四、字符集
1.两种字符集：区别
UTF-8字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
GB2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
2.关键字和页面描述
a. 设置页面描述：
<meta name="Description content="黔西南州卓睿软件开发有限公司，黔西南州本土专业的软件开发团队，精心能为您打磨您的软件平台，只为交付高可用高质量的软件产品。"/>
只要设置的Descripition页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。
b. 定义关键词：
<mata name="Keywords" content="黔西南州、卓睿、软件、开发、网站、小程序、公众号、摄影摄像、企业转型"/>
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高所搜命中率。
c. title也是有助于SEO搜索引擎优化的
五、HTML基本语法特性
HTML对换行不敏感，对tab键不敏感
空白折叠现象
a. HTML所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
HTML标签是分等级的
HTML将所有的标签分为两种：容器级、文本级。
容器级的标签，里面可以放置任何东西；
文本级的标签里面，只能放置文字、、表单元素。
a. p是一个文本级的标签，p里面只能放文字、、表单元素
b. a是一个文本级的标签
ps：在HTML页面中，带有”< >“符号的元素被称为HTML标签，如上面提到的<html>、<head>、<body>都是HTML标签。所谓标签就是放在”< >” 标签符中表示某个功能的编码命令，也称为HTML标签或HTML元素。
1. 双标签：<标签名>内容</标签名>该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>”表示该标签的作用结束，一般称为“结束标签（edn tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
2. 单标签：<标签名/>单标签也称空标签，是指用一个标签字符即可完整地描述某个功能的标签。
3. 元素（标签）属性：HTML元素属性一般在开始标签中，以键值对表示。常见属性：
六、
1.能用的类型
页面上可以插入，能够插入的类型是：jpg、gif、png、bmp。
不能往网页中插入的格式是：psd、ai。
2.语法
插入的方法：
<img src="1.jpg" alt="卓睿软件"/>
src是img标签的属性，1.jpg是这个属性的值
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个无法被显示的时候，出现的替代文字（有的浏览器不支持）
七、超链接
语法：
<a href="1.html">卓睿软件</a>
1. a标签的另外两个属性
a. title悬停文本
b. target是否在新窗口中打开
<a href="01_img.html" title="开发无忧" target="_blank">卓睿软件</a>
blank就是“空白”的意思，就表示新建一个空白窗口
2. 页面内的锚点
<a href="zuopin">点击就查看作品</a>
<h2><a id="cgal">成功案例</a>
首先设置h2的id，点击href="#zuopin"直接跳转到成功案例。
八、列表
1. 无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的；
无序列表中的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li；
注意：ul的作用是增加无序列表的“语义”；ul的子标签，只能是li。但是li是一个容器级标签，li里面什么都能放；
<ul> <li>星星</li> <li>月亮</li> </ul>
2. 有序列表
ordered list有序列表，列表项目使用数字进行标记。用ol表示；
<ol> <li>星星</li> <li>月亮</li></ol>
3. 定义列表
a. 定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表；
dt表示definition title 定义标题；
dd表示definition description 定义表描述词；
dt、dd只能在dl里面；dl里面只能有dt、dd；
定义列表用法非常灵活，可以一个dt配很多dd；
b. dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签 ，不是根据样子来决定，而是语义。
九、div和span
div的语义是division“分割”；span的语义就是span“范围、跨度”
div标签也是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达”小区域、小跨度“的标签，但是是一个”文本级“的标签。
ps：就是说，span里面只能放置文字、、表单元素。span里面不能放p、h、ul、dl、ol、div。可理解为：span里面是放置小元素的，div里面放置大东西的。
十、表格
HTML表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、、列表、段落、表单、水平线、表格等等。
<tabe border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
十一、表单
form是英语表单的意思。form标签里面有action属性和method属性，action属性就是表示，表单将提交到哪里。method属性表示用什么HTTP方法提交，有get、post两种。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</from>
1.文本框
<input type="text" value="默认有的值"/>
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了
2. 密码框
<input type="password" />
3. 单选按钮
<input type="radio" name="xingbie" checked="checked" /> 男
<input type="radio" name="xingbie" /> 女
默认被选择，就应该书写checked="checked"
4. 复选框
<p>
请选择你的爱好：
<input type="checkbox" name="aihao" />睡觉
<input type="checkbox" name="aihao" />吃饭
<input type="checkbox" name="aihao" />足球
<input type="checkbox" name="aihao" />篮球
<input type="checkbox" name="aihao" />乒乓球
<input type="checkbox" name="aihao" />打豆豆
</p>
5. 下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
6. 多行文本框（文本域）
<textarea cols="30" rows="10"> </textarea>
cols属性表示columns“列”，rows属性表示rows“行”
7. 三种按钮
a. 普通按钮：
<input type="button" value="我是普通按钮" />
b. 提交按钮：
<input type="submit" />
c. 重置按钮：
<input type="reset" />
十二、HTML其他
HTML注释
任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的；HTML注释的语法：
字符实体
a. <；是<的字符实体；
b. >；是>的字符实体；
c. ©；是© 版权符号；
d.  ；是空格的实体，防止空白折叠现象；
END
HTML是WEB前端和PHP程序员的必学知识点，一般也是第一个接触的知识点。很多人因为初次接触觉得很难，其实HTML是比较简单的，只要记住大部分常用标签的写法、用法和基本效果。其实我也就可以简单的用这部分归纳总结HTML的知识点，让大家更简单清晰的理解HTML，任何时候一定要知其然知其所以然，世界不一定和你认知的一样，一定要自己领悟成自己的东西。
发表评论 取消回复