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. java基础之JDBC八：Druid连接池的使用

    基本使用代码: /** * Druid连接池及简单工具类的使用 */ public class Test{ public static void main(String[] args) { Conne ...

  2. linux 压力测试工具 webbench

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装: 1. wget htt ...

  3. 使用RandomAccessFile读写数据

    ------------siwuxie095 工程名:TestRandomAccessFile 包名:com.siwuxie095.file 类名:MultiWriteFile.java(主类).Wr ...

  4. Mock Server实践

    转载自 https://tech.meituan.com/mock-server-in-action.html 背景 在美团服务端测试中,被测服务通常依赖于一系列的外部模块,被测服务与外部模块间通过R ...

  5. c语言实践 判断一个数是不是素数

    int main() { int input = 0; scanf_s("%d",&input); if (input < 2) { printf("wro ...

  6. 学习PDO啦

    通过查找资料对PDO有了一定的了解,PDO(PHP Data Object )为PHP数据对象,为PHP访问数据库提供了一个轻量级的借口,但PDO本生不能实现访问数据库的任何功能,只能通过数据库的PD ...

  7. [GO]new函数的使用

    new函数的作用其实就是动态分配一个空间,我们只需要进行使用,不需要考虑它的内存释放的它的生命周期 package main import "fmt" func main() { ...

  8. GC: CMS垃圾回收器三（实践）

    jstat -gc -t [pid] 1000 监控日志... ,抽取其中关键记录不一定连续 应用启动时间 2015-06-23 10:22:27 ,换算后,第二条记录时间是2015-06-24 22 ...

  9. Gabor filter与Gabor transform

    https://en.wikipedia.org/wiki/G%C3%A1bor Gabor filter:a linear filter used in image processing一种线性滤波 ...

  10. BZOJ 3083 遥远的国度(树链剖分+LCA)

    Description 描述zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国度.当zcwwzdjn准备进入遥远的国度继续追杀时,守护神RapiD阻拦了zcwwzdjn的去路,他需要z ...