Python全栈之学习HTML

1. vscode相关配置

w3c school 手册: https://www.w3school.com.cn/html/index.asp

插件安装:
	chinese
	live server(html以服务端的形式进行显示,而不是以文件的形式进行显示)
	icon (文件有图标)
快捷操作:
	ctrl + k   /  ctrl + t  选择主题 light+
	文件 -> 首选项 -> 设置 -> -> 字体 -> 
	font-weight setting.json文件中配置
	vscode  1.开发前段写代码速度比较快 2.免费
	选择live server插件 选择齿轮 扩展设置

2. html认识

2.1 html认识


  声明文档的类型是html 超文本标记语言

    
        此处写入web网页的配置信息
    
    
        此处写入网页的主体内容
         学习html 
    

Python全栈之学习HTML_第1张图片

2.2 html结构



    
        
        
        
        这是前端内容
        
        
        
        
        
        
        
        
        
    
    
            
            1111       3333     343434                   234234
            
            
510
字符实体:使用字符实体来表达实际的字符含义;   使用字符实体表达多个空格 例子:               11111
< : < 小于号 > 大于号 例子: 5<d c>10
            333
           +444
           ------
            777
            

2.3 html语法特征

1.内容不区分大小写
2.标签结构分为单闭合、双闭合标签(标签成对显示)
3.一个及多个空白符,都会被理解成一个空白符

3. 标签种类_列表

3.1 常见标签



    
        
         常见标签 
    
    
        

一级标签

二级标签

三级标签

四级标签

五级标签
六级标签

h20 => h20
co2 => co2
x2 = 100 => x2 = 100

这是第一个段落

这是第二个段落


川普是我的偶像 我的爱人 川普是我的偶像 我的爱人

3.2 标签种类




    
    
    标签的种类


    
    
    我爱你 
        奥斯托夫罗斯基  
      111
    
    
我是网页的头部
我是网页的身体
我是网页的脚部

3.3 列表




    
    
    Document


    
    
    
  • 姜子牙
  • 我和我的家乡
  • 八百
  • 唐人街探案3
  1. 姜子牙
  2. 我和我的家乡
  3. 八百
  4. 唐人街探案3
女生曾经说过的谎言:
不要
你真坏
你是个好人
我给你介绍个漂亮的小姑娘

3.4 超链接标签

3.5 a链接跳锚点




    
    
     a链接 跳锚点 


    
    第一章内容
    

孙悟空三打白骨精

第二章内容

孙悟空怒锤红孩儿

第三章内容

孙悟空大闹凌霄殿

回到顶部

3.6 img图片标签




    
    
    img 图片标签


    
    
        
    
    


3.7 table表格标签

表格标签:




    
    
     table 表格标签


    
    
姓名 年龄 薪水 部门
王文 18 10万 python
王伟 20 11美元 开发部门
王致和 22 100万 臭豆腐研发部门
lianxi1 lianxi2 lianxi3 lianxi4

姓名 年龄 薪水 部门
123 10万 销售
王伟 20 11美元
王致和 22 100万
lianxi1

Python全栈之学习HTML_第2张图片

Python全栈之学习HTML_第3张图片

表格的方向属性:




    
    
    table 表格的方向属性


    
    
王致和 蓝色 踢球 江西
王致和 蓝色 踢球 江西
王致和 蓝色 踢球 江西

table中的九宫格方向:

Python全栈之学习HTML_第4张图片

3.8 iframe子窗口

4. 音视频_表单

4.1 音视频标签




    
    
    Document


    
    
    


4.2 form标签




    
    
    form表单<


    
    
手机号:
密码:

5. 小练习

Python全栈之学习HTML_第5张图片

Python全栈之学习HTML_第6张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的:(Python全栈之学习HTML)