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. 算法描述》关于LIS的nlogn方法

    上次TYVJ有一道裸LIS,然而我当时直接打了一个N^2暴力就草草了事,然后就ZZ了,只拿了60分,其实NlogN的LIS和N^2的差的不多,只是没有N^2,好想罢了,鉴于某学弟的要求,所以就重现一下 ...

  2. laravel的模型关联之(一对多的反向)

    一对多的反向 一对多的反向就相当于,一个用户有多篇文章,但是在显示文章模型的时候你又想显示这个用户的用户名,但是你只有用户id, 这时候就用到了一对多的反向,你用用户(User)模型里面定义了一对多来 ...

  3. 分布式缓存产品Redis和memcached比较区别（图）

  4. 一,安装python

    在Windows上安装Python 首先,从Python的官方网站www.python.org下载最新的2.7.9版本,地址是这个: http://www.python.org/ftp/python/ ...

  5. mvc json 日期问题的最简单解决方法

    1.首先编写BaseController这个类,需要引入Newtonsoft.Json.dll程序集 using System;using System.Collections.Generic;usi ...

  6. 关于 Azure 安全性的 10 点提示

    讨论云服务时,安全性是一个关键领域.实际上,Windows Azure 基础结构实施大量的技术和流程来保护环境.此页介绍 Microsoft 的全球基础服务如何运行基础结构以及它们实施的安全措施. 从 ...

  7. Alternative to iPhone device ID (UDID)

    Alternative to iPhone device ID (UDID) [duplicate] up vote10down votefavorite 3 Possible Duplicate:U ...

  8. Sort函数(C++)

    原创 C++中内置了sor函数供排序,函数原型为: #include<algorithm> //所属头文件 sort(begin,end,cmp); //其中cmp参数可以省略,省略后默认 ...

  9. Nginx禁止直接通过IP地址访问网站

    介绍下在nginx服务器禁止直接通过IP地址访问网站的方法,以避免别人恶意指向自己的IP,有需要的朋友参考下. 有时会遇到很多的恶意IP攻击,在Nginx下可以禁止IP访问. Nginx的默认虚拟主机 ...

  10. [转]Programmatically Register Assemblies in C#.

    1. Introduction. 1.1 After publishing Programmatically Register COM Dlls in C# back in 2011, I recei ...