前言

这是B站学习笔记
视频地址：https://www.bilibili.com/video/BV1Y7411K7zz

系列文章目录

文章目录

• 前言
• 系列文章目录
• 1.HTML书写规范
• 2.HTML标签介绍
• 3.标签的语法
• 4.常用标签介绍
• • 4.1 font字体标签
  • 4.2 常用的特殊字符
  • 4.3 标题标签
  • 4.4 超链接
  • 4.5 列表标签
  • 4.6 img 图片标签
  • 4.7 table表格标签
  • 4.8 跨行跨列
  • 4.9 iframe框架(内嵌窗口)
  • 4.10 表单标签
  • 4.11 表单提交的细节
  • 4.12 其它常用标签

---

1.HTML书写规范

Html 的代码注释
注意书写规范，适当缩进

2.HTML标签介绍

1. 标签的格式：
   <标签名>封装的数据

2. 标签名大小写不敏感。

3. 标签拥有自己的属性。

   1. 基本属性： b g c o l o r = ′ ′ r e d ′ ′ bgcolor=''red'' bgcolor=′′red′′ 可以修改简单的样式效果
   2. 事件属性： o n c l i c k = ′ ′ a l e r t ( ′ 你 好 ！ ′ ) ; οnclick=''alert('你好！'); onclick=′′alert(′你好！′); 可以直接设置事件响应后的代码

4. 标签的分类

   1. 单标签：<标签名/>
      例如：
      表示换行

      ---

      表示水平线
      注意最后的 / color{red}/ / 不能省略
   2. 双标签：<标签名>封装的数据

3.标签的语法

1. 标签不能交叉嵌套
2. 标签必须正确关闭(闭合)
3. 属性必须有值，属性值必须加引号
4. 注释不能嵌套

	-->
	正确：
早安，尚硅谷
	错误：
早安，尚硅谷
	


	
	
	正确：
早安，尚硅谷
	错误：
早安，尚硅谷
	

	
	
	正确：
1
	错误：
2
	

	
	
	正确：早安，尚硅谷
	错误：早安，尚硅谷
	错误：早安，尚硅谷
	

		
	
	正确： 

	错误：-->
	

4.常用标签介绍 4.1 font字体标签

font标签是字体标签，它可以用来修改文本的字体，颜色，大小(尺寸)

常用属性

1. color：修改颜色
2. face：修改字体
3. size：修改字体大小

我是字体标签

4.2 常用的特殊字符

若要在页面中显示
,而不是换行，或者显示空格等，则需要使用字符实体名称

我是<br">>标签

你好                           帅啊!

常用的特殊字符表：
显 示 结 果 描 述 实 体 名 称 空 格 & n b s p < 小 于 号 & l t > 大 于 号 & g t & 与 号 & a m p " 引 号 & q u o t ′ 撇 号 & a p o s ( I E 不 支 持 ) × 乘 号 & t i m e s ÷ 除 号 & d i v begin{array}{|l|l|l|} hline 显示结果&描述&实体名称\ hline &空格& \ hline <&小于号&<\ hline >&大于号&>\ hline &&与号&&\ hline "&引号&"\ hline '&撇号&&apos(IE不支持)\ hline times&乘号&×\ hline ÷&除号&&div\ hline end{array} 显示结果<>&"′×÷​描述空格小于号大于号与号引号撇号乘号除号​实体名称 <>&"&apos(IE不支持)×&div​​

4.3 标题标签

h 1 到 h 6 h1到h6 h1到h6都是标题标签，分别表示一级到六级标题

常用属性：

• align 对其
  • lift 左对齐(默认)
  • center 居中对齐
  • right 右对齐

标题1
标题2
标题3
标题4
标题5
标题6
标题7 

4.4 超链接

在网页中所有点击后可以跳转的内容都是超链接

超链接用双标签内容表示
常用属性

• href 设置属连接的地址
• target 设置属性哪个目标进行跳转
  • _self 表示当前页面(默认值)
  • _blank 表示打开新的页面进行跳转

百度
百度
百度

4.5 列表标签

列表分为无序列表和有序列表

1. 无序列表
   ul是无序列表
   • type属性可以修改列表项前面的符号，值为nine则表示符号隐藏
   • li是列表项

    
赵四
    
刘能
    
小沈阳
    
宋小宝

2. 有序列表
   ol是无序列表
   • li是列表项

    
赵四
    
刘能
    
小沈阳
    
宋小宝

4.6 img 图片标签

img 标签可以在html页面上显示图片

属性

• src 属性可以设置图片的路径
• width 属性设置图片的宽度
• height 属性设置图片的高度
• border属性设置图片边框大小
• alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

在web 中路径分为相对路径和绝对路径两种

• 相对路径:
  . 表示当前文件所在的目录
  … 表示当前文件所在的上一级目录
  文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./可以省略
• 绝对路径:
  正确格式是:http : //ip : port/工程名/资源路径
  错误格式是:盘符:/目录/文件名

4.7 table表格标签

table标签是表格标签

属性：

• border设置表格标签
• width设置表格宽度
• height设置表格高度
• align设置表格相对于页面的对齐方式
• cellspacing设置单元格间距

tr是行标签

th 是表头标签

td是单元格标签

• align设置单元格文本对齐方式

b 是加粗标签

    

        
1.1
        
1.2
        
1.3
    
    

        
2.1
        
2.2
        
2.3
    
    

        
3.1
        
3.2
        
3.3
    

4.8 跨行跨列

colspan属性设置跨列

rowspan属性设置跨行

注意跨行跨列，本质上是将某个单元格的长度或者宽度变大，所以跨行夸列后需要删除多余的行或列

    

        
1.1

        
1.3
        
1.4
        
1.5
    
    

        
2.1
        
2.2
        
2.3
        
2.4
        
2.5
    
    


        
3.2
        
3.3
        
3.4
        
3.5
    
    

        
4.1
        
4.2
        
4.3
        
4.4

    
    

        
5.1
        
5.2
        
5.3


    

注意注释的单元格

4.9 iframe框架(内嵌窗口)

ifarme标签它可以在一个html页面上,打开一个小窗口,去加载一个单独的页面.

ifarme和a标签组合使用的步骤:

1. 在iframe标签中使用name属性定义一个名称
2. 在a标签的target 属性上设置iframe 的 name 的属性值

    
https://blog.csdn.net/m0_53653954/article/details/0-标签语法.html
    
https://blog.csdn.net/m0_53653954/article/details/1.font标签.html
    
https://blog.csdn.net/m0_53653954/article/details/2.特殊字符.html

4.10 表单标签

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

form标签就是表单
属性：

• input type=text 是文件输入框

  • value设置默认显示内容

• input type=password 是密码输入框

  • value设置默认显示内容

• input type=radio是单选框

  • name属性可以对其进行分组
  • checked=" checked"表示默认选中

• input type=checkbox是复选框

  • checked=" checked"表示默认选中

• input type=reset 是重置按钮

  • value 属性修改按钮上的文本

• input type=submit 是提交按钮

  • value 属性修改按钮上的文本

• input type=button 是按钮

  • value属性修改按钮上的文本

• input type=file 是文件上传域

• input type=hidden是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域(提交时候同时发送给服务器)

• select标签是下拉列表框

• option标签是下拉列表框中的选项

  • selected="selected"设置默认选中

• textarea表示多行文本输入框(起始标签和结束标签中的内容是默认值)

  • rows属性设置可以显示几行的高度
  • cols属性设置每行可以显示几个字符宽度

    用户名称：
    

    用户密码：
    

    确认密码：
    

    性别：
    男
    女

    兴趣爱好：
    Java
    JavaScript
    c++

    国际：
    
        --请选择国籍--
        中国
        美国
        日本
    

    自我评价：
    我才是默认值

    
    
    
    

这样的效果显然有些混乱，所以再在此基础上加上表格

        
用户注册
        

            

                
用户名称：
                

            
            

                
用户密码：
                

            
            

                
确认密码：
                

            
            

                
性别：
                

                    男女
                
            
            

                
兴趣爱好：
                

                    Java
                    JavaScript
                    c++
                
            
            

                
国际：
                

                    
                        --请选择国籍--
                        中国
                        美国
                        日本
                    
                
            
            

                
自我评价：
                
我才是默认值
            
            

                

                

            
        
    

效果明显更好一些

4.11 表单提交的细节

from 是表单标签

• action属性设置提交的服务器的地址
• method属性设置提交的方式GET(默认值)，或POST

表单提交时，数据没有发送给服务器的三种情况

1. 表项没有name属性值
2. 单选、复选(下拉列表中的option标签)都需要添加value属性，以便发送给服务器
3. 表单项不在提交的from标签中

GET请求的特点

1. 浏览器地址栏中的地址是：action属性？请求参数 （？请求参数可能没有）
   请求参数的各式是：name=value&name=value，每组为name和对应的value，各组之间用&相隔
2. 不安全，密码会被一起显示
3. 它有长度限制，限制的长度与浏览器相关

POST请求的特点

1. 浏览器地址栏中地址框中只有action属性值
2. 相对于GET更加安全
3. 理论上没有长度的限制

4.12 其它常用标签

div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空)

div标签1
div标签2
span标签1
span标签2
p标签1
p标签2
1