web前端上课总结

对于基础知识的加强和巩固：

1.搭建网页的结构：html5.0
2.对页面的页面元素进行修饰，比如定位等。表现（CSS）
3.和页面的元素进行交互。行为（javascript,jQuery）
4.BootStrap(前段框架)—基于HTML，CSS，JavaScript的，优点简介灵活使开发更快捷。

                                            **第一单元**

1.文件夹、文件命名规则：由英文字母、数字、下划线共同组成，数字不能开头，不能使用汉字 作为文件名
书写标签的时候尽量以严格的方式来书写
1）有结束标签的必须加结束标签
2）标签名尽量用小写
3）属性值必须加单引号或双引号

2. https://www.runoob.com/菜鸟教程

3. 创建HTML时默认首页可以命名为：index或者default
   4.HTML静态文件后缀名：.html或者.htm
   5.HTML是HyperText Markup Language的缩写，译为：超文本标记语言
   注意：HTML不属于编程语言，而是制作网页的基础语言，主要用于描述超文本中内容的显示方式
   6.HTML5版本声明：
   作用：用于告知浏览器使用哪个版本的HTML或XHTML规范
   位置：必须放在html文档的首行，且放置于标签之前
   注意：不属于html标签，就是一条声明语句
   7.字符集声明标签：
   8.< h1 >主页内容< /h1 >
   </ body>
   9.HTML基本骨架
   < html>
   < head>
   < meta charset=”UTF-8”/>
   < title>文档标题< /title>
   < /head>
   < body>主体【页面所有可视部分】< /body>
   < /html>
   10.HTML标签不区分大小写：即与与并无区别
   11.W3C标准包括：HTML、CSS【CSS样式】、JavaScript【脚本】
   12.HTML网页中默认字体大小为：12px、14px【px像素】

                                 **第二单元：常见的HTML标签及其属性**
   

1.HTML基本语法：<标签名 属性=“属性值”>内容</标签名>
2.属性的概念：用来表示标签的特征
属性值的概念：为属性赋的值被称为属性值
3.样式标签：【都属于行内元素】
倾斜：< i>< /i>
倾斜强调：< em>< /em>
加粗： < b>< /b>
强调加粗：< strong>< /strong>
下划线：< u>< /u>
4.HTML特殊符号：
空格： 【英文半角空格】
大于号：>
小于号：<
版权符号：©
双引号："
注册符号：®
连接符号&：&
5.标题标签 H1 至 H6
H1级别最高、字体最大，依次递减，H6级别最低，字体最小
6.段落标签：< p >内容< /p >
7.图片标签：< img/>
8.< br/>换行
标签属性：
（1）宽度属性：width=“数值”【不带单位，默认单位是px】
（2）高度属性：height=“数值”【不带单位，默认单位是px】
（3）图片路径属性：src=“图片路径”
（4）鼠标滑过显示提示文字属性：title=“提示文字”
（5）图片非正常显示时显示提示文字：alt=“提示文字”
注意：所有的标签都具有title属性，除了
标签没有title属性

9、水平线标签：
标签属性：
（1）宽度属性：width=“数值”
（2）颜色属性：color=“颜色名称/十六进制颜色/rgb()颜色”
（3）水平线粗细：size=“数值”
（4）水平对其方式：align=“left/center/right”
10、路径：相对路径、绝对路径
（1）相对路径：自己相对于目标文件的路径
Web/html/index.html
…/index.html【添加…/用于路径不在同一目录下，返回上一级】
（2）绝对路径：完整的描述文件路径，精确到盘符或服务器
例如：http://www.baidu.com【精确到服务器】
C://Web/imgs/01.jpg【精确到盘符】

                   **第三单元：（元素分类、列表标签、超链接标签）**

1、HTML元素分类：行内元素、块级元素、行内块级元素【可变元素】
（1）行内元素（display：inline）：行内元素在同一行显示，只能包含文本或其他的行内元素
注意：默认情况下行内元素不具有宽高属性，也不具有：margin-top和margin-bottom【上下外间距】
举例：a、i、span、img、time、em、strong、label、b、textarea、input、select（img和input可以设置宽高）
（2）块级元素（display：block）：块级元素独占一行，可以包含行内元素或其他块级元素【注意：块级元素具有宽高属性】
举例：div、p、hr、ul、li、ol、dl、dt、dd、table、form、h1-h6
（3）行内块级元素（display：inline-block）：既有宽高属性，同时还有同行特性【能设置宽度，并且在同一行显示】
举例：img、input【默认情况】
< b>hello< /b>
< strong>world</ strong>
< i>斜体字< /i>
< em>强调文本</ em>
< small>小号文本< /small>
< big>大写 不推荐使用< /big>
< sub>下标文本< /sub>
< sup>上标文本< /sup>
h< sub>2</ sub>o 水
m< sup>2</ sup> m的平方
< bdo dir=“rtl”>hello 从右到左输出< /bdo>
2、无序列表标签：< ul>< li>列表项< /li> < /ul>
标签属性：type=“circle（空心圆）/square（实心方块）/disc（实心圆）【默认值】”
< ul type=“circle”>
< li>列表项
< li>列表项
< li>列表项
< /ul>
3、有序列表标签：< ol>< li>列表项< /li>< /ol>
标签属性：type=“A（大写字母）/a（小写字母）/i（小写罗马数字）/I（大写罗马数字）/1（阿拉伯数字）【默认值】”
reversed=“reversed”：设置有序列表的倒叙显示（项目符号倒叙）
4、自定义列表标签：< dl>、< dt>、< dd>、< dl>
< dt>自定义项< /dt>
< dd>自定义描述项< /dd>
< dt>自定义项< /dt>
< dd>自定义描述项< /dd>
< /dl>
5、超链接标签：内容
标签属性：
（1）路径属性：href=“跳转链接的路径”
（2）打开方式属性：target=“_self/_blank/_top/_parent”
_self：当前窗口（原窗口）
_blank：新窗口打开
_top：主框架打开、_parent：父级框架打开
注意：1）超链接是一对一的关系（一次只能连接一个文件）
2）不仅仅可连接到网页，还可以连接到图片
3）超链接可以为用户提供链接下载文件