• • • 0.快捷键/模板设置
    • • 0.1快捷键
      • 0.2模板设置
    • 1.注释
    • 2. body标签
    • 3.标题标签
    • 4.段落标签
    • 5.基本标签
    • 6.图像标签
    • • 6.1图像属性
      • 6.2图片路径
    • 7.链接标签
    • • 7.1属性
      • 7.2base标签
      • 7.3假链接
      • 7.4锚点
    • 8.列表标签
    • • 8.1无序列表
      • 8.2无序列表练习
      • • 1.图书列表
        • 2.物品清单
      • 8.2有序列表
      • 8.3定义列表
      • 8.4定义标签练习

在pycharm中按下快捷键
ctrl + alt + insert  弹出新建文档

ctrl + d 快速复制光标所在行。
ctrl + y 快速删除光标所在行。
ctrl + ？注释
使用pycharm时会发现html的注释是{# #}而不是 General --> Soft Wraps
在 Soft-wrap these files: 中添加  *.html;  

全选当行
settings --> Keymap
搜索 select Single line at caret 添加快捷键。自己设置为ALT + Z
移动选中行
ctrl + shift + 方向上下键


快速折叠展开单个代码块

ctrl + - 折叠
ctrl + + 展开

快速折叠展开多个个代码块
（选中多个代码块的代码）

ctrl + shift + -  折叠
ctrl + shift +  + 展开

快速回车新建一行 ( 不需要到文本的末尾按enter新建一行，直接在当前行任意位置)
shift + enter

几乎所有的html文件都使用html的基本结构，使用pycharm，创建html文件时会自动生成。
File -> Settings -> Editor -> File and Code Templates 中设置对应文件的模板。

HTML代码非常杂乱，通常用注释来划分区域，方便后续的查找。


    导航条HTML代码···





    左侧菜单栏HTML代码···

在  标签之间定义文档的主体。
所有需要展示到网页的内容都写在body标签中。
bgcolor="red" 为文档设置背景色

   1~6级标题。
标题标签，独占一行。

    
    


一级标签
二级标签
三级标签
四级标签
五级标签
六级标签

一个页面中只有一个h1标签，来作为这个页面的标题。

 
	 
单独占一行。 

    
    


今天的天气
今天多云，28°

不独占一行：
 加粗    
 斜体    
 下划线  
 删除线  

 换行
独占一行：
 水平分割线

    
    


字体加粗


斜体


下划线


删除线

水平线

  不独占一行

src    图片的路径，alt在图片出现无法显示，的提示信息。

titlt  当鼠标悬浮在篇上显示的信息。
atl    当需要显示的图片找不到的时候，显示的信息。

width  宽度
height 高度

标签没有指定宽高则按图片默认的大小显示。（单位px, 像素）
手动设置宽高可能会导致图片失真，只要指定了宽或高，另一个值或自动按等比计算。

给src属性赋值的两种方式
1.相对路径赋值:从当前的.html 文件所在目录开始查找。（windoes不能跨盘）
同级：html文件 和 图片在同一个目录下。       src="panda.jpg"
下级：以html文件所在文件夹开始写完整的路径。  src="/down/panda.jpg"
上级：倒退写法找到图片。                    src="../panda.jpg"  

2.绝对路径：从盘符开始查找。
src="C:Users13600Desktoptestday01panda.jpg" 
src="C:/Users/13600/Desktop/test/day01/panda.jpg" 

注意点：
*（ 上级 绝对路径 在pycharm中，无效，需要直接找到.html文件打开才行。 ）  
* 统一使用/，windows也能使用/,服务器的linux系统也是使用/。
* 如果文件夹的名称有中文可能有问题。 
* 在开发者很少使用绝多路径，发给别人，还需要改路径,可移植差。

 标签
href = "页的链接面"， 可以是一个网络上的地址也可以是本地的地址。 
 展示的内容 ，内容可以是文字和图片，点击展示的内容会跳转到href指定的地址。

    
    


百度


 




图像标签的页面

在href属性中指定链接的地址，在点击文本百度或百度图片时会跳转到href指定的地址。

target = "_self" : 默认的，在当前页码跳转。
target = "_blank"： 新开一个页面，进行跳转。
title ：鼠标悬浮时显示的信息。

每个标签需要新开页面进行展示则要在每个 标签中夹上target = "_blank"。

base标签在head标签内使用。
base标签就是专门用来统一指定当前网页中所有的超链接（a标签），需要如何打开。
在base中指定了target,同时还在a标签中也指定了以a标签中中的targrt为准。
base 标签中的href  为页面上所有相对 URL 规定基准 URL。
（href="hello.html" 使用的是本地地址或没有地址的时候会触发）

    
    
  


百度1







hao123 新开页面



hao123 不新开页面

点击之后不会跳转的链接。
假链接存在的意义，在设计程序中，跳转的的页面还没有完成时暂时使用。

在a便签的href中将值设置为：
1. #           ：点击的时候，会跳转到当前页的顶部
2. javascript：：（带一个冒号的）点击的时候，没反应

    
    


页面顶部
























































页面底部1


页面底部2

利用a标签，跳转到当前页面的指定位置。
1. 设置锚点 给目标标签id属性添加一个独一无二的值。 
2. 绑定锚点 绑定给a便签的href设置跳转的位置。

页面顶部
去页面顶部 

    
    



页面顶部



去页面中间
去页面底部
























































页面中间


去页面顶部
去页面底部

























































页面底部



去页面顶间
去页面中间

a标签除了能跳转当当前页面的指定位置还跳转到其他页面的指定位置。
跳转网页默认是到该页面的顶部。

我是顶部
点我去顶 

    
    


 去test页面的顶部


 去test页面的中部


 去test页面的底部

    
    



页面顶部


























































页面中间

























































页面底部

1.无序列表（较多）
2.有序列表
2.标题列表

无序列表没有前后之分。
 标签定义无序列表。
 标签定义列表项目。
ul标签和li标签是一个组合，一般情况下不要在ul标签内写其他的标签。

	
  
    
  
 



    
    


导航条


	

        MSDN我告诉你
    
    


        大学生资源网
    
    


        办公资源网
    
    


        收藏大全
    
    


        免费技术类书籍
    





 
无序列表前面默认有一个实心圆点。
在ul标签中使用type=""指定其他的符号。
square 方块
none   没有样式
type=" none" 错误点，多一个空格没有起作用。
 
8.2无序列表练习 
1.图书列表 



    
    


四大名著

    

        
《水浒传》
        
《水浒传》以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。
    
    

        
《三国演义》
        
《三国演义》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。
    
    

        
《西游记》
        
《西游记》前七回叙述孙悟空出世，有大闹天宫等故事。此后写孙悟空随唐僧西天取经，沿途除妖降魔、战胜困难的故事。书中唐僧、孙悟空、猪八戒、沙僧等形象刻画生动，规模宏大，结构完整，并且《西游记》富有浓厚的佛教色彩，其隐含意义非常深远，众说纷纭，见仁见智。
    
    

        
《红楼梦》
        
《红楼梦》讲述的是发生在一个虚构朝代的封建大家庭中的人事物，其中以贾宝玉、林黛玉、薛宝钗三个人之间的感情纠葛为主线通过对一些日常事件的描述体现了在贾府的大观园中以金陵十二钗为主体的众女子的爱恨情愁。
    





 
2.物品清单 



    
    


购物区


  

    
水果类
    

      
西瓜
      
香蕉
      
苹果
    
  
  

    
鱼类
    

      
鲤鱼
      
草鱼
      
鲫鱼
    
  




 
快捷写法
ul>li*2>h2+ul>li*3
 
8.2有序列表 
有序列表有前后之分。
 标签定义有序列表。
 标签定义列表项目。
 
ol>li*3 tab     # 快捷方式写法，生成序号。
ol>li{$}*3 tab  # 快捷方式写法,生成序号，{$}*3生成数据1-3
emmet 插件的功能一般都自带。
 
默认以数字为序号，
在ol标签中设置type属性。（几乎不直接会使用）
type="A" 指定子母符序号
start="" 设置起始位
还有 A,a 罗马数字 I,i



 



    
    


百度热搜小说榜

    

        
万古神帝
        
作者：飞天鱼
        
热搜指数: 803180
    
    

        
伏天氏
        
作者：净无痕
        
热搜指数: 531725
    
    

        
武炼巅峰
        
作者：莫默
        
热搜指数: 396670



···


    

        
万相之王
        
作者：天蚕土豆
        
热搜指数：138672
    
    

        
斗罗大陆
        
作者：唐家三少
        
热搜指数：102868
    
    

        
九星霸体诀
        
作者：平凡魔术师
        
热搜指数：96742
    




 



    
    



    
小明
    
小林
    
小文




    
99
    
84
    
60



    
1
    
2
    
3



    
1
    
2
    
3



 
8.3定义列表 
 标签定义列表
 标签定义列表标题
 标签定义列表标题的内容
三个标签是一个组合标签，不但单独出现。
一个dt可以没有对应的dd,也可以有多个对应的dd，但是推荐一个dt对应一个dd。
 
应有场景：
1.网站尾部内容
2.图文混排
 



    
    




  
售后服务
  
人工服务
  
驱动下载
  
售后维修

  
新机购买
  
银行卡支付
  
支付宝支付
  
微信支付




    
服务保证
    

        
服务标准
        
售后保修
        
驱动下载
        
线下体验店
        
用户协议
        
隐私保护
    




 
8.4定义标签练习 



    
    



    


 
    

        
 
熊猫

        
熊猫一般指大熊猫。大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目熊科大熊猫亚科大熊猫属唯一的哺乳动物。