HTML基础
开发工具
-
- 编辑器：
dw：省事儿、控件的拖动
sublime:文艺青年喜欢用
webstorm:编辑快速
Hbuilder:快、生成安装包
Vscode:逻辑性高、各个公司都用（最终选择它）
-
- 五大主流浏览器：——因为内核不同
火狐浏览器 Geoko
谷歌浏览器（最终选择它） Webkit->Blink
IE浏览器 Trident
safari浏览器 Webkit
欧朋浏览器 Blink
-
- PS ：做图的，对于前端开发工程师,切图（辅助）
浏览器内核
- 渲染引擎：如何将内容展示在浏览器端
- js引擎：解析和执行JavaScript代码的
web标准
- 定义： 不是一个标准，而是一个标准的集合
结构标准：HTML标准
表现标准：CSS标准
行为标准：JavaScript标准
- 作用：
- 减轻的程序员的压力，只需要开发一套程序即可 （程序员的角度）
- 无序重写、降低流量、容易被搜寻引擎搜索、提高网页的速度，（浏览器的角度）
- 降低公司的成本，更易维护（公司的角度）
HTML骨架
- 定义：HTML “超文本标签语言”，是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接
- 特点：
- 1、HTML不是一种编程语言，而是一种标记语言
- 2、标记标签组合而成
- 总结：HTML就是来搭建网页的，是网页的结构
- 骨架：
- html:根标签
- head:网页的头部，主要是设置一下网页的属性 body:网页的主体
- title:网页的标题
- 标签与标签之间的关系：
- 嵌套关系（父子关系）：html与body
- 并列关系（兄弟关系）：head与body
- 标签的分类：双标签：<html></html>
- 单标签：<meta>、<br>、<hr>、<img>、<base>
常用的标签
- 标题标签 :h1-h6 head
-
- 特点：
- 1、文本自动加粗加大
- 2、文本的字体大小与h后边的的数字成反比
- 3、自动换行
- 特点：
- 段落标签 paragraph p
- 特点：自动换行
-
水平线标签 hr horizon
-
特点：显示一条横线 单标签
-
- 换行标签 br
- 特点：1、单标签 2、可以在文本内容中随处换行
- 盒子标签 div
- 特点：用div来进行网页布局
- 组合行内元素标签 span
- 特点：最典型的行内元素，2、不会换行
文本语义化标签
- 加粗 b strong
- 斜体：i em
- 下划线：u ins
- 删除线：s del
- 区别：strong/em/ ins/del跟具有语气话及强调
图片标签 img
- src属性：图片的路径 <img src="图像URL" />注意添加后缀名jpg/png/gif/psd
- 浏览器展示图片的大小就是默认大小
- width:图片的宽
- height:图片的高度
- title:图片的标题 光标移动到图片上显示对应的属性值
- alt:图片不显示时，显示alt的属性值
- 相对路径：相对于当前位置
1、图片在当前文件夹下 ./ 或者不写
2、图片在当前文件的下一级目录
3、图片在当前文件的上一级目录../
- 绝对路径：路径是文件的整个目录
链接标签 anchor单词的缩写 锚
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:跳转的路径
- （跳转方式 跳转线上 跳转本地 #暂时不知道往哪儿跳转 ）
打开方式
- 跳转链接后，默认在当前的窗口打开
- 在新的窗口打开 target="_blank"
- 在当前窗口打开 target="_self"
锚点链接
- 给指定的内容添加id属性，其次在标题中添加链接标签，href的属性值用#与id名对应即可
Base
base标签的target属性设置整个网页中所有a链接的跳转方式
列表标签
分类：无序列表(ul)、有序列表(ol)、自定义列表 (dl)
无序：特点：
- 1、独占一行
- 2、没有顺序
- 3、每一行前有个小点
有序： 特点：1、独占一行
2、有顺序
3、每一行前有顺序数字
表格 table
什么是表格 ？
- 表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。
表格的组成 行 tr 单元格 td
建立表格步骤
- 建立表格，
- 判断行数和列数
- 用行去包含单元格
- 在每个单元格中去添加内容
表格的各大属性
- cellspacing：边框与边框之间的距离
- Cellpadding:单元格内容与边框之间的距离
- Border:表格的边框(默认边框值为“0”)
- width:表格的宽
- height:表格的高
表格的结构：
- 标题：caption标签
- 表头：thead标签 表格的第一行，一般用来描述每一列所显示的内容，用thead标签讲第一行包起来，然后用th替换td，单元格中的内容相对于单元格水平居中，且加粗
- 表格主体：tbody标签
-
表格的标题，caption只在表格中使用(紧随table之后)
合并单元格
-
分类：跨行合并、跨列合并
-
步骤
1、判断是跨行合并还是跨列合并
2、跨行合并用rowspan属性，跨列合并用colspan属性
3、将属性写在需要合并的单元格上
4、将合并的行数或者列数写在对应的属性值中
5、将多余的单元格注释掉
表单
什么是表单： 表单是一块可采集用户数据的区域
作用：显示、存储、提交数据
组成：表单标签、表单域、提交按钮
表单标签：action:表单向后台提交的地址
method:向后提交的方式 get post
name: 指定表单名称，以区分同一页面多个表单
表单域：表单中的元素 其中包含了文本框、密码框、隐藏域、多行文本框、 复选框、单选框、下拉选择框和文件上传框
input控件
获取焦点：光标放在输入框内，可以打出文字
单击指定的名字获取焦点则需要将label标签中的属性值与input输入框的属性值保持一级即可
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
type: 设置文本框类型
value:输入框的值 , 表示发送到服务器的值
name: 表示发送到服务器的键名
placeholder：文本提示信息
一些input
- 普通的文本框 type = text
- 密码框 :type=post
- 单选框:type =radio
- 多选框：type = checkbox
- 普通按钮：button
- 提交按钮：submit
- 重置按钮：reset
- 图片按钮：image
单选框、多选框的默认选中
1、checked="checked
2、checked
3、checked=true
选择框默认选中
1、selected=”selected”
2、selected
3、selected=true
多行文本标签：textarea
<textarea cols="宽度 " rows="高度"> 文本内容</textarea>
下拉菜单： select标签
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
