1什么是html
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
2 常用的浏览器
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE/Edge | Trident | 兼容性最强，而且国内有一些IE Only网站（如网银）还偏要IE不可，除此之外没有什么突出的地方，最新的IE9速度提升了不少，还是值得推荐的 |
| firefox | Gecko | 火狐浏览器：Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
| Safari | Webkit | Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。 代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器， |
| Chrome | Blink | 大部分国产浏览器最新版都采用Blink内核。二次开发 后面前端学习调试基本用它。功能调试齐全， |
| Opera | Persto | 国外浏览器，快速小巧。浏览器的先驱，探索者 |
嗯~知其言不知其所以言，直接跳过这种概况性的东西以后学习在慢慢的自己理解吧 呵呵
3 HTML 标签
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
（1）文档声明标签
<!DOCTYPE> 告诉浏览器使用了何种HTML版本。
<!DOCTYPE html> //当前页面采用的事HTML5版本来显示网页
注意：声明声明-- 肯定是放在最前面。他不属于HTML的标签。
（2）lang 语言种类
<!-- 当前语言英文 -->
<html lang="en">
<!-- 当前语言中文 -->
<html lang="zh-CH">（3）charset字符集
<meta charset="UTF-8">字符集（character set）,以便于浏览器内核识别与存取文字。在header标签里面charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。
4 重要标签（seo特用的标签一个网页最好只用一次）
1.方便记忆取名TDK
T 代表 table标签网页的名字：百度搜索的标题
<title>Document</title>title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）
D 代表描述：百度搜索的描述文字
<meta name="description" content="描述内容">可以用来展示网页突出内容的关键词信息
K 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式
<meta name= " keywords" content="网上购物,化妆品" />2 h1标签
<h1>标题</h1>建议：一个网页有且只用一次。告诉网络爬虫。这个地方很重要.
常用的新网标题，还要h1放连接，连接里放文字，再通过伪元素把logo。把logo放在上面。把文字隐藏。设置logo设置title,鼠标放在logo上显示文字。
总之：上面的这些标签很重要，一般是SEO 专用。一个网页只用一次。
5 语义标签
(1) 标题标签 h1-h6
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>注意： h1标签不要随意使用，上面已经说明。其他的可以多次使用凸显内容的重要性。
(2)段落标签和换行标签
p 英 ：paragraph ，意：把文字有条理的显示出来就需要将文字分段显示
<p>我是一个段落标签</p>在 html 中将网页分成若干段落，特殊是新网网页。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
<br> 英：break , 意：打断换行。 强行换行
特点：
- 是个单标签（即只开始标签和结尾标签是同一个）。
- 换一行，内容还是当前段落所以出现段落间的间隙和还有css设置的段落缩进。
(3)文本标签
在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 更推荐<strong>，语义更强烈 |
| 斜体 | <em></em>或<i></i> | 更推荐使用<em>，语义更强烈 |
| 删除线 | <del></del>或<s><s/> | 更推荐使用<del>，语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | 更推荐使用<ins>，语义更强烈 |
(4) div 和span 标签
div 英：division 意：分区，分割。
span 英：span 意：跨度，跨距
特点：
- 没有语义的标签，他们是一个盒子，用来装内容
- div 标签是一个大的盒子，一个人独占一行。
- span 标签是个小盒子，一行可以放多个
(5) 图片标签
<img> 英： image 图片标签是个单标签。用于图片的显示
<img src="图像地址 可以是本地也可以是图片的网络地址" alt="图片文字描述" />图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本，当图片不显示时显示文字 |
title | 文本 | 提示文本。鼠标放到图像上显示文字 |
width | 像素 | 图像宽度 |
height | 像素 | 图像高度 |
border | 像素 | 图像边框粗细 |
注意 ：
1. src 可以是本地图片的地址和网络图片的地址
2.alt图片地址错误的显示文字。也是告诉爬虫图片的信息(爬虫无法扫描图片是什么内容，所以扫描alt的内容)
(6) 超文本连接
a 英 anchor 意：锚
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href :
- 外部链接：即网址：https: www.baidu.com.
- 内部链接：内部文件的位置：../home.html
- 空连接：#
- 下载链接：文件包的地址
- 描点连接：点击可以跳转到指定的文字：href="name", 目标标签的 id="name"的位置，name必须相同
（ 7）特效标签
1 <hr> 水平直线
2 特殊字符：
| 字符 | 显示 |
|---|---|
| 空格 |
< | ＜ |
> | ＞ |
© | © |
(8) 表格标签
语义：表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。 表格不是来布局的，而是来展示数据的
1.1 表格的基本用法
- <table></table> table 用于定义表格的标签
- <tr></tr> table row: 用于定义表格的行
- <td></td> table data 用于表单表格的tr行中的列元素
- <th></th> table header 一般单元格位于表格的第一行或第一列，代替td 用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
-
<tfoot></tfoot> 一般单元格位于表格的第最后一行或最后一列，代替td 用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
注意：<tr> 在<table>中， <td> <th><tfoot>在<tr>中。 td 的语义标签： <th><tfoot>可以用可不用。
1.2 表格的基本用法
只作了解，后期通过 CSS 来设置。 这些属性都要写到 <table></table> 标签中
| 属性名 | 属性值 | 描述 |
|---|---|---|
border | 1 或"" | 规定是否有边框，默认为""，表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间空白，默认 1px |
cellspacing | 像素值 | 规定单元格之间的空白，默认为 2px |
width | 像素值或百分比 | 规定表格宽度 |
hight | 像素 | 表格高度 |
1.3 表格的结构标签
加强表格的语义:
- <thead></thead> 定义表格的头部
- <tbody></tbody> 定义表格的数据部分
- 必须包含在table里面。表示table的框架（可有可无）
1.4 表格单元格合并
目标单元格占多行或者多列，或者删除多余的单元格 <td rowspan="2"></td>这个单元格占两个单元格的位置
<table border="1" cellspacing="0" width="500px">
<tr>
<td rowspan="2">单元格01</td>
<td>单元格02</td>
<td>单元格03</td>
</tr>
<tr>
<td>单元格12</td>
<td>单元格13</td>
</tr>
<tr>
<td>单元格21</td>
<td colspan="2">单元格22</td>
</tr>
</table>
(9)列表
表格展示数据，列表则用来布局，特点是整齐、整洁、有序，作为布局更方便，可分为三类
- 无序列表
- 有序列表
- 自定义列表
1.1 无序列表(用的最多)
<ul> 列表之间是无序的：仅仅是语义上的无序但是显示在网页上还是有序的显示从上到下。
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>1.2 有序列表
<ol>
<li>有列表项1</li>
<li>有列表项2</li>
<li>有列表项3</li>
</ol>1.3 自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>注意与只有dt dd, 常用于分两类便于css来改变样式
(10) 表单标签
表单域是一个包含表单元素的区域。 使用 <form> 标签用于定义表单域，收集和传递信息，提交给服务器。
<form action="url地址" method="提交方式：post/get" name="表单域名称:用于指定表单名称，区分同一个页面中的多个表单域">
各种表单元素控件
</form>1.1 表单元素<input>
<input> 标签是单标签，其属性 type 属性决定了标签的样式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等
type 属性值
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| chekbox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的的控件，但是会收集控件的信息 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符被掩码。 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单所有数据。 |
| submit | 定义提交按钮。重置按钮会清除表单所有数据。 |
| text | 定义输入字段。用户可输入文本，默认宽度为 20 个字符。 |
| color | 指定颜色控件，在支持的浏览器中，激活时会打开取色器。 |
| date | 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 |
| range | 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。精度条 |
| search | 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标 |
| number | 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 |
| tel | 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 |
| time | 用于输入时间的控件，不包括时区。 |
| url | 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘 |
| week | 用于输入以年和周数组成的日期，不带时区。 |
其他属性：
| 属性值 | 描述 |
|---|---|
| name | input的name,也是表单数据的key |
| value | input的值，表单提交数据的值 |
| checked | 是否被选择用于type为radio，checkbox |
| maxlength | 规定输入字段字符的最大长度 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符被掩码。 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单所有数据。 |
| submit | 定义提交按钮。重置按钮会清除表单所有数据。 |
| text | 定义输入字段。用户可输入文本，默认宽度为 20 个字符。 |
注意
- 对于
radio单选框，必须使input的name具有相同的属性值，才能实现多选一。 同理，复选框也要有相同的name值。 - 单选框和复选框可以设置
checked属性，页面打开默认选择按钮。 - 设置
type的值为submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。 - 设置
type="button"，普通按钮，后期结合 js 使用
1.2 label标签
用于标准input标签的语义 <lable>标签的 for 属性与相关元素的 id 属性相同。当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验
1.3 select 下拉标签
select 标签设置多个选项让用户选择
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>注意
- select 中至少包含一对 option。
- 在 option 中定义属性
selected=selected， 表示选中的项，默认选中第一项。
1.4 textarea 文本域表单元素
input 输入框的，xxx版：可以换行，输入的内容比较多。可以滚动
<!-- cols="每行字符数"，rows="显示的行数" -->
<textarea id="" cols="30" rows="10"></textarea>
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
