学习python的第十一天---HTML的简单学习

lx_59_59

已于 2022-07-06 00:12:40 修改

阅读量151

点赞数

文章标签： html 学习前端 python

于 2022-07-05 20:31:30 首次发布

本文链接：https://blog.csdn.net/qq_57257042/article/details/125627400

版权

文本标签

html文件总体框架：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

title：这是一个标题。

标题标签和段落标签会自动换行：一个标签代表一行或一段，写下一个标签是自动另起一行

h1、h2、h3、h4、h5、h6：标题标签。

<h1>我国人均寿命预期提高到到77岁</h1>
<h2>我国人均寿命预期提高到到77岁</h2>
<h3>我国人均寿命预期提高到到77岁</h3>
<h4>我国人均寿命预期提高到到77岁</h4>
<h5>我国人均寿命预期提高到到77岁</h5>
<h6>我国人均寿命预期提高到到77岁</h6>

p：段落标签

<p>毛群安指出，健康中国行动实施取得了明显的阶段性成效：</p>

文字倾斜标签:i,em

文字加粗标签：b,strong

<i>
	<b>文字倾斜加粗</b>
</i>
<b>
	<i>文字倾斜加粗</i>
</b>
<em>文字倾斜</em>
<strong>文字加粗</strong>

换行标签：br
水平线标签：hr
html中一个空格可以用下来两种方式表示：&+nbsp; &+emsp;

html页面任意多个空格恒等于一个空格。

&+nbsp;表示一个像素(px)单位的空格。

&+emsp;表示一个汉字的宽度。

1em = 16px
```
一&emsp; 二
 
一&nbsp;二
 

```

span：行内文本标签。

<span>我的京东</span> | <span>京东&nbsp;会员</span> | <span>购物车</span> | <span>登录       注册</span>
<!-- 
我的京东 | 京东 会员 | 购物车 | 登录 注册
-->

超链接和图片

img：图片标签。

src="":可以写入图片链接或者本地图片路径。

title=""：鼠标放到图片上可以提示文字。

alt=""：当图片不显示时，显示文字

width="" 、height="" ：修改图片、标签盒子等的显示宽度、高度。
```
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" title="百度一下">
<img src="./1.jpg" alt="" width="250px" height="500px" >
```
a：超链接标签
href：
1. 引入在线链接。
2. 引入本地文件(html文件)。
3. 引入id选择器。

target:

self:当前标签页跳转（默认）。
_blank:新的标签页跳转。

<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="./index.html">HTML基础</a>

将图片变成可点击的超链接.

<a href="https://yrzx.qq.com/act/2890/a20200518xz/index.html" target="_blank">
	<img src="https://game.gtimg.cn/images/ulink/act/2890/a20200518xz/bg-kv1.jpg" alt="" width="400px"  height="100px">
     <p>一人之下手游</p>
</a>

页面跳转：使用#号调用id属性。

<h1 id="top">顶部</h1>
<a href="#top">返回顶部</a>

列表和内联框架

iframe:内联框架，经常被用在登录、注册页面。

<iframesrc="https://www.bilibili.com"width="1500px"height="750px"></iframe>

列表：有序列表ol、无序列表ul。

列表中的内容放在li标签中。列表在网站中主要被用来做下拉菜单和展示同一类内容。

<ul>
	<p>千峰教育成都校区学科一览</p>
	<li>Java</li>
	<li>前端</li>
	<li>python</li>
	<li>UI</li>
	<li>物联网</li>
</ul>
<ol>
	<p>千峰教育成都校区学科一览</p>
	<li>Java</li>
	<li>前端</li>
	<li>python</li>
	<li>UI</li>
	<li>物联网</li>
</ol>
<!--
千峰教育成都校区学科一览
● Java
● 前端
● python
● UI
● 物联网
千峰教育成都校区学科一览

1.Java
2.前端
3.python
4.UI
5.物联网
-->

input标签

input：默认是一个文本框，但是通过修改type属性的值可以将input构造成不同的形式。
placeholder：输入框中的提示性文字。
maxlength：限制输入内容的长度。

value：当input为按钮时，在按钮上显示文字。

<input type="text"><br>
<span>密码：</span>
<input type="password" placeholder="请输入密码" maxlength="5">
<input type="submit" value="登录"><br>
<input type="color">
<input type="file"><br>
<input type="date">
<input type="time">

radio：单选框。

name:两个单选框属于同一类，只能选择其一。

将单选框中的id属性值设置为和lable标签中for的属性值相同，表示相关联。

<p>请选择你的性别：</p>
<input type="radio" name="gender" id="gender1"><label for="gender1">男</label>
<input type="radio" name="gender" id="gender2"><label for="gender2">女</label>

checkbox：多选框。

<p>今晚吃啥？</p>
	<input type="checkbox" name="food" id="one"><label for="one">面条</label>
	<input type="checkbox" name="food" id="two"><label for="two">水饺</label>
	<input type="checkbox" name="food" id="three"><label for="three">炒饭</label>
	<input type="checkbox" name="food" id="four"><label for="four">盖饭</label>