HTML:

  HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。

相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

  超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

网页的组成:

一个网页一般由两部分组成即:

   1> HTML(Hypertext Markup Language)

   2> CSS(Cascade Style Sheets)。

  HTML负责描述网页的结构和内容(如标题,导航栏等)  CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。

下面来看html的格式:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>告诉浏览器使用什么样的html或xhtml规范来解析html文档。

<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>。

<head>和</head>之间的内容,是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息。

<body>和</body>之间的内容,是浏览器呈现出来的,用户看到的页面效果。也就是说这里是网页的主体

详细的解释一下:
为什么要使用<!DOCTYPE html>这个去告诉浏览器呢?:
我们先了解一下DOCTYPE的模式
BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

问题产生:
    当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。 Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。
解决方案:允许网站开发者能够选择他们所熟知的模式。
    依然使用旧式规则显示陈旧的网站。换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。选择使用哪种模式需要一个触发器,而“DOCTYP切换” 则用于此目的。依照标准:任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示 (X)HTML文档中允许有什么,不允许有什么,CTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格。

head部分

1、Meta(metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
 --meta属于自闭合标签
<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/" /> #指定1秒之后跳转页面至另一个网页
关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收
<meta name="keywords" content="博客,Mr、心弦,帅哥">
(4)描述
例如cnblog里的就是一个描述:
<meta name="description" content="博客园是一个面向开发者的知识分享社区。"
(5)X-UA-Compatible  这个是IE8特有的,知道即可,解决版本兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

2、title

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

 

<title 

name="123"

 >测试页</title> #在标签里写""="" 就是标签的属性,如本句蓝色标注的地方。
注意:引号必须为英文的,并且"<"后面不能有空格。 

3、Link-->(由此引入css)

网页头部的图标
<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部分

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

<div style="background-color: green;">
   无名
</div>
<span style="background-color: red">
   小妖
</span>

注:
要在html中显示"<"和">" 需要这样写"&lt;" "&gt;" , 显示空格这样写"&nbsp;"

常用标签:
 1、<p></p>标签和<br/>标签
<p></p>标签:段落标签,每一对p标签为一段,代码如下:


   2、<a></a>标签 
<a></a>标签用来跳转和锚
<a>标签之:跳转,代码如下:

效果就是点击 跳转到百度。
但是这个跳转是在当前页跳转的,如果想跳转到新的页面,用如下代码:

<a>标签之:锚
锚的作用是类似于读书时候的书签,当你你点击这个“锚”=“书签”,的时候就跳转到指定的位置 。
代码如下:

当点击“第一章”的时候,
页面会把指定位置的内容置于页面顶部:


3、H标签
即标题标签,代码如下: 

效果如下:

4、input标签
用于输入,代码:
文本框 密码框:
这些效果只是默认的,后面学习css之后还可以单选框:
<p>性别:
   <br /> 男 <input type="radio" name="nannv" /> 
   <br /> 女 <input type="radio" name="nannv" />
 name 属性值一致即可。
效果:复选框: 可添加name属性,value值,name 一样 值不同。
效果:

 
可以添加默认选项(checked="checked" ):
效果:
 
注: 对于radio 和 checkbox 需要指定value,在提交的时候就会发送相应的值
按钮:
submit:提交当前表单下的内容 
button:默认无功能
reset:重置当前表单下的内容 
选择文件:
<p>
文件:<input type="file" />
</p>
效果:
上传文件 , 需要下面两个配置
 
 
email框:
<p><input type="email" /></p>

当提交时浏览器会自动检测输入框内是否符合邮件格式,但有些低版本浏览器不支持该功能。
多行文本框:

<body>
<textarea>123</textarea>
</body>
效果:

可见,中间的内容会默认显示。 

5、form表单 -->(action提交url,method提交方式,enctype上传文件)
<form>
   <p>用户名:<input type="text"/></p>
   <p>密码:<input type="password"/>
   </p><input type="submit" value="提交"/>
   <input type="button" value="按钮"/>
   <!--这里按提交才有反映,submit是用来提交当前的表单的,当然可以有多个表单-->
   <!--但是,这个submit需要写入表单内,那么提交的时候是提交的当前表单-->
</form>

提交数据到某个网址
6、select标签  
1>
   
 效果:
   
 2>

 效果:
  size=2 表示显示两个,如上图。
3>

效果如下: (按住ctrl可以多选)
4>



7、label标签

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

8、列表 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>

9、表格
<table border="1">
<!--border这里是加上边框-->
        <thead>
<!--表头-->
            <tr>

                        <!--th表头,有加粗效果-->
                        <th>name1</th>
                        <th>name2</th>
                        <th>name3</th>
            </tr>
        </thead>
<tbody>
<!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
             <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
            </tr>
            <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
            </tr>
            <tr>
                        <td>7</td>
                         <td>8</td>
                        <td>9</td>
            </tr>
       </tbody>
</table>
效果:
语法:

合并列:

 看效果:

 也就是说,当我们想要一个字段对应多个列的时候,可以这样设置。
合并行:
这里的关键字是td和rowspan
当我们想让一行数据占据多行宽度的时候,可以这样设置。

 效果:

 如果把上面代码的注释取消,则效果如下:
<tr>
   <td>1</td>
   <td rowspan="2">2</td>
   <td>3</td>
</tr>
<tr>
   <td>4</td>
   <!--<td>5</td>-->
   <td>6</td>
</tr>
可见,数据被”排挤“到一边了 。
10.fieldest 大边框
<fieldset>
    <legend>无名小妖的后花园</legend>
    <p>血晶花 小果花</p>
    <p>冰莲花</p>
</fieldset>

11.iframe (上传文件 跨域 ajex)<!DOCTYPE html>
可以直接打开网站内容:
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的汽车之家</title>
    </head>
    <body>
         <iframe style="width: 100%;height:2000px;" src="http://autohome.com.cn">
         </iframe>
    </body>
</html>
效果:

12.img 图片标签
<img src="3.png" alt="图片">
alt 表示,当图片无法正常显示的时候,显示alt所设置的值.

循序渐进Python3(十一) --0-- web之html的更多相关文章

  1. 循序渐进学.Net Core Web Api开发系列【0】:序言与目录

    一.序言 我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...

  2. python3.8.0 Django 开发后端接口api 部署到 Linux Centos7上

    经历了两天的时候终于把本地使用python3 django开发的接口API部署到服务器上了,还是记录一下,以免之后忘记,哈哈 注意一点,就是,centos7是基于python2的,我这边默认的是pyt ...

  3. Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC

    内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...

  4. 基于centos7+nginx+uwsgi+python3+django2.0部署Django项目

    0.序言 本文讲解如何基于centos7+nginx+uwsgi+python3+django2.0把windows上的本地项目部署到云服务器上. 本文服务器上的django项目和虚拟环境的路径将建立 ...

  5. 循序渐进学.Net Core Web Api开发系列【10】:使用日志

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇介 ...

  6. 循序渐进学.Net Core Web Api开发系列【9】:常用的数据库操作

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇描述一 ...

  7. 循序渐进学.Net Core Web Api开发系列【7】:项目发布到CentOS7

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...

  8. 循序渐进学.Net Core Web Api开发系列【6】:配置文件appsettings.json

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇描 ...

  9. 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 前一篇文章 ...

  10. 循序渐进学.Net Core Web Api开发系列【3】:WebApi开发概览

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 目前我们已 ...

随机推荐

  1. iOS5.0以上使用新浪微博开放平台OAuth 续(及解决登录无效问题)

    新浪微博开放平台为第三方应用提供了简便的合作模式,满足了手机用户和平板电脑用户随时随地分享信息的需求.通过调用平台的api即可实现很多微博上的功能. 本篇主要目的是记录新浪微博移动SDK iOS版本的 ...

  2. 尝试打开或创建物理文件 REATE FILE 遇到操作系统错误 5(拒绝访问)

    尝试打开或创建物理文件 'E:\Library.mdf' 时,CREATE FILE 遇到操作系统错误 5(拒绝访问.). 最佳回答: 这是因为SQL Server的启动帐户(一般是system或某个 ...

  3. 第一次用阿里云ecs配置pptp vpn遇到的问题。

    在国外没办法使用一些国内一些涉及版权的网站,各种音乐和视频都没法看很不爽.自己租了个ecs.vps上安装vpn网上很多教程,但是有些地方只是copy上去还是不行的,得根据vps的具体情况改动一下才可以 ...

  4. SQL Server Reporting Services本机模式下的权限管理

    SQL Server Reporting Services在安装配置后,缺省只给BUILTIN\Administrators用户组(实际上只有本机的Administrator用户)提供管理权限.所以所 ...

  5. sql2008r 收缩数据库日志log文件;删除errorlog文件的方法

    1.清空log文件,以减少数据库文件log所占的空间 USE dbname1 ; GO ALTER DATABASE dbname1 SET RECOVERY SIMPLE;--设置简单恢复模式 GO ...

  6. c++容器

    1.vector:实质是动态堆数组,连续存储的内存区域,支持快速的随机访问. 2.list:实质是双向循环链表,支持在中间进行快速的插入删除,但是不能支持快速的随机访问.非连续的内存区域. 3.deq ...

  7. Python格式化字符串和转义字符

    地址:http://blog.chinaunix.net/uid-20794157-id-3038417.html Python格式化字符串的替代符以及含义     符   号     说     明 ...

  8. SQL语句的增删查改

    一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [into] <表名> [列名] values <列值> 例:insert into Strdent ...

  9. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  10. 向架构师进军-->可重用架构资源

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 软件架构有三个主要来源:拿取.方法以及直觉.拿取也就是可重用资源.对于一个标准的系统 ...