Day01 HTML

01.HTML基础知识

02.文本标签

03.图片和超链接

04.表格标签

05.细线表格

06.不规则表格

---

01.HTML基础知识

1.web标准
web前端的内容：HTML、CSS、JavaScript
web标准(万维网制定的)中规定HTML是结构标准，CSS是表现标准，JS是行为标准

a.HTML结构标准中规定了网页上能够显示的内容，比如显示文字、图片、音频、视频、flash、按钮、输入框等....
b.CSS表现标准规网页的内容的布局和样式，比如内容该显示在什么位置，内容是什么颜色、多大、多宽等....
c.JS行为标准规定网页的内容在某种情况下发生什么样的改变(动态变化)

2.HTML
a.什么是html
HTML又叫超文本标记语言(是标记语言，不是编程语言)
b.html版本
狭义的h5：指HTML第5个大版本
广义的h5：指的是html5+CSS3+JavaScript
c.html文件结构(由不同的标签组成)

    
        内容是不可见的
    
    
    
        内容是可见的
    

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

说明：
<>，：固定写法，html中所有的标签都是写在<>中的
标签名：不是随意命名的，而是一些固定的值，例如：

-> p标签、a标签、b标签、h1标签、input标签、img标签等。
标签名前不能有空隙
属性：属性放在开始标签中，属性名和值之间用=连接，多个属性之间用空格隔开。属性也可以是自定义的属性也可以是标签自带的属性
标签内容：双标签才存在的标签内容，标签内容可以是任何东西(可以是文字，也可以是其他的标签)
例如：

我是python

，

：结束标签，单标签没有一个单独的结束标签

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

1.head标签：head标签中的内容不可见，一般做一些网页设置性的操作
2.head标签中的内容：head标签中的字标签是固定的：
meta标签：单标签，charset属性用来设置网页的编码方式
title标签：设置网页标题
link标签
style标签
script标签
base标签
body标签中的内容是在网页中可见的部分
html学习目标就是掌握body中常用的标签

02.文本标签

1.标题标签：h1-h6
网页的内容涉及到标题的时候使用

我是标题1
我是标题2
我是标题3
我是标题4
我是标题5
我是标题6

2.段落标签：p
网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自动换行

注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(回车、空格、缩进无效)
但是可以通过一些特殊的符号，来产生特定的效果

空格符： ；
强制换行：

啦啦啦啦啦啦啦啦
绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿

3.文字效果
a.加粗：b标签，strong标签
b标签：单纯的在样式上进行加粗
strong标签：除了将文字加粗显示外还有强调的意义

b.倾斜：i标签，em标签
em标签有强调的意义

啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧啧

4.水平线：hr
单标签

5.列表标签：ul、ol、dl

• ul：无序列表
• ol：有序列表
• dl：自定义列表

                
语文
                
描述语文的文字
                
数学
                
英语
            
            
            
            

                
北京
                
特点雾霾
                
成都
                
大连
                
重庆
            
            
            

                
                
A
                
                
B
                
C
                
                
a
                
b
                
c
            

03.图片和超链接

1.图片标签：img标签
单标签

• src属性：图片地址(可以是本地图片地址，也可以是远程服务器上的图片地址)
• title属性：设置图片的标题(这个标题是鼠标停留在图片上一会 才会显示的)
• alt属性：用来设置图片加载失败的时候出现的提示信息

2.超链接标签：a标签
想要点击跳转的地方都可以使用超链接语法
注意：a标签的内容部分是可见的，是可以被点击的

（1）href属性：跳转目标对应的地址
a.其他的网页地址
b.写本地的一个html路径
c.空 ----- 刷新当前网页
d.选择器 ------ 让网页跳转到指定的位置

（2）target属性：设置跳转方式
_self(默认值)：在当前页中刷新出新的内容
_black：创建一个新的页面，在新的页面中刷新出href指定的内容
注意：刷新当前网页和在当前网页跳转到指定的位置的时候，只能默认使用_self

04.表格标签

1.表格标签：table标签、tr标签、td标签、th标签
table标签：表格整体(一个table标签代表一个表格)
tr标签：行(一个tr标签代表表格中的一行
td标签：单元格(一个td代表一个单元格)
th标签：表头

2.属性
a.border属性：设置表格的边框的宽度(只能作为table)
b.bordercolor：设置边框颜色(只能作用于table)
c.background：设置背景图片
d.bgcolor：设置背景颜色(可以作用于table\tr\td)
e.cellspacing：设置单元格和单元格之间的间距(默认是1)
f.cellpadding：设置内容和单元格之间的间距
g.width：一般作用于某一个单元格，影响的是这个单元格对应的那一列
h.height：一般作用于行，影响的是一行的高度
i.align：设置对齐方式(可以做用以table\tr\td)
作用于table：让整个表格在浏览器中居中
作用于tr/td：让内容在单元格中居中

            
            
            
            

                
                
姓名
                
成绩
                
是否留级
            
            
            

                
张三
                
                
90
                
否
            
            
            

                
李四
                
80
                
                
否
            
        

05.细线表格

XXX信息表

            

                
姓名
                
毕业院校
            
            

                
zk
                
艾利斯顿商学院
            
            

                

                

            
            

                

                

            
            

                

                

            
        
        

06.不规则表格

• colspan：列合并
• rowspan：行合并

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