Python笔记_39_前端_HTML

最新推荐文章于 2021-04-28 18:26:46 发布

豆浆多放点糖

最新推荐文章于 2021-04-28 18:26:46 发布

阅读量242

点赞数 1

分类专栏： python笔记

本文链接：https://blog.csdn.net/wangjunwen1017/article/details/93104877

版权

python笔记专栏收录该内容

83 篇文章 3 订阅

订阅专栏

文章目录

- 前端

前端

前端简介

HTML 结构标准：相当于人的骨架。HTML就是用来制作网页的。
css 表现标准：相当于人的衣服。css就是对网页进行美化的。
js(JavaScript) 行为标准：相当于人的动作。JS就是让网页动起来，具有生命力的

Alt

博客地址 :
前端初识
 body标签详解

HTML

HTML概述

HTML全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。

超文本：音频，视频，图片称为超文本。
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。HTML是负责描述文档语义的语言,在html中，除了语义，其他什么都没有。

HTML的网络术语

网页：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： 称为开始标记，称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：内容称为元素.
属性：给每一个标签所做的辅助信息。

HTML结构

文档声明头
任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ...>开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
html标签
此元素可告知浏览器其自身是一个 HTML 文档。
head标签(网站的配置信息)
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 一定要有title标签。
body标签
<body>元素定义文档的主体。
<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

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

<!-- 双闭合标签 -->
<div>Hello World</div>
<!-- 单闭合标签 -->
<hr />


</body>
</html>

body标签相关

标题标签h系列(***)

<h1>1小伙子，加油干！</h1>
<h2>2小伙子，加油干！</h2>
<h3 id="title-h3">3小伙子，加油干！</h3>
<!--<a name="aaa" href="">dfsdfsdf</a>-->
<p name="aaa">dfsdfsdf</p>  <!-- 设置锚点，name属性只能给a标签设 -->
<h4>4小伙子，加油干！</h4>
<h5>5小伙子，加油干！</h5>
<h6>6小伙子，加油干！</h6>
<h7>7小伙子，加油干！</h7><!--注意：这个是没有的-->

1小伙子，加油干！

2小伙子，加油干！

3小伙子，加油干！

dfsdfsdf

4小伙子，加油干！

5小伙子，加油干！

6小伙子，加油干！

7小伙子，加油干！

b标签加粗

<b>马俊强</b>马俊强
<strong>张国程</strong>

马俊强马俊强
张国程

u标签下划线
```
马俊强
```
马俊强
s和del 中划线
```
<s>张国程</s>
<del>张国程</del>
```
~~张国程~~
~~张国程~~
p标签(***)

只能放文本/图片/表单元素.
```
你是一个p
你是一个p啊
```
你是一个p

你是一个p啊
div标签(***)

块级标签,独占一行.页面排版时,当做容器使用.
```
<div>div标签</div>
```
div标签
span标签(***)

内联标签,作为页面提示信息使用.
```
span标签但对方水电费水电费
```
span标签但对方水电费水电费

pre标签

定义预格式化的文本

<p>            戏张先
                —— 苏轼
十八新娘八十郎，苍苍白发对红妆。
鸳鸯被里成双夜，一树梨花压海棠。</p>



<p>戏张先</p>
<pre>
            戏张先
                —— 苏轼
十八新娘八十郎，苍苍白发对红妆。
鸳鸯被里成双夜，一树梨花压海棠。
</pre>

在这里插入图片描述

戏张先
—— 苏轼
十八新娘八十郎，苍苍白发对红妆。
鸳鸯被里成双夜，一树梨花压海棠。

戏张先

             戏张先
                 —— 苏轼
 十八新娘八十郎，苍苍白发对红妆。
 鸳鸯被里成双夜，一树梨花压海棠。

a标签(***)文本级标签

<a href="html初识.html">打开新页面</a>
<a href="http://www.baidu.com">百度一下</a>
<a href="#title-h3">跳至h3</a>
<a href="#">跳至顶部</a>
<a href="#aaa">跳至aaa</a>


<a href="javascript:alert('michael');" title="弹出框">点击1</a>
<a href="javascript:void(0);">点击2</a>
<a href="javascript:;">点击3</a>

跳转到指定地址
跳转至锚点(name和id,注意一下)
跳转至顶部(#)
写静态页面是,建议给a加上 <a href="javascript:void(0);">

打开新页面
 百度一下
 跳至h3
跳至顶部
 跳至aaa

点击1
点击2
点击3

img标签(***)
```
<img src="111.jpg" alt="走丢了" width="" height="100" title="杨幂">
<img src="111.jpg" alt="走丢了" width="" height="300" title="杨幂">
<img src="111.jpg" alt="走丢了" width="" height="500" title="杨幂">
```
- src 图片的地址(url,绝对路径,相对路径)
- 宽和高,只设置一个时,会按照图片的原始比例,进行缩放.
- title 鼠标悬浮时,显示的提示性的文本.
- alt 图片加载失败时,提示信息.提高用户的体验度.
- a标签可以包裹img,点击img时,进行跳转.
- 高矮不齐，底边对齐

ul标签(***)

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>赵五</li>
</ul>


<ul>
    <li><b>北京</b>
        <ul>
            <li>朝阳区</li>
            <li>东城区</li>
            <li>西城区</li>
        </ul>
    </li>
</ul>
<ul>
    <li><b>广东</b>
        <ul>
            <li>广州市</li>
            <li>佛山市</li>
            <li>深圳市</li>
        </ul>
    </li>
</ul>

在这里插入图片描述
无序列表

li标签,不能单独使用.容器级标签.

一般会结合css,进行页面排版.

ol标签

有序列表

设置type,自定制序号.

配合li标签.

<ol>
    <li>张三，默认</li>
    <li>李四，默认</li>
    <li>赵五，默认</li>
</ol>

张三，默认
李四，默认
赵五，默认

dl标签

定义列表

dt标签,顶头显示.

dd标签,在左侧有缩进

<dl>
        <dt>第一条规则</dt>
        <dd>不准睡觉</dd>
        <dd>不准交头接耳</dd>
        <dd>不准下神</dd>

        <dt>第二条规则</dt>
        <dd>可以泡妞</dd>
        <dd>可以找妹子</dd>
        <dd>可以看mv</dd>
</dl>

第一条规则

不准睡觉

不准交头接耳

不准下神

第二条规则

可以泡妞

可以找妹子

可以看mv

table标签(***)

tr标签,行

td标签,列

th标签,列(td+b)

thead标签,表头

tbody标签,表内容

tfoot标签,表页脚.

<table border="1" style="border-collapse:collapse;">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <td><b>地区</b></td>  <!-- th相当于td+b -->
    </tr>
    <tr>
        <td>波波</td>
        <td>22</td>
        <td>女</td>
        <td rowspan="3">东瀛</td>
    </tr>

    <tr>
        <td>小岳岳</td>
        <td>45</td>
        <td>男</td>
<!--        <td>河南</td>-->
    </tr>

    <tr>
        <td>邓紫棋</td>
        <td>23</td>
<!--        <td colspan="2">女</td> &lt;!&ndash; 横向 &ndash;&gt;-->
        <td>女</td>
<!--        <td>香港</td>-->
    </tr>
</table>

姓名	年龄	性别	地区
波波	22	女	东瀛
小岳岳	45	男
邓紫棋	23	女

合并单元格:

纵向合并rowspan
横向合并colspan

form表单(***)

属性:

action 数据提交的服务器地址
method 数据提交的方式,默认get,指定post,当你写错的时候,还是按照get

input标签 type:

text, 默认,文本,用于输入用户名等信息(***)
password, 用于用户密文输入密码(***)
radio , 单选框,必须name值一致.(***)
CheckBox, 复选框,(***)
button, 普通按钮,配合js使用(***)
submit, 提交按钮.(***)
reset, 重置form表单内的内容
file, 上传文件(***)
hidden, 隐藏的input标签,

默认选中,checked

select标签(***)

name是提交过去的key,option的value属性是提交过去的值.
option标签 value属性,
默认选中,selected

textarea标签

多行文本输入框

label标签(***)

提高用户的体验度
for属性,必须制定的对方的id值.

<hr>
<h3>用户注册</h3>
<form action="http://127.0.0.1:8899" method="get">

    <p><label for="username">用户名：</label><input type="text" name="username" id="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>性别：
        <input type="radio" name="sex" value="male" checked> 男
        <input type="radio" name="sex" value="female"> 女
        <input type="radio" name="sex" value="secret"> 保密
    </p>
    <p>爱好：
        <input id="chui" type="checkbox" name="hobby" value="chui"> <label for="chui">吹管乐</label>
        <input type="checkbox" name="hobby" value="la"> 拉二胡
        <input type="checkbox" name="hobby" value="tan"> 弹吉他
        <input type="checkbox" name="hobby" value="chang"> 唱歌
    </p>
    <p>
    学历：
    <select name="xueli" id="sel1" size="3" multiple>
        <option value="g">高中</option>
        <option value="d">大专</option>
        <option value="b" selected>本科</option>
        <option value="s">硕士</option>
    </select>
    </p>
    <p>个性签名：
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <input type="hidden" value="sdfsdfsdf">
    <input type="reset">
    <input type="file">

    <input type="submit" value='注册'>
</form>

<button>按钮</button>