2018-09-17 Day21-Web前端

web标准

web前端的内容：HTML、CSS、JavaScript

web标准（万维网指定的）中规定HTML是结构标准，CSS是表现标准，JS是行为标准。

• HTML结构标准：规定了网页上能够显示的内容，比如显示文字、图片、视频、Flash、按钮、输入框等...
• CSS表现标准：规定了网页的内容的布局和样式，比如内容该显示在什么位置，内容是什么颜色、大小等...
• JS行为标准：规定网页的内容在什么情况下发生什么样的变化（动态变化）。

HTML

HTML又叫超文本标记语言（不同于编程语言）

H5：
狭义 --> 指html第5个大的版本
广义 --> 指的是 html5 + CSS3 +JavaScript

1、HTML文件结构 （由不同的标签组成）

    
        
        
    
    
        内容可见
    

2、HTML中的标签

网页中的内容就是通过HTML中不同的标签（标记）来确定。
标签语法：
a、双标签（常规标签）：
<标签名 属性1=属性值1 属性2=属性值2 ……> 标签内容
b、单标签：
<标签名 属性1=属性值1 属性2=属性值2 ……>
或者
<标签名 属性1=属性值1 属性2=属性值2 ……/>

说明：
<>, ：固定写法，html中所有的标签都是写在<>中的。
标签名：不是随便命名的，而是一些固定的值。例如p标签，a标签，h1标签……
属性：属性放在开始标签中，属性名和值之间用 = 连接，多个属性之间用空格隔开。属性可以是自定义属性，也可以是标签自带属性。
标签内容：双标签才存在标签内容，标签内容可以是任何东西。
：结束标签，单标签没有一个单独的结束标签。

3、基本语法

HTML语法中大小写不敏感。
文件名命名要求：由字母和数字组成，但是数字不开头，一般用小写字母。网站首页一般是 index.html

：用来说明当前html文件使用的版本。其中 html 代表 html5 。

4、head标签

head标签：里面的内容一般是不可见的，一般做一些网页设置性的操作。

head标签中的内容：meta标签、title标签、link标签、style标签、script标签、base标签

5、body标签

body标签：里面的内容一般是可见的，是网页中的主体

h1标签
范围：h1 - h6

我是标题1

段落

文字段落

注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果。

可以通过一些特殊的符号来产生一些特殊的效果：
  --> 空格

--> 强制换行

---

--> 水平线

文字效果

• 加粗
  b标签：单纯在样式上进行加粗
  strong标签：除了将文字加粗显示外，还有强调的意义。
• 倾斜
  i标签：倾斜
  em标签：倾斜，有强调作用

列表
ul--无序列表

        

            
语文
            
数学
            
英语
        

ol--有序列表

        

            
北京
            
成都
            
大连
        

dl--自定义列表

        

            
A
            
            
1
            
            
2
            
B
            
one
            
two
        

图片
img标签 --> 单标签

超链接

href属性
        百度
        刷新
        第一张
        
target属性
        
        
        
        

表格
table标签、tr标签、td标签、th标签

快捷创建表格：table>trn>trm 然后tab补全。
创建一个n行m列的表格

表格边框为1处理：边框设置为0，表格颜色和单元格颜色不同即可。

        

            
成绩表
            

                
姓名
                
成绩
                
是否留级
            
            

                
星辰
                
90
                
否
            
            

                
云落
                
85
                
否
            
        
        

复杂表格的过程：
先确定表格最多有多少行，再确定每行有多少个单元格再确定每个单元格是否有合并现象，如果有就设置单元格的colspan属性，如果有列合并就设置单元格rowspan属性。