HTML day1课堂总结

1.认识HTML

       1.什么是HTML （标准结构）
    HTML是超文本的标记语言
    
    超文本 - 除了文字以外，还可以对图片、音频、超链接、按钮、输入框等进行标记
    标记语言 - 不是编程语言，和MacDown语法一样，只是通过不同的标记让内容以不一样的形式显示出来。
               如果语法出错不会影响其他正确的标记的效果
    
    2.什么是HTML文件
    文件后缀.HTML的文件；可以直接通过浏览器打开。一般情况下，HTML代码
就是写在HTML文件中
    
    3.HTML版本
    狭义的h5 - HTML第五个大版本（支持移动网页开发）
    广义的h5 - HTML5+css3+js
    
    4.网页结构 - 树
    整个网页是一个HTML标签，HTML中直接包含head标签和body标签
    
    5.标签
    HTML就是通过不同的标签对网页中的内容进行标记
    a.结构
    双标签：<标签名 属性名1=属性值1 属性名2=属性值2....>标签内容
    单标签：<标签名 属性名1=属性值1 属性名2=属性值2....>或<标签名 属性名1=属性值1 属性名2=属性值2..../>
    b.说明：
    标签名 - 只能写HTML提供的标签，不能随便命名；标签名前不能加空格
    属性 - 属性是放在单标签或者双标签的开始标签中，以‘属性名=值’的形式出现，多个属性用空格隔开；
               属性顺序随意，不会影响最终的结果
       标签内容 - 双标签的开始标签和结束标签之间是标签内容；
标签内容可以是任意内容（可以写文字，也可以放其他标签）
    
    6.head标签
    head标签中主要包含以下内容：
    meta标签  - 元标符（单标签）
    title标签 - 设置网页标题
    link标签  - 导入外部文件（设置图标，导入css文件）
    style标签 - 导入css代码
    script标签  - 导入js文件和js代码
    base标签 - 设置网页中的基本url
    
    注意：HTML语法中不区分大小写，html==HTML=Html

    DOCTYPE - 对HTML版本进行说明
    HTML - 当前使用的是HTML5
    HTML public - 当前使用的是HTMl4.01

    
    网页基本结构

        
        head标签中的内容除了标题和图片其他都不可见

   ```
        
        设置网页中文本的编码方式
    ```
    
  ```
        
        设置网页标题
   ```
    

    
        网页内容部分（可见的）

---

---

---

2.文本标签

    
        
        
    
    
    
    
        1.标题标签(h1~h6)
            双标签
            网页中标题的部分使用标题标签
        
        我不是标题
        
我是标题1
        
我是标题2
        
我是标题3
        
我是标题4
        
我是标题5
        
我是标题6
        
新党“很震撼连线”：
            台湾表态支持统一的民众增多
        2.段落标签(p)
            双标签
            网页中一段文字就用一个p标签；一个p标签的内容在一个段落显示，如果有多个段落需要多个p标签
            
            注意：html中，在文本内容中输入回车，换行无效(在网页上显示的时候)
    
        
     中国台湾网11月2日讯 据香港中评社报道，参选台北市议员的新党青年军“很震撼连线”苏恒、
            林明正和侯汉廷接受中评社访问，谈到此次选举皆表示，在拜票过程中发现，
            民众表态支持统一的人变多。即使去属于较绿的区域，他们知道新党支持统一，
            也对统一的声音愿意理性地来讨论，另外就是民众普遍对年轻候选人友善，愿意给机会，
            这是此次选举氛围和以往最大不同之处。
        
新党目前在台北市议会中有两席，潘怀宗、陈彦伯，在此次台北市议员选举总共推出7名参选人。
            3名青年军参选，包括中山大同的苏恒、松山信义的林明正和士林北投的侯汉廷，
            组成“很震撼（恒正汉）”连线，期望青年军能替新党在台北市议会取得更多席次。
  
            
        3.文本符号和强制换行标签
            a.空格符号：
              - 空一个像素 
              - 一个空格  
            
            b.换行标签(br)
            单标签
        
        
          
中国台湾网11月2日讯 据香港中评社报道，参选台北市议员的新党青年军“很震
撼连线”苏恒、         林明正和侯汉廷接受中评社访问，谈到此次选举皆表示，在
拜票过程中发现，
            民众表态支持统一的人变多。即使去属于较绿的区域，他们
知道新党支持统一，

            也对统一的声音愿意理性地来讨论，另外就是民众普遍对年
轻候选人友善，愿意给机会，

            这是此次选举氛围和以往最大不同之处。
            
        
 新党目前在台北市议会中有两席，潘怀宗、陈彦伯，
在此次台北市议员选举总共推出7名参选人。

            3名青年军参选，包括中山大同的苏恒、松山信义的林明正和
士林北投的侯汉廷，

            组成“很震撼（恒正汉）”连线，期望青年军能替新党在台北市议
会取得更多席次。ΔΘ
  
        
        4.文字效果标签
            a.文字加粗
            b标签 - 单纯的对文字进行加粗
            strong标签 - 除了对文字进行加粗，还有强调的意思
            
            b.文字倾斜
            i标签 - 单纯的对文字进行倾斜
            em标签 - 除了对文字进行倾斜，还有强调的意思
            
            c.水平线(hr)
            单标签
            hr标签 - hr所在的位置设置一个水平线
        
        

        
新党目前在台北市议会中有两席，潘怀宗、
陈彦伯，在此次台北市议员选举总共推出7名参选人。

            3名青年军参选，包括中山大同的苏恒、松山信义的林明正和
士林北投的侯汉廷，

            组成“很震撼（恒正汉）”连线，期望青年军能替
新党在台北市议会取得更多席次。
  
        
        5.文字标签(font)
            单纯的显示一段文字，多个font标签之间不会自动换行
（多个p标签之间会自动换行）
        
        
            新党目前在台北市议会中有两席，潘怀宗、
陈彦伯，在此次台北市议员选举总共推出7名参选人。


            3名青年军参选，包括中山大同的苏恒、松山信义的林明正和士
林北投的侯汉廷，

            组成“很震撼（恒正汉）”连线，期望青年军能替
新党在台北市议会取得更多席次。
        
        
            新党目前在台北市议会中有两席，潘怀宗、
陈彦伯，在此次台北市议员选举总共推出7名参选人。


            3名青年军参选，包括中山大同的苏恒、松山信义的林明正和士
林北投的侯汉廷，

            组成“很震撼（恒正汉）”连线，期望青年军能替
新党在台北市议会取得更多席次。
        
        
    

---

---

---

03-列表标签

    
        
        
    
    
        
        
        
高考学科:
        

            
数学
            数学是最难的！
            
语文
            
英语
            
物理
            
化学
            
生物
        
        
        
        
香椒牛肉做法:
        

            
将牛肉放水里煮熟，煮的时候加点儿盐
            
捞起来，切片；再放油锅里炸
            
把牛肉从油锅里面捞起来。留一部分油炒料
            
炒料的时候先放姜，再放花椒和干海椒，再放点盐。
注意不要炒糊了。炒香后放牛肉。最后在要起锅的时候放糖和鸡精
        
  
        
        

            
四川省
            
成都市
            
宜宾市
            
绵阳市
            
德阳市
            
辽宁省
            
大连
            
沈阳
            
盘锦
        
        
    

---

---

---

04-图片标签

---

---

---

05-超链接

    
        
        
    
    
        
图1
        
        
图2
        
        
图3
        
        
        
        
        百度一下
        
        
            
        
        

        
        
        百度一下
        图片标签
        

        图1
        图2
        刷新
        
        
        百度一下
        
    

---

---

---

06-表格标签

    
        
        
    
    
        
        

            
            

                
姓名
                
成绩
                
是否留级
            
            
            

                

                
第二行第二列
                
第二行第三列
            
            
            

                
第三行第一列
                
第三行第二列
                
第三行第三列