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="" height="">#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=""></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和内容全部消失掉