1、初识html
1.1、网站
1、网站是指因特网根据一定的规则，使用html等制作的用于展示特定内容相关的的网页的集合
2、网页是网站中的一“页”，通常是HTML文件，它要通过浏览器来阅读。
3、html：用来描述网页的一种语言，是超文本标记语言（可以放图像、文字标签、链接标签、视频标签等）
4、浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
1.2、web标准
1.2.1、web标准的构成(结构、样式、行为相分离）
1、结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
2、表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要是CSS
3、行为：行为是指网页模型的定义及交互编写，现阶段主要学的是javaScript
1.3html标签
1.3.1语法规范.
3、标签关系：
（1）包含关系
（2）兄弟关系
1.3.2html基本结构标签
1
2、开放工具
下面展示一些 内联代码片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>你是优秀滴人</title>
</head>
<body>
写代码是一件快乐的事情
</body>
</html>
3、常用标签
（1）标题标签(html提供了6个标题标签，1标题最重要）
标题标签独占一行
（2）段落标签和换行标签
a、段落
<p> 我是段落 </p>
特点：一个文本在一个段落中会根据浏览器的大小自动换行，段落与段落之间有间隙。
b、换行(单标签）
<br11> 换行
（3）文本格式化标签
（4）div标签和span标签
这两个标签是没有语义的，它们就是一个盒子，用来装内容的
<div> 这是头部 </div>
<span>今日价格</span>
div：分割、分区 。span意为跨度，跨距。
特点:
div用来布局，但是一行只能放一行
span可以跨行，一行可以放多个span
（5）图像标签和路径标签
a、图像标签（单标签）
<img src="图像URL” />
src是图像标签的必须属性，它用于图像文件的路径和文件名
<h4>alt: 替换文本，图像显示不出来的时候用文字替换 </h4>
<img src='图像地址' alt=“图像描述‘
其他图像标签
属性之间是不分先后顺序的
属性采用键值对的格式，即 key=”value"的格式，属性 =”属性值“
1.4html要点
1.4.1路径
1、相对路径：以文件所在位置为参考基础，而建立的目录路径
2、绝对路径
绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
1.4.2超链接标签
1、链接的语法格式
<a href ="跳转目标” target=“目标窗口的弹出方式" > 文本或图像</a>
target="_blank"------>新窗口打开
target="_self"------->在当前窗口打开
2、链接的分类
1.4.3特殊字符
1.4.4表格语法
一、表格基础
1、< table>< /table> 是用于定义表格的标签。
2、< tr> </ tr>标签用于定义表格中的行，必须嵌套在< table> </ table>标签中。
3、< td>< /td>用于定义表格中的单元表格，必须嵌套在 < tr > < /tr >标签中，表示列。
4、字母td指的是表格数据，即数据单元格的内容。
二、表格属性
代码如下：
三、合并单元格
1、跨行合并：rowspan=“合并单元格的个数”，最上侧单元格为目标单元格。
2、跨列合并：colspan=“合并单元格的个数”，最左侧单元格为目标单元格。
四、合并单元格三步曲
1、先确定跨行还是跨列
2、找到目标单元格，写上合并方式=合并单元格的数量.
比如< td colspan=“2”>< /td>
3、删除多余的单元格。
1.4.5列表标签
1、列表标签可以分为三大类：无序列表、有序列表，自定义列表。
一、无序列表
二、有序列表
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华 10000</li>
<li>柳哈 9080</li>
<li>猪猪女孩 7973</li>
</ol>
效果
有序列表注意事项：
1、
-
中只能嵌套< li> < /li>,直接在< ol>标签中输入其他标签或者文字的做法是不被允许的。
2、< li>与< /li>之间相当于一个容器，可以容纳所有的元素。
3、有序列表会带有自己的样式属性，但实际使用时，我们会使用CSS来配置
三、自定义列表
<dl>
<dt>关注我们</dt>
<dd>联系我们</dd>
</dl>
效果
1.5表单
1、表单由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
1.5.1表单域
1、< form>标签用于定义表单域，以实现用户信息的收集和传递。
<form action="ul地址" method="提交方式" name="表单名称">
各种表单元素控件
</form>
1.5.2表单元素
1、< input>单标签
type表示如下
input标签的属性
注意：
1、name、value是每个表单元素都有的属性值，主要给后台人员使用
2、name表单元素的名字，要求 单选按钮和复选框要有相同的name值
代码
3、单选框和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮。
<form>
用户名：<input type="text" name="username" value="请输入用户名" /><br />
<!-- 单选框 -->
性别： 男<input type="radio" name="sex" value="men" /> 女<input type="radio" name="sex" value="gril" /><br />
<!-- 多选框 -->
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭" /> 睡觉
<input type="checkbox" name="hobby" value="吃饭" /> 学习
<input type="checkbox" name="hobby" value="吃饭" /><br />
</form>
效果：
2、普通按钮
<form>
<!-- 点击提交按钮，可以把表单form里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册" />
<input type="reset" value="重新填写" />
<input type="button" value="获取短信验证码" />
<!-- 上传文件使用的 -->
<input type="file" />
</form>
1.5.3< label>标签（标注标示的意思）
该标签用于绑定一个表单元素，当点击< label>时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
核心：< label> 标签的for属性应当与相关元素的id属性相同
1.5.4seclect
1、选择多，节约空间，可以采用< select>标签来定义下拉表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
在< option>中定义selected =“selected”时，当前项即为默认选中项
1.5.5 textarea文本域元素（输入内容多）
<form>
今日反馈：
<textarea colos="50" rows="5">
ahbiqbdj1dbn
</textares>
</form>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
