阶段二-Day1

一、html标签

标签 == 标记

1.标签语法

双标签(常规标签): <标签名 属性名1:属性值1 属性名2:属性值2...> 标签内容

单标签: <标签名 属性名1:属性值1 属性名2:属性值2.../> 或者 <标签名 属性名1:属性值1 属性名2:属性值2...>

说明：

标签名 - 是html中已有的标签，不能自己随便命名。标签名和<以及标签名######和/之间都不能有空隙

属性 - 属性和属性值之间用:连接，多个属性之间用空格隔开。所有的属性没######有位置要求

标签内容 - 在开始标签和结束标签之间，标签的内容可以是任意的（可以文本也可以是其他标签）

2.head标签中的内容

head中的标签有：title，mate, base, link, style, script

title - 设置网页标题

meta - 设置网页元数据(单标签)

3.body

body中的标签主要用来在网页的内容中添加显示信息的

    
        
        
        
        
        
        
    
    
    
        
        内容
        
    

---

二、文本标签

1.标题标签：

h1-h6

h1 - 大标题

h2 - 副标题

h3 - 副标题下的副标题

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

2.段落标签：p

一个段落使用一个p标签。每个p标签中的内容显示完成后会自动换行

 近日，浙江金华市民救助警犬被取保候审一事引发关注。
三个多月前，应女士和丈夫傍晚出门散步，救助了一只在路边翻食垃圾的“流浪狗”，几天后，却被民警告知带回家的是派出所的警犬，夫妻二人涉嫌盗窃被立案，随后被取保候审。
10月27日晚，金华市公安局金东分局发布通报称，2018年6月29日晚，金东公安分局多湖派出所民警发现散放在派出所门口附近的一条警犬被盗。7月3日，金东公安分局对涉嫌盗窃的朱某、应某采取取保候审强制措施。并称，犯罪嫌疑人朱某、应某知道该犬系名贵犬种德国牧羊犬。

3.特殊功能标签和符号

html中文本中的换行、空格、tab等都是无效的（空白无效）

换行：

空格：   

                    床前明月光,

                    疑是地上霜.

                    举头望明月,

                    低头思故乡。
        

4.字体相关标签

加粗：b标签/strong标签

b标签只是单纯的文字效果加粗，strong标签有强调的意思

倾斜：i标签/em标签

i标签只是单纯的文字效果倾斜，em标签有强调的意思

水平线：

---

---

三 、列表标签

列表标签分为有序列表、无序列表、自定义列表

1.有序列表:

ol标签 -- 代表整个列表

li标签 -- 代表列表中的元素

            
基础语法
            
web前端
            
web后端
            
数据和人工智能
            
项目
        

2.无序列表

ul标签 - 代表整个列表

li标签 - 代表列表中的元素

            
Python人工智能
            
HTML5
            
Java大数据
            
自动化测试
        

3.自定义列表

dl标签 - 代表整个列表

dt标签 - 分组名

dd标签 - 分组中的内容

 

            
Python教学部
            
余婷
            
骆昊
            
王海飞
            
肖世荣
            
            
H5教学部
            
吴老师
            
丁老师
            
周老师
         

---

四、图片标签和超链接

1. 图片标签: img

单标签

a.src属性 - 图片地址(可以本地图片路径也可以是网络图片的url)

本地图片：地址可以是绝对路径也可以是相对路径。一般将图片放在img文件夹中，然后写相对路径

b.title - 设置图片标题（鼠标停留在图片上，显示的内容）

c.alt - 设置图片加载失败的提示信息

        
        
        
第二张
        
        
        
第三张
        
        
        
第4张
        
        
        
第5张
        
        
        
第6张
        
        
        
第7张
        
        
        
第8张
        

2.超链接标签: a标签

a. 内容 - 文字/图片

        
            hao123
        
        
        
        
            
        

b.href - 跳转到的目标地址

1）网络地址 - 跳转到指定的网页

2）本地的html文件地址 - 跳转到本地的html对应的网页中

3）空 - 刷新网页

4）选择器 - 在当前网页中，跳转到指定的位置

列表标签
刷新
回到顶部
第二张
第四张

c.target - 跳转方式

_self - 默认值，在当前页面加载新的网页(原网页被覆盖)

_blank - 在新的页面中加载新的网页(原网页还在)

---

五、数据表格

1.表格标签

table标签 - 整个表格

tr - 行

td - 单元格

2.边框相关的属性

border - 边框的宽度

bordercolor - 设置边框颜色(颜色值可以是英语单词 - red，也可以RGB对应的16进制值 - #ff0000)

cellspacing - 单元格和单元格之间的间隙

cellpadding - 设置内容和单元格边框之间的间距

3.背景颜色

bgcolor - 背景颜色

a.作为table属性 - 设置整个表格的背景颜色

b.作为tr属性 - 设置一行的背景颜色

c.作为td属性 - 设置某一个单元格的背景颜色

First Name
Last Name
Points




Jill
Smith
50




Eve
Jackson
94

4.宽度和高度

width - 设置宽度

height- 设置高度

a.作用与table - 设置整个表格的宽度和高度（会按比例分配每一行和每一列的宽度和高度）

b.分别设置每一行的高度和每一列的宽度

姓名姓名
年龄
性别

5.对齐方式

align - center(居中)/left(左对齐)/right(右对齐)

a.作用于table， 让整个表格在其父标签中居中/左对齐/右对齐

b.作用于tr， 让整行中每个单元格中的内容在其单元格中居中/左对齐/右对齐

c.作用于td, 让指定的单元格中的内容居中/左对齐/右对齐

姓名姓名
年龄
性别


小明
18
男

---

六、复杂表格

1.制作复杂表格的方法：

a.确定表格的最大行数, 在table中用tr表示出来

b.确定每一行有多少个单元格,用td表示出来

c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并设置colspan的值