内容概要

　　html静态页面，标签介绍

HTML简述　　

定义：

　　HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。

标签元素：

　　HTML元素由开始标签和结束标签组成。如<p>/<p>,<h1><h1/>。虽然现在我们还不知道具体标签代表的意思，但标签一定是这样的格式：有一对开始<>和结束</>。一般标签名推荐用小写。标签具有属性，属性用来表示标签的特征。比如，我们用大小这个属性，来衡量一个苹果。所以，大小可以用来表示苹果的特征。属性时写在标签里面的，而且是开始标签内。

HTML的基本结构：

　　首先我们在pycharm里面new一个html文件，结构如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 </body>

 </html>

在上面的例子中，第一个标签<html>是告诉浏览器这是html文档的开始。Html文档的最后一个标签是</html>，是告诉浏览器这是html的终止。标签<head></head>之间的文本是头部信息，在<title></title>之间的文本是文档标题，会显示在浏览器的窗口的标题栏。<body></body>之间的文本是正文。

常用标签：

文档声明标签

<!DOCTYPE html>

文档声明、告诉浏览器HTML规范

浏览器翻译此网站的时候，网页标注的此网页的语言

Head 头部标签

meta标签

首先meta是一个自闭合标签，为了方便以后看到这类标签能区分出来，建议正确的书写规范在结束的位置加一个/，如下：

<meta charset="UTF-8" />

这里我们声明了编码规则是uft-8.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <!--<meta http-equiv="Refresh" content="30" /> 这边设置了网页的自动刷新，30秒刷新一次。-->

     <!--<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com" /> 这边的设置是3秒后转入另一个网站 百度-->

     <!--<meta name="keywords" content="不可描述，动作，爱情" /> 这边是设置外部搜索引擎爬取改网页时的关键字 根据这些关键字可以爬取到次网页-->

     <!--<meta name="Description" content="这是一个不可描述的爱情动作片网站"/> 设置了网站的描述，name控制了是关键字还是描述-->

     <!--<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8" /> 设置网页的兼容模式，兼容IE9，IE8-->

     <!--<link rel="shortcut icon" href="03.png"/> 这是一个网页标签小图标，显示在title左边，href放图片路径-->

     <title>Title</title>

 </head>

 <body>

 </body>

 </html>

效果图：

因为是讲静态网页这里先不补充link, style, script.

head内部的标签基本都是不显示出来的

Body内部标签

form 标签

举个例子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <form action="https://www.sogou.com/web">

         <input type="text"  name="query"/>

         <input type="submit" />

     </form>

 </body>

 </html>

楼主目前的理解就是form是用来提交表单的。

特殊字符

空格 ==>   大于号 ==> > 小于号 ==> &lt 符号

特殊符号大全：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

 <body>

     <p>段落标签</p>

     <h1>加大加粗</h1>

     <h2>加大加粗</h2>

     <span>白班标签</span>

     <span>白班标签</span>

     <span>白班标签</span>

     <span style="color: red; position:fixed; top:0; left:200px;">这是一个独特的白板</span>

 可以自定义格式 位置 颜色等等

 </body>

效果图：

p,h1 都是块状标签, span 是行内标签

Input 标签

 <body>

     文本：<input type="text" />

     密码：<input type="password" />

     <input type="button" value="按钮">

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

 </body>

     <form enctype="multipart/form-data">

         male: <input type="radio" name="sex" value="male" checked="checked"/>

         female: <input type="radio" name="sex" value="female"/>

         NA: <input type="radio" name="sex" value="NA"/>

         <!--======>    radio代表单选框，value代表单选框的含义,checked="checked" 代表默认选中  name相同的会互斥-->

         <br>

         <br>

         <input type="checkbox" name="favor" value="1" checked="checked"/>basketball

         <input type="checkbox" name="favor" value="2" checked="checked"/>football

         <input type="checkbox" name="favor" value="3"/>baseball

         <input type="checkbox" name="favor" value="4"/>running

         <!--======>    checkbox代表复选框, value代表复选框的值， name统一归类 代表同一个域, checked默认选中值-->

         <br><br>

         <input type="file" name="file_upload" />

         <input type="reset" />

     </form>

依赖form的enctype="multipart/form-data"属性传输数据，reset按钮可以将表单所有的值充值，恢复到默认值。

select下拉框与分组

     <textarea style="height:100px; width:300px"></textarea>  多行输入框

     <br>选择下拉框

     <select>

         <optgroup label="flex">

             <option value="dandy" selected="selected">dandy</option>

             <option value="renee">renee</option>

             <option value="crystal">crystal</option>

         </optgroup>

         <optgroup label="lily">

             <option value="dandy">alex</option>

             <option value="renee">tommy</option>

             <option value="crystal">prada</option>

         </optgroup>

     </select>

效果：flex跟lily是不可以选中的。默认值是dandy

     <textarea style="height:100px; width:300px"></textarea>  多行输入框

     <br>选择下拉框

     <select size="5" multiple="multiple">

         <optgroup label="flex">

             <option value="dandy" selected="selected">dandy</option>

             <option value="renee">renee</option>

             <option value="crystal">crystal</option>

         </optgroup>

         <optgroup label="lily">

             <option value="dandy">alex</option>

             <option value="renee">tommy</option>

             <option value="crystal">prada</option>

         </optgroup>

     </select>

size代表显示的个数，multiple代表复选,按ctrl键选择

超链接标签a

作用： 1、链接 2、锚（切换到指定的行）

链接实例

在新的选项卡打开链接

 <a href="http://www.baidu.com" target="_blank">百度</a>

锚的实例

     <a href="#p1">段落一</a>

     <a href="#p2">段落二</a>

     <a href="#p3">段落三</a>

     <a href="#p4">段落四</a>

     <a href="#p5">段落五</a>

     <p id="p1" style="height:300px">这是段落1</p>

     <p id="p2" style="height:300px">这是段落2</p>

     <p id="p3" style="height:300px">这是段落3</p>

     <p id="p4" style="height:300px">这是段落4</p>

     <p id="p5" style="height:300px">这是段落5</p>

效果自己拷贝代码试一下

图片标签 img

     <img src="03.png" />

     <a href="http://www.baidu.com"><img src="1.jpg" title="我的女神" alt="taylor swift"/></a>

src填路径，第二行是图片做了超链接，鼠标放在图片上可以看到title，图片没缓冲出来或者不存在则显示alt

列表ul 、ol

     <ul>

         <li>dandy</li>

         <li>renee</li>

         <li>taylor</li>

     </ul>

     <ol>

         <li>dandy</li>

         <li>renee</li>

         <li>taylor</li>

     </ol>

分组

     <dl>

         <dd>数字</dd>

         <dt>1</dt>

         <dt>2</dt>

         <dt>3</dt>

         <dt>4</dt>

         <dd>字母</dd>

         <dt>a</dt>

         <dt>b</dt>

         <dt>v</dt>

         <dt>e</dt>

     </dl>

表格table

     <table border="1">

         <thead>

             <tr>

                 <th>表头1</th>

                 <th>表头2</th>

                 <th>表头3</th>

                 <th>表头4</th>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td>1</td>

                 <td colspan="3">1</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>2</td>

                 <td>2</td>

                 <td rowspan="2">2</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>3</td>

                 <td>3</td>

             </tr>

         </tbody>

     </table> 合并单元格横竖用colspan & rowspan

label标签

     <label for="text1">username:</label>

     <input id="text1" type="text" />

上图的for作用，label会让光标聚焦到text1上，方便输入，这是细节。。

画框

     <fieldset>

         <legend>登陆</legend>

         <label for="textuer">用户名：</label>

         <input id="textuer" type="text" />

         <br/>

         <label for="textpsd">密码：</label>

         <input id="textpsd" type="password" />

     </fieldset>

注释

选择器

id选择器、class选择器、标签选择器、层级选择器、组合选择器、属性选择器

     <style>

         组合选择器+id选择器

         #p1, #p2{

                 height:50px;

         }

         标签选择器

         p{

             color:red

         }

         class选择器

         .abc{

             text-align:right

         }

         层级选择器

         div p{

             font-size:50px;

         }

         属性选择器

         input[type='text']

         {

             width;290px;

             height:100px

         }

     </style>

 <body>

     <p id="p1" class="abc" name="textp">test</p>

     <p id="p2" class="abc">test</p>

     <p id="p3" class="abc">test</p>

     <p id="p4" class="abc">test</p>

     <div>

         <h1>python</h1>

         <h2>python</h2>

         <h3>python</h3>

         <p>aaappp</p>

     </div>

     <input type="text" />

     <input type="password" />

 </body>

标签优先级

标签上的style优先级最高；其他按编写顺序越往下越优先。越往后越是最后执行的，所以优先级高。

CSS边框

     <div style="border:2px solid red;"> solid 代表实体 dotted 虚线的</div>

     <div style="border:2px dotted red;"> solid 代表实体 dotted 虚线的</div>

     <div style="width:200px;height:48px;border:2px solid black;text-align:center;line-height:48px">text center</div>

line-height设置成跟div一致的高度，则使得垂直居中。

display, float

     <div style="color:white;width:20%;background-color: black;display:inline;float:left">1</div>

     <div style="color:white;width:70%;background-color: red;display:inline;float:right">2</div>

     <div style="clear:both"></div>

     <div style="background-color:green">asdasdaw</div>

float:right\left;

display: inline(转化为行内标签); block(转化为块状标签); none(让标签消失); inline-block(具有：inline默认自己有多少占多少的、block可以设置高度和宽度，边距);

clear:both 包裹住float的标签、

行内标签不可以设置高度，宽度，内外边距；块级标签继承父标签的高度宽度

Python 14 Html 基础的更多相关文章

利用Python进行数据分析基础系列随笔汇总
一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...
[Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念
上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...
Python之路，第一篇：Python入门与基础
第一篇:Python入门与基础 1,什么是python? Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. 2,python的特征: (1)易于学习,易于利用: (2)开 ...
[转]python与numpy基础
来源于:https://github.com/HanXiaoyang/python-and-numpy-tutorial/blob/master/python-numpy-tutorial.ipynb ...
Python入门篇-基础数据类型之整型（int），字符串（str），字节（bytes），列表（list）和切片（slice）
Python入门篇-基础数据类型之整型(int),字符串(str),字节(bytes),列表(list)和切片(slice) 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Py ...
Python入门篇-基础语法
Python入门篇-基础语法作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编程基础 1>.程序一组能让计算机识别和执行的指令. 程序 >.算法+ 数据结构= 程 ...
深度学习入门者的Python快速教程 - 基础篇
5.1 Python简介本章将介绍Python的最基本语法,以及一些和深度学习还有计算机视觉最相关的基本使用. 5.1.1 Python简史 Python是一门解释型的高级编程语言,特点是简单明 ...
Python网络编程基础|百度网盘免费下载|零基础入门学习资料
百度网盘免费下载:Python网络编程基础|零基础学习资料提取码:k7a1 目录: 第1部分底层网络第1章客户/服务器网络介绍第2章网络客户端第3章网络服务器第4章域名系统第5章 ...
[资料分享]Python视频教程（基础篇、进阶篇、项目篇）
Python是一种开放源代码的脚本编程语言,这种脚本语言特别强调开发速度和代码的清晰程度.它可以用来开发各种程序,从简单的脚本任务到复杂的.面向对象的应用程序都有大显身手的地方.Python还被当作一 ...

随机推荐

第九篇-新建文件夹和文本文件mkdirs,createNewFile
一.新建一个empty activity的项目二.修改AndroidMainfest.xml,添加用户权限. <?xml version="1.0" encoding=&q ...
Day7--Python--基础数据类型补充,集合,深浅拷贝
一.基础数据类型补充 1.join() 把列表中的每一项(必须是字符串)用字符串拼接与split()相反 lst = ["汪峰", "吴君如", " ...
Mock2 moco框架的http协议get方法Mock的实现
首先在Chapter7文件夹下再新建一个startGet.json startget.json代码如下,因为是get请求,所以要写method关键字,有两个,一个是有参数,一个是无参数的请求. [ { ...
vue(基础二)_组件，过滤器，具名插槽
一.前言主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
Python之函数对象、函数嵌套、名称空间与作用域、闭包函数、装饰器
目录一函数对象二函数的嵌套三名称空间和作用域四闭合函数五装饰器一.函数对象 1.函数是第一类对象 #第一类对象的特性:# 可以被引用 # 可以当做参数传递 # 返回值是函数 # ...
python3 aes加解密
# encoding: utf-8 import xlrd import os import yaml import logging.config from Crypto.Cipher import ...
jupyter notebook的安装与使用
一.jupyter notebool介绍 Jupyter Notebook是Ipython的升级版,而Ipython可以说是一个加强版的交互式 Shell,也就是说,它比在terminal里运行pyt ...
Django之Models操作
一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pr ...
namenode format
https://community.hortonworks.com/content/supportkb/48981/how-to-recover-namenode-ha-when-one-accide ...
JAVA核心技术I---JAVA基础知识（数据结构基础）
一:数组 (一)基本内容是与C一致的 (二)数组定义和初始化 (1)声明 int a[]; //a没有new操作,没有被分配内存,为null int[] b; //b没有new操作,没有被分配内存,为 ...

Python 14 Html 基础

HTML简述

常用标签：

Head 头部标签

Body内部标签

Python 14 Html 基础的更多相关文章

随机推荐

热门专题

HTML简述　　