python之路 前段之html,css

一、HTML

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字
如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停
止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可
能会有不同的显示效果.

主要特点如下:

1.简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
2.可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,
超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
3.平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

基本组成:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>
<head>和</head>之间的内容,是元信息和网站的标题
元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容,是浏览器呈现出来的,用户看到的页面效果。
也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。
他包含了之后的两个元素。<head>和</head>|<body>和</body>

2、html文档类型

DOCTYPE标签是单独出现的
说明:
    文档类型,会使浏览器使用相应标准加载网页并显示
    文档类型定义在HTML文档的第一行,在html标签之前
    文档不定义DOCTYPE,浏览器将无法获知HTML或XHTML文档的类型,因此会进入混乱模式,详见:浏览器模式
引用网址:http://www.dreamdu.com/xhtml/tag_doctype/
DOCTYPE,简称为DTDs,是英文Document type的缩写,中文“文档类型”

1.BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

2.CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始
--
浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老
实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

head部分

1、Meta(metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8

2、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

3、关键字

关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度:如果他们收录之后,他们搜索你的关键字的时候,就能找到咱们的网站。

<meta name="keywords" content="博客,Mr、心弦,帅哥,罗天帅">

4、描述

例如cnblog里的就是一个描述:

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5、X-UA-Compatible

X-UA-Compatible  这个是IE8特有的,知道即可,因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异,当IE8的时候微软想把各个版本的统一,那么这个 参数就出现了,他为了向下兼容,如下的代码如果使用IE8的时候他会以IE7的模式运行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

2、title

网页头部信息,如下图所示:

3、Link

网页头部的图标

<link rel="shortcut icon" href="favicon.ico">  

效果图如下:

导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css">

4、Style

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

5、Script

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

body部分

基础知识

1、body里面分为两类标签:块级标签和内联标签,块级标签占用的是整行,内联标签占用的他所使用的实际大小如下图:

块级别标签&内联标签:

2、特殊符号特殊处理

举例来说<h1>是标题标签,如果我想输出<h1>这个字符串,而不是想获取<h1>的样式怎么办呢?

正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示,所以特殊的标签需要特殊处理

所以特殊符号有自己的定义更多请看连接:更多

常用标签:

 1、<p></p>标签和<br/>标签

<p></p>标签:段落标签,每一对p标签为一段,代码如下

    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>

<br/>标签:换行标签;有一个<br/>为一个换行,看下面的代码

    <p>帅哥帅帅哥帅帅哥帅<br/>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>

2、<a></a>标签

<a></a>标签用来跳转和锚

<a>标签之:跳转

默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本,如下面代码

    <a>帅哥博客</a>

指定跳转后,代码如下

<a href="http://www.cnblogs.com/luotianshuai/">帅哥博客</a>

点击后将跳转到指定的连接地址~,在自身的页面打开的!

如果让他用一个新的标签中打开连接地址代码如下:

<a target="_blank" href="http://www.cnblogs.com/luotianshuai/">帅哥博客</a>

<a>标签之:锚

锚的作用是类似于读书时候的书签,当你你点击这个“锚”=“书签”,的时候就跳转到指定的位置

    <a href="#a2">
        书签
    </a>
    <!--在标签里,ID是这个标签的唯一的值,我们在做锚的时候指定他的ID即可-->
    <!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
    <div id="a1" style="height:700px;">
        mark_1
    </div>

    <div id="a2" style="height:700px;">
        mark_2
    </div>

上面的代码中,如果点击了书签之后,那么就会跳转到id=a2的书签的位置!

3、H标签

即标题标签,代码如下

    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>

h1最大可以自定义

4、Select标签

第一种select标签

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">广州</option>
    <!--这里默认是广州因为selected="selected" 这里设置了默认的!-->
</select>

显示效果如下图:

第二种select标签

<select size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

显示效果如下图:

第三种select标签,可以进行多选

<select multiple="multiple" size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

第4中select标签,可以进行分组

<select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遥</option>
    </optgroup>
</select>

效果图如下:

5、input系列标签

input:checkbox标签-复选框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked,为默认选择"-->

效果如下图:

input:radio标签-单选框

<!--第一中情况不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--对于input标签来说只要,radio的name值相同,那么他们就会互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>

效果图如下:

input:text & password 输入框

<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框(输入的内容是保密的)-->
<input type="password"/>

效果图如下:

input:button & submit 提交按钮

<input type="button" value="提交"/>
<input type="submit" value="提交"/>

效果图如下:

file标签-用来提交文件时使用

<input type="file"/>

6、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

效果图如下:

7、form表单

<form>
    <p>用户名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <input type="submit" value="提交"/>
    <input type="button" value="按钮"/>
    <!--这里按提交才有反映,submit是用来提交当前的表单的,当然可以有多个表单-->
    <!--但是,这个submit需要写入表单内,那么提交的时候是提交的当前表单-->
</form>

效果图如下:

<form action="www.baidu.com" method="get">
    <!--这里action是告诉html提交到那里-->
    <!--method是通过什么方法去action指定的地址-->
    <p>
        用户名:<input type="text" name="username"/>
        <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
        <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        密码:<input type="password" name="password"/>
                <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
        <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        部门:<select name="department">
                    <option value="1">CTO</option>
                    <option value="2">DBA</option>
        <!--这里在选择之后,会把选择的value值赋予给name,当用户点击提交后就会提交到后台-->
    </select>
    </p>
    <input type="submit" value="提交"/>

</form>

8、label标签

有一种情况,看下图,在不使用label标签的时候,我们只能点进框体里去,否则就不能输入或选择,这样用户体验不是很好:

代码如下:

<div>
    <h1>Label标签</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>

使用label标签,代码如下:

<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>

显示效果,这里我选择文字的时候也会进入到相应的框体,他类似一个跳转:

 9、列表 ul/ol/dl

ul列表在前面自动加“点”,代码如下:

<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>

效果如下:

ol列表在前面自动加“数字”,代码如下:

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

dl列表自动分组,代码如下:

<dl>
    <dt>河北省</dt>
    <!--dt是标签,dd是标签里的内容-->
        <dd>石家庄</dd>
        <dd>衡水市</dd>
    <dt>山东省</dt>
    <!--dt是标签,dd是标签里的内容-->
        <dd>济南市</dd>
        <dd>烟台市</dd>
</dl>

效果如下图:

10、表格

<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

效果如下:

合并单元格

<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td colspan="3">1</td>
        <!--这里colspan,就告诉html解析的时候占3个格-->
    </tr>
    <!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

效果如下图:

以上的表格标签其实还不是很标准,正常标准的标签如下:

<table border="1">
    <thead>
    <!--表头-->
        <tr>
            <th>表1</th>
            <th>表2</th>
            <th>表3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

效果如下图:

11、fieldset标签

代码如下:

<fieldset>
    <legend>协议</legend>
请仔细阅读协议内容:
</fieldset>

效果如下:

更多请看:http://www.cnblogs.com/wupeiqi

参考文档:http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html

时间: 2024-11-05 22:41:19

python之路 前段之html,css的相关文章

python 之路 day 14 HTML CSS

什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag). HTML 标签是由尖括号包围的关键词,比如 <html>HTML 标签通常是成对出现的,比如 <b&

Python之路【第十八篇】:Web框架们

Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. 1 2 3 4 pip install bottle easy_install bottle apt-get install python-bottle wget http://bottlepy.org/bottle.py Bottle框架大致可以分为以下部分: 路

Python之路【第十六篇】:Django【基础篇】

Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. 基本配置 一.创建django程序 终端命令:django-admin startproject sitename IDE创建Django程序时,本质上都是自动执行上述命令 其他常用命令: python manage.py runserver

七日Python之路--第十一天

(一)关于模板,Template 可以在项目根目录下的settings.py 配置文件中,声明 import os BASE_DIR = os.path.dirname(os.path.dirname(__file__)) TEMPLATE_DIRS = os.path.join(BASE_DIR, 'templates') 这样模板的默认搜索就是在根目录的'templates'文件下进行寻找. 但是,感觉还是不声明,直接使用默认的搜索路径比较好.当不进行声明时,默认搜索路径是相应的app应用目

Python之路,day16-Python基础

Python之路,day16-javascript基础 发展历史:     1.table     2.table + css     3.div + css js: js简介: 1.JavaScript 被设计用来向 HTML 页面添加交互行为. 2.JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言). 3.JavaScript 通常被直接嵌入 HTML 页面. 4.JavaScript 是一种解释性语言(就是说,代码执行不进行预编译) 浏览器---解释器: 1.html解

Python之路,Day18 - 开发一个WEB聊天来撩妹吧

Python之路,Day18 - 开发一个WEB聊天来撩妹吧 本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加.禁言群友 可以与聊天室里的人进行临时会话(与qq群一样) 可以在群中发图片 可以与好友一对一发文件 知识必备: django html\css\js bootstrap jquery, ajax 前景介绍 首先我们知道http

Python之路,Day14 - It&#39;s time for Django

Python之路,Day14 - It's time for Django 本节内容 Django流程介绍 Django url Django view Django models Django template Django form Django admin Django流程介绍 Django URL Example? Here's a sample URLconf: 1 2 3 4 5 6 7 8 9 10 from django.conf.urls import url from . i

Python之路【第十三篇续】jQuery案例-Form表单&amp;插件及扩展

jQuery案例-Form表单 学完这个form表单的案例,如果有人说这个表单(功能)还不够NB(此文不包含样式,样式是CSS比较简单可以根据需求自己添加),那么找武Sir他帮你搞定. 一步一步来 注意事项(目录结构): 在写前端html代码的时候要注意(任何代码都一样),一定要规划好目录结构方便其他的人来看你的代码! 如果还有其他的html页面可以在加一个html存储的文件夹. 1.首先看下HTML主体 <!DOCTYPE html> <html lang="en"

七日Python之路--第九天(blog与Django)

在做models之前,最好将https://docs.djangoproject.com/en/1.6/  中的the model layer 细读. (一)琐碎 (1)*args和**kwargs.的使用 在Django中经常见到含有这两个参数的函数.*args可代表任意个参数:func(arg, *args)代表这个函数可以有一个或更多个参数.可以理解成一个参数list.**kwargs可以代表任意个K=V形式的参数.大体就是这样. (2)不经意间,被MySQL的编码折磨.Ubuntu下修改