WEB前端 --Day1（html）

一、网页开发基础知识

网页文件：使用html标记语言书写的文本文件

作用：可以在浏览器中按照设计者所设计的方式显示指定的样式

网页主要由三部分组成：结构，表现和行为

​ 结构：网页的结构和内容【一个网页包含各级标题，正文段落等】------》html

​ 表现：设定网页的表现样式【每个组成部分的字体，颜色，字号】------》css

​ 行为：控制网页的行为【网页可以发生变化，可以和用户进行交互】----》javascript

总之：结构决定了网页是什么，表现决定了网页是什么样子，行为决定了网页能做什么

其中：最初，html需要承担结构和表现双重任务

二、html简介

1.概念

HyperText Markup Language, 超文本标记语言，是最基础的网络编程语言，是解释性的语言

超文本：超出文本的范畴

标记：html中所有的操作都是通过标记实现的，标记就是一个标签

2.第一个html程序

代码演示：

    
        
    
​
    
        这是第一个html程序
和Python的区别
        

        
        hellohello
    
    

    
        
        
        
        
    
    
    
        hello
    

​

3.html的编码规范

a.一个html文件都包含指定的开始标签和结束标签:

b.html包含两部分内容：

​ head：用来设置html页面的属性和配置信息

​ body：需要显示在网页上的内容

c.head中包含内容：,body中包含任意的标签

d.一般情况下，所有的标签都由开始标签和结束标签组成，但是，一些标签只有开始标签，没有结束标签

​ 例如：
换行

​           

---

水平线

e.html中的标签不区分大小写

4.html的思想

封装

网页中很多的数据，不同的数据可能需要有不同的显示效果，这个时候需要使用标签将需要操作的数据封装起来【开始标签和结束标签之间】，通过修改标签的属性就可以概念数据的样式

一个标签就是一个容器，想要修改数据的样式，则只需要设置容器的属性

三、html中常用的标签

1.注释标签、文字标签和段落标签

1.1注释标签

html的注释： 【！为英文状态下的】

添加注释：快捷键 ctrl+/ 【取消注释：仍然按ctrl+/】

1.2文字标签

文字标签：
​
    标签：
​
    
​
    属性：
​
    size:文字的大小，取值范围为1~7，数值超过7则表示7的大小
​
    color:文字的颜色
​
        方式一：英文单词【red，green，yellow等】
​
        方式二：使用十六进制表示    
​
            举例：#123456，每两位代表一种颜色，分别是三原色中的红色，绿色，蓝色【RGB】
            #ffffff:白色      #000000：黑色
        方式三：rgb(r,g,b)    rgba(r,g,b,a)
            其中的参数r,g,b的取值范围0~255    a表示透明度，取值范围0~1

代码演示：

    
        
        
    
    
        文字字体
    

1.3段落标签

段落标签：

特点：会自动换行​ 在其中可以嵌套其他的标签

代码演示：

    
        
        
    
    
        
第一段落
        
第二段落
        

            贾乃亮与李小璐是在某个饭局上认识，
            随后他就对女方一见钟情，锲而不舍展开疯狂追求。
            李小璐曾在某访谈节目中透露，当时贾乃亮为了追求自己，
            还特别去打了一串与自己一样的耳洞，而且感染化脓，就只是为了引起她的注意，
            还有一次是李小璐发烧生病，贾乃亮衣不解带的守在身边照顾了5天5夜，连头都来不及洗，
            就是一直陪在自己身边。但是这也没让李小璐接受对方的追求，直到快1年了，有一次她看到贾乃亮喝醉，
            在自己面前委屈痛哭，才惊觉对方是对自己是认真的，才点头同意交往
        
    

    
        
        
    
    
        
        

            就是一直陪在自己身边。但是这也没让李小璐接受对方的追求，直到快1年了，有一次她看到贾乃亮喝醉，
            在自己面前委屈痛哭，才惊觉对方是对自己是认真的，才点头同意交往
        
        
第二段落
    

    
        
        
    
    
        
望庐山瀑布
        
        
fhjgjagh
        
        
hfjghaj
        
    

1.4和文字有关的其他的标签

    
        
        
    
    
        
        hello
        hello
        hello
        
        
        hello
        hello
        
        
        hello
        hello
        
        
        hello
        hello
        
        

        
        
        
        25
        log2
​
    


2.标题标签、换行标签和水平线标签

2.1标题标签

说明：n的取值范围：1~6，通过数字的大小表示标题的层级关系，数字越大，表示标题对应的文字越小，注意：标题标签会自动换行

代码演示：

    
        
        
    
    
        
        
问君能有几多愁
        
问君能有几多愁
        
问君能有几多愁
        
问君能有几多愁
        
问君能有几多愁
        
问君能有几多愁
        
        
        

        

    

2.2换行标签

2.3水平线标签

---

属性：

​ size:水平线的宽度

​ color:水平线的颜色

3.图像标签

属性：

​ src：图片的路径

​ 网络资源：直接赋值网址即可

​ 本地资源：资源一般情况下加载到当前工程下【相对路径】

​ width：图片显示的宽度

​ height：图片显示的高度

​ 方式一：使用px【像素】作为单位

​ 方式二：以百分比表示

​ alt：图片上文字提示【图片的替换文本，当图片资源加载不出来的时候显示该文字】

​ title：鼠标悬浮标题，注意和alt的区别

代码演示：

路径

绝对路径：包含盘符的路径

相对路径：没有盘符，表示一个文件相对于另外一个文件的位置，在web开发中常用相对路径

体现形式：

​ a.图片文件和html文件是平级

​ b.图片的上级目录或者上上级目录和html文件是平级【最多】

​ c.html的上级目录或者上上级目录和图片是平级

4.超链接标签

1》链接资源

属性：

​ href：表示需要链接到的资源的路径【类似于img中图片的路径】

​ target：设置打开的方式，默认在当前窗口中打开

​ _blank:在一个新的窗口中打开指定资源

​ _self:在当前窗口中打开指定资源

代码演示：

    
        
        
    
    
        
        点击
        
        百度一下
        
        
        
        百度一下~~~
        
        
        
        
            
        
        
        
        
        点我点我
        
        不链接
        
    

2》定位资源

a.回到顶部

b.定位到指定页面的指定段落

5.块标签

；其中的内容原样输出

：会自动换行，使用最广，主要用于页面的划分【百度云盘，qq空间】

：和div类似，不会自动换行【注册用户时错误后面的提示】

代码演示：

    
        
        
    
    
        
        
        
            hello
            html
            
            这一秒             不失望，
            下一秒就有          希望
        
        hello
        html
        这一秒                  不失望，
        下一秒就有          希望
        
        
111
        
222
        
333
        
        aaa
        bbb
        ccc
        
    

字符实体

代码演示：

    
        
        
    
    
        
        hello    hi
        
        

        
        <html>代表html页面的开始
        
        
        2×3=6
        6÷3=2
        
        

        
        ©版权：清华大学出版社
        
        ®注册商标
    

6.列表标签

6.1自定义列表

a.自定义列表/解释型列表【了解】

​

；表示列表的范围【父标签】

​

:上层内容【子标签】

​

:下层内容【子标签】

代码演示：

    
        
        
    
    
        

            
千锋教育
            
教学部
            
人事部
            
财务部
            
行政部
        
    

6.2有序列表

b.有序列表

​

有序列表的范围【父标签】

​

:具体内容【子标签】

​ 属性：type;设置排列方式，默认为阿拉伯数字，还可以设置为字母和罗马数字

代码演示：

    
        
        
    
    
        
        

            
html
            
java
            
pathon
            
php
        
        
        

            
html
            
java
            
pathon
            
php
        
        
    

6.3无序列表

c.无序列表

​

:无序列表的范围【父标签】

​

:具体内容【子标签】

​ 属性：type：圆点【disc】，空心圆【circle】，方框【square】，默认为disc

代码演示：

    
        
        
    
    
        

            
html
            
java
            
pathon
            
php
        
    

7.音视频标签

html5新增的标签

音频：

视频：

代码演示：

8.表格标签

作用：可以对数据进行格式化，使得数据显示更加清晰

标签：

​

；表格的范围【父标签】

​ :行【子标签】

​ :单元格【是tr的子标签】

​ ：和td是相同，不同的是其中的文本加粗显示

​ :设置表格的标题【不常用】

属性：

​ border:表格线条的宽度

​ bordercolor:线条的颜色

​ cellspacing:单元格之间的间隔

​ width：表格的宽度或者单元格的宽度

​ height：表格的高度或者单元格的高度

​ align:对齐方式，取值为left，center，right,默认居左对齐【table/td/tr】

代码演示：

    
        
        
    
    
        
        
        

            

                
姓名
                
年龄
                
性别
            
            

                
东方不败
                
20
                
男
            
            

                
岳不群
                
22
                
女
            
            

                
林平之
                
30
                
男
            
        
    

合并单元格：

    
        
        
    
    
        
        

            

                
人员信息
   
            
            

                
东方不败
                
20
                
男
            
            

                
岳不群
                
22
                
女
            
            

                
林平之
                
30
                
男
            
        
        
        
        
        

            

                
东方不败
                
男
                
20
            
            

                
岳不群
                
女
            
            

                
林平之
                
男