HTML+CSSday01
浏览器
浏览器内核(了解)
移动端的浏览器内核主要说的是系统内置浏览器的内核。]
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari
web标准(有利于浏览器生态发展)
web标准有三层结构，分别是结构（HTML）、表现（CSS）和行为（Javascript）
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言
- 所谓超文本，有2层含义：因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制) , 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）
HTML 有自己的语言语法骨架格式
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
团队约定：
HTML标签名、类名、标签属性和大部分属性值统一用小写
HTML元素标签分类
- 常规元素（双标签）
<标签名> 内容 </标签名> 比如 <body> 我是文字 </body>
- 空元素（单标签）
<标签名 /> 比如 <br />
HTML标签关系
- 嵌套关系
<head>
<title> </title>
</head>
- 并列关系
<head></head>
<body></body>
文档类型<!DOCTYPE>
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
- 页面语言lang
<html lang="en"> 指定html 语言种类
- en定义语言为英语
- zh-CN定义语言为中文
字符集
<meta charset="UTF-8" />
HTML常用标签
首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。
1）标题标签h (熟记)
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
2）段落标签p ( 熟记)
单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词
可以把 HTML 文档分割为若干段落
<p> 文本内容 </p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
3）水平线标签hr(认识)
单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上
<hr />是单标签
4）换行标签br (熟记)
单词缩写： break 打断 ,换行
5）div 和 span标签(重点)
- div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div
- div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。
- span 跨度，跨距；范围
<div> 这是头部 </div> <span>今日价格</span>
他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们主要记住使用方法和特点就好了
- div标签 用来布局的，但是现在一行只能放一个div
-
span标签 用来布局的，一行上可以放好多个span
文本格式化标签(熟记)
标签属性
所谓属性就是外在特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
图像标签img (重点)
要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。（它是一个单身狗）
语法如下：
<img src="图像URL" />
链接标签(重点)
单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。
语法格式：
<a href="跳转目标" >文本或图像</a>
注释标签
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
特殊字符 （理解）
一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码。
三个表
表格 table(会使用)
- 创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- table用于定义一个表格标签。
- tr标签 用于定义表格中的行，必须嵌套在 table标签中。
- td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
- 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的
<!--align="center"--> 表格居中
<table width="500" border="1" height ="300" cellpadding="30" cellspacing="0" align="center">
<tr>
<th>英雄</th>
<th>价格</th>
<th>皮肤数量</th>
</tr>
<tr>
<td>安琪拉</td>
<td>13800</td>
<td>5</td>
</tr>
<tr>
<td>后羿</td>
<td>8888</td>
<td>4</td>
</tr>
<tr>
<td>韩信</td>
<td>水晶获取</td>
<td>2</td>
</tr>
</table>
列表标签（重点）
- 无序列表ul
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与</li>之间相当于一个容器，可以容纳所有元素。
- 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表 ol （了解）
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
表单标签(掌握)
input 控件(重点)
<input type="属性值" value="你好">
- input 输入的意思
- <input /标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
- 除了type属性还有别的属性
- type 属性
- 这个属性通过改变值，可以决定了你属于那种input表单。
- 比如 type = 'text' 就表示 文本框 可以做 用户名， 昵称等。
- 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的
- value属性 值
用户名:<input type="text" name="username" value="请输入用户名">
value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
- name属性
用户名:<input type="text" name=“username” />
name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
-
name属性后面的值，是我们自己定义的。
-
radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
-
name属性，我们现在用的较少， 但是，当我们学ajax 和后台的时候，是必须的。
- checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
label标签(理解)
目标：label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念： label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？
- 第一种用法就是用label直接包括input表单。
<label >请选择性别 <input type="radio" name="gender" > 男
<input type="radio" name="gender" checked="checked"> 女</label>
第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="gender"> <input type="radio" name="gender" > 男
<input type="radio" name="gender" checked="checked" id="gender"> 女</label>
当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面
textarea控件(文本域)
<textarea >
文本内容
</textarea
作用：
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
select下拉列表
<select name="" id="">
<option value="">黑龙江</option>
<option value="">吉林</option>
<option value="">辽宁</option>
</select>
- 注意：
- select 中至少包含一对 option
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
- 但是我们实际开发会用的比较少
form表单域
目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
综合案例（世纪佳缘注册页面）
