Python：Day40 html

时间：2023-03-08 20:17:19

URL包括三个部分：协议、域名、路径

htyper text markup language (html)  即超文本标记语言

前端一共包括三个内容：html、css、js

html做为基础，让CSS进行渲染，js进行动画

<h1> </h1>  这个整体就是h1标签，标签的名字就是h1，h就是head的缩写，是标题的意思，是闭合标签

<head>标签里面的内容都是网页上看不到的内容，但是都和浏览器解析有关的一些内容

标签不区分大小写，推荐使用小写

标签的属性写在标签中，如：<h1 id='123'>，属性是由一组组的键值对来表示的，只能出现在开始标签或自闭合标签中。

如果属性名和属性值完全一样，直接写属性名即可，这是缩写的一种表现

有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />自闭合标签中的/可以加也可以不加，可以放前面也可以放后面，通常放后面，这样只是为了方便看。

<mate>标签

meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

<meta charset="UTF-8">

<meta http-equiv="refresh" content="2,url=http://www.jd.com">   
前面的为秒数，后面的为地址，地址必须要有http://，前面的url=可以不加，不区分大小写,不加后面URL的话，就是刷新本页面

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">

name属性一共有两个值：keywords/description

<title>标签

<title>博客园</title>

title标签中的内容就是显示在打开网页的最上面的。

<link>标签

rel：relationship的英文缩写，rel属性用于定义链接的文件和HTML文档之间的关系。

注意：HTML中只有在使用了 href 属性的情况下才能使用 rel 属性。

rel属性是必需的。定义当前文档与被链接文档之间的关系。

href是Hypertext Reference的缩写。意思是指定超链接目标的URL。

<link rel="icon" href="http://www.jd.com/favicon.ico">

以下为body标签：

<h1>标签

h标签只有6个，就是h1-h6，是块级标签

<p>标签

段落标签，不仅换行，而且中间还隔行，是块级标签

<p>床前明月光</p>

<p>疑是地上霜</p>

<br/>换行标签

br是break的简写。由于html对于多个空格或换行，只认为是一个空格，所以需要此标签

床前明月光<br/>

疑是地上霜

<hr/>水平线标签

<div>标签

div标签的功能是什么能功能都没有，是一个块级标签

hello before<div>hello world</div>

显示结果:

hello before

hello world

<span>标签

span标签和div标签一样，都是什么功能都没有，是内联标签。

<img>标签

img是给网页加图片的标签，是内联标签

<img src="1.jpg" width="200px" height="200px" alt="图片加载不成功时提示的" title="鼠标放在图片是显示的文字">

<a>标签

a标签是内联标签

a标签两个功能：1、链接   2、锚（href后面引用的id前面一定要加#号）

<a href="http://www.baidu.com" target="_blank" title="鼠标放在文字上显示的内容">百度</a>  traget的作用是在当前页打开还是从新开一页，blank是新开一页

<a href="#div1">第一章</a>

<div id="div1">第一章内容</div>

列表标签

ul是unordered list  无序列表

ol是ordered list  有序列表

dl是defind list  定义列表，目录那种格式

dt是defind title  定义标题

dd是defind data  定义数据

<ul>

    <li>1111</li>

    <li>1111</li>

    <li>1111</li>

</ul>

<ol>

    <li>2222</li>

    <li>2222</li>

    <li>2222</li>

</ol>

<dl>

    <dt>第一章</dt>

    <dt>第二章</dt>

    <dt>第三章</dt>

</dl>

<table>表格标签

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.

示例：

<table border="1">

    <tr>

        <th>姓名</th>

        <th>性别</th>

        <th>邮箱</th>

    </tr>

    <tr>

        <th rowspan="2">姓名</th>

        <th>性别</th>

        <th>邮箱</th>

    </tr>

    <tr>

        <th colspan="2">性别</th>

    </tr>

</table>

<form>标签

所有的表单内容都要放在form标签中，不然这些数据都不知道要发到哪。

form表单中有input、select、textarea、label标签

input标签中又有很多的类型。

select标签中要插入<option>或<optgroup>标签

label标签通过id和其它标签进行关联

<form action="/xiaohu" method="post" enctype="multipart/form-data">

    <p>用户名：<input type="text" name="username"></p>

    <p>密码：<input type="password" name="pwd"></p>

    <p>性别：男<input type="radio" name="sex" value="0"> </p>

    <p>女<input type="radio" name="sex" value="1"></p>

    <p>爱好：篮球<input type="checkbox" name="hobby" value="basketball"></p>

    <p>足球<input type="checkbox" name="hobby" value="football"></p>

    <p><input type="file" name="doc"></p>

    出生地：<select name="city" multiple size="2">

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

        <option value="tianjing">天津</option>

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

        <option value="jiangsu">江苏</option>

    </select>

    城市：<select name="province" >

        <optgroup label="江苏省">

            <option value="nanjing">南京</option>

            <option value="suzhou">苏州</option>

            <option value="yangzhou">扬州</option>

        </optgroup>

        <optgroup label="北京省">

            <option value="chaoyang">朝阳</option>

            <option value="haidian">海淀</option>

            <option value="yizhuang">亦庄</option>

        </optgroup>

    </select>

    <textarea rows="20" cols="20">自我简介</textarea>

    <label for="idhao">姓名</label>

    <input id="idhao" type="text">

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

</form>

form标签里面如果不填action和method时，会有一个默认值，默认当前URL和GET方法

input标签是自闭合，内联标签

<QueryDict: {'pwd': ['77932423'], 'sex': ['0'], 'hobby': ['basketball', 'football'], 'username': ['bili']}>

file: <MultiValueDict: {'doc': [<InMemoryUploadedFile: 20180326121913.png (image/png)>]}>

表单是以一个字典的形式发过去的，键就是input中的name属性，值是一个列表，对于文本框，值就是输入的内容，对于选择框，值要在input中设置value。

<select>中mutiple属性的效果是可以选择多个，size的效果是能同时看到几个选择项

其它标签：

注意：这些标签都是内联标签

<b>给字体加粗</b>

<em>变成斜体</em>

<strike>去除</strike>

<del>delete</del>
2<sup>3</sup>
2<sub>3</sub>
 显示结果: 给字体加粗 变成斜体 去除 delete  23 23

特殊符号：

&nbsp;　　代表一个空格

&copy;　　代表版权符号

&lt;　　代表小于号

&gt;　　代表大于号

注意：所有的标签统分为块级和内联

内联（in-line）标签就是自己占一块，占多少取决于中间内容大小。块级（block）标签。

相关文章