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. PrimeNG01 angular集成PrimeNG

    1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...

  2. SQL Server CLR全功略之一---CLR介绍和配置

    Microsoft SQL Server 现在具备与 Microsoft Windows .NET Framework 的公共语言运行时 (CLR) 组件集成的功能.CLR 为托管代码提供服务,例如跨 ...

  3. 8-python模拟登入（无验证码）

    方式: 1.手动登入,获取cookie 2.使用cookielib库 和 HTTPCookieProcessor处理器 #_*_ coding: utf-8 _*_ ''' Created on 20 ...

  4. fopencookie函数详解

    今天看DPDK时,看到了fopencookie函数,以前基本没有用过该函数,乘此机会好好看看如何使用. 1. 函数头文件与函数原型 函数头文件: #include <stdio.h> 函数 ...

  5. Python基础入门-列表解析式

    今天我们使用Python中的列表解析式来实现一些简单功能.好了关于列表解析式是什么?我的理解是它可以根据已有列表,高效创建新列表的方式.列表解析是Python迭代机制的一种应用,它常用于实现创建新的列 ...

  6. HDU 3333 Turing Tree (主席树)

    题意:给定上一个序列,然后有一些询问,求区间 l - r 中有多少个不同的数的和. 析:和求区间不同数的方法是一样,只要用主席树维护就好. 代码如下: #pragma comment(linker, ...

  7. linux下SVN服务器配置

    SVN服务器配置 1. 安装svn服务 yum install subversion 2. 新建一个目录用于存储SVN所有文件 mkdir /home/svn 3. 创建项目 在上面创建的文件夹中为项 ...

  8. MongoDB整理笔记の管理Replica Sets

    一.读写分离 从库能进行查询,这样可以分担主库的大量的查询请求.   1.先向主库中插入一条测试数据 [root@localhost bin]# ./mongo --port 28010 MongoD ...

  9. angular ng-content

    <p> child works! </p> <ng-content></ng-content> <app-child> 父组件投影 < ...

  10. javascript 视频播放指定的时间段

    javascript 视频播放指定的时间段 一.html5 vedio: //指定开始时间 player.currentTime=startPoint; player.play(); //使用事件来控 ...