【web前端】HTML笔记小结

开启新篇章~其实是又加了个工作室hhh）

---

来源：黑马程序员pink老师前端入门教程

目录

I.HTML简介

II. 基本结构标签

III. VScode相关

IV.常用标签

①标题标签< h1-6 >

② 段落标签 < p >

③换行标签 < br / >（单）

④文本格式化标签

⑤盒子标签（无语义）

⑥图像标签 < img >（单）和路径

1）属性

2）路径

⑦链接标签 < a >

1）语法格式

2）分类

⑧表格标签

1）分类

 2）属性→写< table >里

3）合并单元格

⑨列表标签 

1）无序列表

2）有序列表

3）自定义列表

⑩表单标签

​​​V.注释和特殊字符 

VI.查阅文档

---

I.HTML简介

①网页

②HTML（重点！）

③网页的形成: 网页是由网页元素组成(利用html标签描述出来)的然后通过浏览器解析显示给用户

④浏览器

 

⑤web标准（重点！) →Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合【W3C（万维网联盟）是国际最著名的标准化组织】
1）原因

2）构成→主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面

3）总结

 

⑥语法规范

1） 双标签，结束前有/  ；
   
单标签；

2）双标签关系→包含关系（父子）和并列关系（兄弟）

eg. ✿
                    
                  

       ✿

II. 基本结构标签

①分类

eg.写的第一个页面嘿嘿，目前感觉比算法简单好多qwq！

	
		
	
	
		继续加油！
	

效果图：（就打了四个字的懒仔）

PS：✿重命名的时候如果电脑不显示后缀的话，我的电脑→查看→选文件拓展名

          ✿title→网页名，body→网页内容

② 总结

III. VScode相关

①建页面

②推荐插件 

③自带代码的解释

 框出来的那一块好像没什么影响。。

 

 这句话不写可能会乱码！！！

总结 

IV.常用标签

①标题标签< h1-6 >

作用：字体加粗加大

预览效果：

② 段落标签 < p >

作用：文档分段

③换行标签 < br / >（单）

作用：强制换行

④文本格式化标签

⑤盒子标签（无语义）

1）

→division缩写，表示分割，分区；

eg、代码：

我是一个div标签我一个人单独占一行
123
我是一个div标签我一个人单独占一行
123

效果：

2）→跨度、跨距  好像只有一个空格（？）

 eg、代码：

百度
新浪
搜狐

     效果：

⑥图像标签 < img >（单）和路径

eg.

PS： 

1）属性

 eg.代码：

alt替换文本图像显示不出来的时候用文字替换：

title提示文本鼠标放到图像上，提示的文字：

/*
图片是网上找的可爱布偶猫ww！
*/

预览：title那个截图出不来qwq

PS.目录

2）路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径；

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

⑦链接标签 < a >

作用：定义超链接，作用是从一个页面链接到另一个页面

1）语法格式

文本或图像

 常用_blank

 eg.代码：

腾讯

预览：

2）分类

PS：※1 内部链接，要在同一目录下；

※2 空连接点不出东西；

※3 网页元素链接，元素附加链接

⑧表格标签

作用：显示数据

1）分类

常用*3    ❀

是用于定义表格的标签；
                ❀标签用于定义表格中的行，必须嵌套在标签中；
                ❀用于定义表格中的单元格，必须嵌套在标签中；
                ❀字母 td指表格数据（table data），即数据单元格的内容
表头  （table head）一般位于表格的第一行或第一列（单元格里面的文本内容加粗居中显示）；

eg.

        ...
    
    ...

    

        
单元格内的文字

结构*2    ❀：定义表格头部，内部必须有；
                ❀：定义表格主体，主要用于放数据本体

 2）属性→写< table >里

PS：不常用→一般用CSS 还没学到啊喂！！！

3）合并单元格

方式    ❀跨行合并：rowspan=”合并个数”→最上侧单元格为目标单元格
            ❀跨列合并：colspan ="合并个数”→最左侧单元格为目标单元格

      （如果不理解的话看下图）

 目标单元格     就是合并代码写的地方

步骤 

  eg.代码：

 

        

            

                
合并行
                
样
                
例
            
        
        

            

                
1
                
2
                
3
            
            

                
4
                
5
                
6
            
        
    
    

    

        

            

                
合并列
                
样
                
例
            
        
        

            

                
1
                
2
                
3
            
            

                
4
                
5
                
6
            
        
    

预览：  没删单元格所以有点丑

⑨列表标签 

作用：布局（有无序、有序、自定义列表）

1）无序列表

用

标签定义，一般会以项目符号呈现列表项，用
• 标签定义列表项

  

  2）有序列表

  用

  标签定义，列表排序以数字来显示，用
  1. 标签定义列表项

     

     3）自定义列表

     用

     标签定义（

     → 定义项目/名字；

     → 描述每一个项目/名字）

     使用场景    常用于对术语或名词进行解释和描述，列表项前没有任何项目符号

     

     eg.代码：

         
     
             
     默认的
             
     项目符号
             
     是黑点
         
         
     
         
     
             
     不知道
             
     写点
             
     什么qwq！
         
         
     
         
     
             
     →近期目标←
             
     高分过六级、考大英（争取拿奖！！）
             
     学算法和web
             
     减肥啊qwq！！！
             
     争取搞个奖学金（但是大一好像不让评qwq）
             
     留个足迹怎么样（doge）
             
     点赞
             
     关注
             
     评论
         

     预览：字是随便打的doge

     

     总结

     

     ⑩表单标签

     • 作用：收集用户信息
     • 组成：由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

     

     表单域   用

     标签用于定义→实现用户信息的收集和传递

     

     表单控件（元素） 

     ❀输入表单元素→收集信息 （单标签！）

     

     属性

     ※1 type

     

           1️⃣ submit→点击后把元素的值提交给后台，默认内容为“提交“，可通过value更改；

     eg.

     ※2 其他

           1️⃣ 实现单选→ 的name相同（复选框也要）；同一单选和复选框的name必须一致

           2️⃣ name和value→每个表单元素都有的属性值，主要给后台人员使用；

           3️⃣ value→默认显示值；

           4️⃣ checked→单选唯一，多选随意

     标签 ▲常与搭配用▲→为input元素定义标注

     

     for和id可以顺序不一样！

     eg.代码：

     
         性别
         
         男 
         
         女
     

     预览：（点男女就可以选嗷w！）

     ❀select下拉表单元素

     

     ❀textarea文本域元素

     

     ​​​V.注释和特殊字符 

      ①注释 <！--注释语句-->（快捷键：ctrl+ /）：解释代码+程序不执行、页面不显示
      ②特殊符号（框出来的是必记的）

     

     VI.查阅文档

     推荐了两个网站： W3C和MDN
      

     ---

     恭喜看到这的小伙伴w，已经完成HTML基本知识的学习了哦！！！

     下面进入CSS的学习吧(★ ω ★)→CSS第一天

     有用的话就点赞评论收藏嗷！！