一、 前端开发做什么
1. 传统前端：html+css+js
2. HTML5大前端：各种端的兼容开发、Ajax+服务器端的开发、高级设计模式和框架、网站安全、SEO优化、测试、源代码管理、移动APP和移动站点的开发（了解即可）
二、 HTML课程要点
HTML简介
1.什么是HTML？
超文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言；
HTML 不是一种编程语言，而是一种标记语言；
标记语言是一套标记标签 ，HTML使用标记标签来描述网页 。
2.html的文件命名
必须是小写字母开头，后接下划线、数字、字母，不可使用中文或特殊字符作为文件名。
HTML的语法结构
1. HTML标签的规范
（1）HTML标签是由尖括号包围的关键词，比如<html>；
（2）HTML标签通常是成对出现的，比如<b>和</b>；
（3）标签对中的第一个标签是开始（开放）标签，第二个标签是结束（闭合）标签；
（4）HTML也存在单标签，例如<br/>、<img/>
2. Html标签结构初体验（标签、属性、元素、注释）
三、 Html常用标签1
h1,h2,h3,h4,h5,h6：标题系列标签
作用：把页面上的文字加上标题的语义，其中h1定义标题的语义化最重；
【注意：一个页面只能有一个h1标签。】
p：段落标签
作用：给页面的上一段文字加上段落的语义
hr
作用：在页面显示一条横线，默认占整行。hr 元素可用于分隔内容。
br
作用：换行。
文本格式化标签
（1）b , u , i , s：视觉要素
作用：
b(Bold)：加粗
u (Underlined): 下划线
i(Italic): 倾斜
s(Strikethrough): 删除线
【没有语义的标签，i标签经常会用于不需要语义化的位置，例如放一个小图标】
（2）strong, ins,em, del：表达要素
作用：
strong:加粗 语义：加强语气
ins:下划线
em:倾斜
del:删除线
【可以作为语义化标签使用。】
（3）sub、sup：定义下标字、上标字
预格式文本
1）HTML 输出空格
当显示页面时，浏览器将所有连续的空格或换行都会被算作一个空格。
2） pre标签：预格式文本，保留原本的结构，保留空行和空格
四、 Html常用标签2
列表
（1）无序列表(ul)：(重点)
作用：显示一列没有排列顺序的数据。
代码：ul:Unordered List li:List Item
注意：
ul标签是用来管理li标签，所以ul中只能出现li。
li标签是一个容器，可以放其它标签。
（2）有序列表(ol)：（用的很少）
作用：显示一段有顺序的数据。
代码：ol:Ordered List
注意：有序列表中的所有数据都是顺序的。
（3）自定义列表(dl)
作用：显示一段数据，格式自己定义
代码：dl:Definition List dt:Definition Term dd:Definition Description
注意：一个dl中可以有多个dt和多个dd。
超链接，锚链接a
（1）作用：跳转页面；
（2）a标签属性：
| 属性 | 属性值 |
| href | a标签的跳转目标地址 |
|
target | 设置连接的跳转方式： _blank:保留原始页面，再进行跳转 _self:在当前页面进行跳转 |
补充：<base target=“blank”>为页面上所有a标签设置跳转方式（一般放在titile标签下面）
img
（1） 作用：在页面显示一张图片。
（2） 属性：
（3）涉及到的路径问题：
第一种：绝对路径
带有盘符的路径：C:\Users\Administrator\ html的基本语法\img讲解\images
缺点：可移植性不强，一般情况下不直接使用绝对路径。
第二种：相对路径
a. 如果页面与图片在同一目录下面：
b. 如果页面在图片一上级目录：
c.如果图片在页面的上一级目录：
总结：平时开发一般都是用相对路径：因为相对路径的可移植性要强。
表格table
早期网站开发中，人们喜欢作用表格布局，使用非常的泛滥。到了2008年之后，人们意识到表格的局限性，所以改为用div+css模式。【2002.Sina.com.cn、2004.sina.com.cn】
作用：用来将数据以表格形式显示出来。
最简单的表格格式：
完整的表格格式：
行分组：thead、tbody、tfoot
| 常用属性 | 作用 |
| border | 给表格加上了边框 |
| width | 给表格设置宽 |
| height | 给表格设置高 |
| cellspacing | 规定单元格之间的空白。 |
| cellpadding | 规定单元边沿与其内容之间的空白。 |
| align： center,left,right | 设置table上，决定表格显示的位置 |
| 例如：<table border="1" width="800" height="400" cellspacing="0" cellpadding="0"> | |
表单form
1.表单标签（<form></form>）
<form>
...
input 元素
...
</form>
作用：用来收集用户的信息，将来提交到服务器。
| 标签 | 属性 | 属性值+作用 |
| input | type
| text:文本框 password：密码框 button:按钮 reset:重置 image:图片提交 submit:提交 hidden:隐藏域 radio:单选框 checkbox:多选框 submit是提交按钮 起到提交信息的作用 |
| value | 给文本和按钮(text,password,button 用于设置默认值 | |
| select | option | 下拉框 |
| textarea |
| 文本域 |
注意点：
1.如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同的name属性。
2如何给radio,checkbox设置默认值呢？
A:设置另外一个属性：checked=”checked”
3.我需要给下拉框设置默认值？
A:selected="selected"
div
1. 块级元素的代表
2. 特点：
1.0独占一行
2.0可以设置宽高
3.0默认宽度一整行
span
1. 行内元素的代表
2. 特点：
1.0一行里面可以显示多个
2.0无法设置宽高
3.0宽高由内容来决定
6974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
