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、特殊符号

&lt;     #小于号

&gt;    #大于号

&nbsp;#空格符号：很小的一点空格

&emsp;#空白位：相对空格符号比较大

&amp; # &

&copy;#版权符号

　　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和内容全部消失掉

Python web前端 01 HTML常用标签的更多相关文章

  1. 谷哥的小弟学前端(01)——HTML常用标签（1）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  2. [Web 前端] 005 html 常用标签补充

    少废话,上例子 1. 正常的字 <br> <tt>小一点的字体</tt> <br> <small>变小</small> < ...

  3. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  4. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  5. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  6. Python web前端 05 JavaScript

    Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...

  7. Python web前端 07 函数及作用域

    Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...

  8. Python web前端 10 bootstrp

    Python web前端 10 bootstrp 1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: ...

  9. 必知干货：Web前端应用十种常用技术你全都知道吗？

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

随机推荐

  1. 内存cache使用的场景

    Q.业务场景内为什么要使用内存cache? A.为了利用内存cache的优点, 解决业务场景内的缺陷 Q.内存cache的优点和缺点 A.优点: 内存读写速度比磁盘块 缺点: 内存空间有限, 内存单价 ...

  2. 30-懒省事的小明（priority_queue）

    http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=55 懒省事的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   ...

  3. R dataframe 遗忘, which 矩阵搜索

    A data frame is used for storing data tables. It is a list of vectors of equal length. For example, ...

  4. keys()

    keys():返回一个数组,里面是符合匹配模式的键列表 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $pattern = ...

  5. 使用jQuery完成表单验证

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注 ...

  6. [GO]append的扩容

    package main import "fmt" func main() { s := make([], ) oldcap := cap(s) ; i < ; i++{ s ...

  7. 树形DP-----HDU4003 Find Metal Mineral

    Find Metal Mineral Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Other ...

  8. 积分之谜——第六届蓝桥杯C语言B组（国赛）第一题

    原创 标题:积分之迷 小明开了个网上商店,卖风铃.共有3个品牌:A,B,C. 为了促销,每件商品都会返固定的积分. 小明开业第一天收到了三笔订单: 第一笔:3个A + 7个B + 1个C,共返积分:3 ...

  9. DELPHI XE5 UP2 无真机输出 APP并转换为IPA（实践整理）

    1.在Mac上配置开发环境(具体步骤请百度)   XCODE5.1+IOS7.1SDK+COMMAND LINE TOOLS   安装PlatformAssistant   买一个真机调试账号(实际测 ...

  10. 关于CS0016: Could not write to output file ‘c:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\Temporary AS

    1.添加用户"Network Service” 和 “IIS_IUSERS” 读下面目录的读写权限 a) C:\Windows\Temp b) C:\Windows\Microsoft.NE ...