python 学习笔记十二 html基础（进阶篇）

2022-10-02 22:23:03

HTML

　　超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，

可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，

且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果.

基本组成：

<!DOCTYPE html>

<html>

    <head>

    </head>

    <body>

    </body>

</html>

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

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

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

HTML文档

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。看起来很牛逼的样子。

HTML-HEAD

1、Meta(metadata information)

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

页面编码

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

刷新

<meta http-equiv="Refresh" content="30" />

刷新、跳转

<meta http-equiv="Refresh" content="2; Url=http://www.baidu.com" />

关键词和描述

<!--关键词-->

<meta name="keywords" content="星际2，星际老男孩，星际老女孩">

<!--描述-->

<meta name="description" content="博客园是一个面向开发者的知识分享社区。">

X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占
据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部
标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本
上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法
正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。
因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8
引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer
8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8
中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8
按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。
如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。

<!--兼容IE8之前版本-->

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

2、title

网页头部信息

 <title>测试页面</title>

3、link

定义了页面链接标签的默认链接地址例如：导入页面头部图标，外部css

<!--图标-->　　　

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

<!--调用外部css-->

<link rel="stylesheet" type="text/css" href="common.css">

4、Style

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

<style type="text/css">

    .cc{

        color: red;

        font-size: 19px;

    }

</style>

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

<link rel="stylesheet" type="text/css" href="common.css">

5、Script

1、在当前文件中写JS

引进文件

<script type="text/javascript" src="jquery-2.2.3.js"></script>

<script>

js代码

<script type="text/javascript"> ... </script>

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

 <script type="text/javascript" src="js/Form_menu.js"></script>

HTML-BODY

标签一般分为两种：块级标签和行内标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小

a、span、select 等
div、h1、p 等

特殊符号特殊处理

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

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

更多特殊符号请参看：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

1.标题(h标签)

<!--h1标签 块级标签 标题1 h2 .. h3..-->

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

2.段落（p标签）

<!--p标签显示段落,行间有间距  行内标签br换行-->

<p>wolegeca<br/>what are you<br/>nongshaneganhaneganhaneganhane</p>

<p>wolegeca what are you nong sha ne <br/>how much fuck you once </p>

3.div（div+css）

<div style="width: 200px;border: 2px solid red;word-break: break-all;">

    <!--p标签显示段落,行间有间距  行内标签br换行-->

    <p>wolegeca<br/>what are you<br/>nongshaneganhaneganhaneganhane</p>

    <p>wolegeca what are you nong sha ne <br/>how much fuck you once </p>

</div>

4.超链接（a标签）

target 属性

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

使用 target 属性，你可以定义被链接的文档在何处显示。_black表示在新的页面打开。

锚属性

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

<!--锚 id=tt href=#tt-->

<a href="#tt">看这里</a>

<div style="height: 1000px;background-color: red">第一章</div>

<div id="tt" style="height: 1000px;background-color: green">第二章</div>

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

5.图片标签（img）

title属性即光标放在图片上显示的信息

可以设置图片大小height，width等

<img title="re" src="2.png" style="height: 78px;" />

6.下拉框标签（select）

<select>

    <option>北京</option>

    <option>上海</option>

    <option>广州</option>

</select>

selected属性

<select>

    <option  value="1">北京</option>

    <option  value="2">上海</option>

    <!--默认选择第一个，selected选择指定项-->

    <option  value="3" selected="selected">广州</option>

</select>

size 和 multiple属性

 <!--下拉框只显示两个 实现滚轮效果 可以多选 默认单选-->

<select size="2" multiple="multiple">

    <option>北京</option>

    <option>上海</option>

    <option>广州</option>

 </select>

添加分组且组名不可被选

<!--下拉框添加分组标签,标签不可选-->

<select>

    <optgroup label='河北省'>

        <option>石家庄</option>

        <option>邯郸</option>

    </optgroup>

    <optgroup label='山西省'>

         <option>太原</option>

         <option>平遥</option>

    </optgroup>

</select>

7.input系列
checkbox多选项

<h4>checkbox多选框 checked 默认已选择</h4>

<h5>爱好</h5>

<p>篮球：<input type="checkbox" checked="checked" /></p>

<p>足球：<input type="checkbox" /></p>

<p>排球：<input type="checkbox" /></p>

radio互斥项

<h4> radio 互斥框 </h4>

<h5> 性别 </h5>

<p>男:<input name="gender" type="radio" /></p>

<p>女:<input name="gender" type="radio" /></p>

text 和 password

<h4> text输入框 password输入框 value属性:输入默认值</h4>

<p>用户:<input type="text" value="username"></p>

<p>密码:<input type="password"></p>

button 和 submit

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

<!--submit在表单中存在的时候表示把数据提交到后台 botton只是按钮-->

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

textarea区域文本框

<!--textarea文本框输入多行内容-->

<p><textarea>默认值</textarea></p>

file 导入文件

<h4>导入文件</h4>

<input type="file"/>

8.表单（form）

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

<form>

    <p>用户名:<input type="text"/></p>

    <p>密码:<input type="password"/></p>

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

    <!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->

    <!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->

</form>

案例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--form action 指定上传位置 传输方式-->

    <form action="http://10.0.4.42:8000/django_form/" enctype="multipart/form-data" method="post">

        <p>

            <!--form提交数据后端接收为字典 指定name为字典key输入内容为value-->

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

            <input type="password" name="pwd" />

        </p>

        <!--div中指定样式-->

        <div style="background-color: rosybrown;color: white;">

            <h6>爱好</h6>

            <!-- checkbox默认为on form中需要指定name 和 value -->

            篮球：<input name="favor" type="checkbox" value="1" />

            足球：<input name="favor" type="checkbox" value="2" />

            排球：<input name="favor" type="checkbox" value="3" />

        </div>

        <div>

            <h6>性别</h6>

            <!--同上-->

            男：<input name="gender" type="radio" value="1"/>

            女：<input name="gender" type="radio" value="0"/>

        </div>

        <div>

            <h6>城市</h6>

            <!--提交下拉列表框 name在select中指定，value在option指定-->

            <select name="city">

                <option value="888">上海</option>

                <option value="999">北京</option>

            </select>

        </div>

        <div>

            <!--文本框 name为key输入内容为value-->

            <textarea name=",moo"></textarea>

        </div>

        <div>

            <h4>文件</h4>

            <input type="file" name="file_name">

        </div>

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

    </form>

</body>

</html>

9.列表系列

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<u1>
    <li>111</li>

    <li>222</li>

</u1>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

    <li>www</li>

    <li>wwwooo</li>

</ol>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

    <dt>标题</dt>

        <dd>内容1</dd>

        <dd>内容2</dd>

        <dd>内容3</dd>

</dl>

10.table系列

border边宽, thead表头, tbody表身,colspan横跨两列的表格,rowspan横跨两行的表格

<table border="1">

    <thead>

        <tr>

           <th>第一列</th>

           <th>第二列</th>

           <th>第三列</th>

        </tr>

</thead>

<tbody>

        <tr>

            <td colspan="2">h1,h2</td>

            <!--<td>h1</td>-->

            <!--<td>h2</td>-->

            <td>h3</td>

        </tr>

        <tr>

            <!--<td rowspan="2">hh1,hhh3</td>-->

            <td>hh1</td>

            <td>hh2</td>

            <td>hh3</td>

        </tr>

        <tr>

            <td>hhh1</td>

            <td>hhh2</td>

            <td>hhh3</td>

        </tr>

    </tbody>

</table>

11.fieldset

将表单内的相关元素分组。

<fieldset>

　　<legend>用户登录</legend>

   <p>用户名：</p>

   <p>密码：</p>

</fieldset>

码农公寓

有和无的区别

相关文章