Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签
一、HTML创建项目
file ---->new project -----> 输入项目名------>创建文件夹 new dicrectoty ---->建立文件 new HTML file
二、常用标签
1、注释
<！--文档类型-->#这是HTML里面的注释，跟python中的不一样 ctrl + ？ #快捷注释
2、初始标签
<!DOCTYPE html> #文档类型 <html lang="en"> #根标签 <head> #网页头部 （双标签） <meta charset="UTF-8">#编码格式：utf-8 （单标签） <title>初始HTML </title> #网页标题 </head> #网页头部结束标签 <body>#网页主体 可视化区域 </body>#网页主体结束部分 </html> #不推荐在pycharm里面打开，最好是在文件夹里面直接打开
3、初识HTML
#HTML是用来描述网页的一种语言 #不是一种编程语言（会报错），是一种标记语言（不会报错，最多就是出不来效果） #HTML文档包括HTML标签和纯文本 #标记语言是一套标记标签（结束标签语言前面有斜杠） #web浏览器只是读取HTML标签，并以网页的形式显示出它们，不会显示标签，只会读取标签内的内容
4、HTML标签
a、标题标签
#标题标签 h1至h6，加粗，独自占一行，h1标签通常只出现一次，有利于搜索引擎的搜索 #自定义标签 h7，不给样式就是跟原来的一样，可以通过CSS样式来定义样式
b、段落标签
#p标签的内容会自动换行，div标签功能跟p标签一样，有首行缩进
c、粗体标签
#b加粗标签（物理加粗）
#strong加粗标签（强调加粗便于搜索引擎的搜索）
d、斜体标签
# em斜体标签：强调斜体，便于搜索引擎搜索 # i斜体标签 斜体作用 #标签嵌套:实现双重功能 <em><strong> aaa <strong><em>
e、换行标签
#br标签，后面加不加斜杠无所谓的，可以在段尾加任意个br标签
f、水平线标签
#hr标签，在内容上下出现水平线
5、特殊符号
< #小于号 > #大于号 #空格符号：很小的一点空格  #空白位：相对空格符号比较大 & # & ©#版权符号
6、a标签
跳转符号 <a href="http:www.baidu.com" >去百度</a> #http必须得写，网页表示想要去的网页，标签之间必须写内容 target="_self" #默认在当前页面打开 target="_black" #表示用一个新页面来打开网页 <a href="#" >#</a> #刷新当前页面的作用 <a href="javascript：void()" >死链接</a> #这是一个死链接，不会跳转，无论什么点都不会有反应 #跳转到页面内的某点（锚点） <a href="javascript:void(0)." name="box" >我是顶部的a标签</a> <a href="#box" >锚点</a> #点击锚点就会跳到顶部的 我是顶部的a标签 ；如果是跳到a标签就用name，如果是跳到其它标签就将name换成id
7、书写规范
#名字用小写字母 #以英文开头，可以包含英文字母，数字，_，不能使用中文 #驼峰命名规则 #id命名：id只能有一个名字，而在网中相同的名字只能出现一次，相当于身份证号码一样 #class命名：可以出现多次，而且相容的名字可以有多个，相当于人名一样
8、图片标签
#img标签 <img src="http:pic.cnblogs.com/face/u383503.jpg" alt=""> #src表示路径，可以用绝对路径，但是前面必须加http，alt表示强调内容，便于搜索引擎的搜索 <img src="img/01.jpg" alt="" >#这便是相对路径 #保存图片：图片放到lesson1下面新创建的lmg文件夹里面 <img src="img/01.jpg" alt="" width="200" height="200">#width和height表示宽高，如果只给一个数据，另一个会等比例缩放，如果不加定义，出现的就是原宽高
9、列表
#无序列表 ul <ul> <li>a<li> #快捷操作ul>li*4,然后按tab就可以出现4个 </ul> #默认小黑点，可以自定义 <ul type="square"></ul> #disc：默认小黑点，circle空心圆，square小方框 #如果要去掉小黑点，在head前面加个style标签，在里面li标签，下上list-style:none #css里面的注释是/* */
#有序列表 ol <ol type="A" reversed start="8"></ol> #默认前面为1,2,3,4，可以用type修改前面的序号，reversed表示降序 start="8"表示从8开始
#自定义列表 dl <dl> <dd>1<dd> <dl>
三、div和span
1、认识一下
#无语义标签（自定义），块级元素标签 #在style里面设置 div.box1[width:100px,height=50px,background:blue] <span class="box1">span1</span1> 下面<div class="box1">div</div>#如果是class就在上面加点，如果是id就在上面加# <div class="box1">div</div> <span class="box1">span1</span1>#宽度高度是由它的内容决定的，宽度由display决定，inline就是由他的内容决定
#块级元素div display：block 独占一行，可以设置宽高，不给宽高就是浏览器的宽度，内容的高度决定的 #内联元素span display：inline：可以和其他元素位于同一行，可以包括任何块和行内元素，内容撑开宽高不能设置宽高，如果想要设置，就在上面改变它的display #行内块元素 display:inline-block :块级元素可以横排展示，行内元素可以设置宽高 #display：none 连同div和内容全部消失掉
