必要的html学习

最新推荐文章于 2024-10-03 22:12:17 发布

Yuanan_a

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量504

点赞数 2

分类专栏： Python学习文章标签： html 学习

本文链接：https://blog.csdn.net/Yuanan_a/article/details/125694573

版权

Python学习专栏收录该内容

29 篇文章 3 订阅

订阅专栏

一、前端：三大技术

HTML ：负责显示页面内容（文字、按钮、输入框）

CSS ：负责页面内容的布局和样式

JavaScript：负责实现功能

前端文件的后缀名：html、htm、shtml

html：现在最常用的前端文件后缀名
htm和html相等，从前DOS操作系统后缀名存在限制，文件后缀名长度<=3
shtml：内置了脚本命令的html文件

HTML文件理解为是一个html标签，html标签内包含head标签和body标签

head标签存放页面部分配置项，body标签显示页面内容

二、html标签

分为双标签（一般标签）、单标签（自闭合标签）

（一）双标签

<标签名 属性1=属性值1 属性2=属性值2 ......>标签和内容</标签名>

（二）单标签

<标签名 属性1=属性值1 属性2=属性值2 ......>
或者
<标签名 属性1=属性值1 属性2=属性值2 ...... />

属性=属性值 -> 固定写法，用于修改标签的内容或样式

标签名 -> 固定写法，不同的标签用于显示不同的内容，用法是固定的

html语法和Markdown语法属于同一类

<!-- 声明这是一个html5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<!-- charset用于页面指定编码 -->
		<meta charset="utf-8" />
		<!-- 页面的标题 -->
		<title></title>
	</head>
	<body>

	</body>
</html>

三、文本标签

（一）标题标签:h1，h2…h6

标题标签最多只能写到h6

示例：

<h1>今天很开心</h1>
<h2>今天很开心</h2>
<h3>今天很开心</h3>
<h4>今天很开心</h4>
<h5>今天很开心</h5>
<h6>今天很开心</h6>

（二）段落标签：

标题标签和段落标签会自动换行（一个标签达标一行或者一段，写下一个标签时自动另起一行）

（三）文字倾斜标签

i、em

（四）文字加粗标签

b、strong

文字标签可以混合使用

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

（五）换行标签

<br>

（六）水平线标签

<hr>

（七）行内文本标签

<span>

（八）关于空格

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

html中一个空格可以用下列两种方式表示：  或者 &emsp; (要加分号)

表示一个像素（px）单位的空格

&emsp;表示一个汉字的宽度，一个&emsp;=16 

对比：

<span>一&nbsp;二</span>
<br>
<span>一&emsp;二</span>

四、超链接和图片

（一）图片标签：

<img src="" alt="" title="">

src： 1.可以写入链接。2.可以写入本地路径

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

alt:当图片不显示时，显示文字

width、height：能够修改图片、标签盒子等的显示宽度和高度

示例：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" title="点击一下，了解更多" width="100px" height="250px">

（二）超链接标签：

<a href="" target=""></a>

href

1.引入在线链接
2.可以引入本地文件（必须是html文件）
3.可以引入id选择器

target

1._self:当前标签页跳转（默认）
2._blank:新的标签页跳转

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

如何将图片变为可点击的超链接？

以某度图片为例：

<a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc" target="_blank">
					<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" width="270px" height="129px" class="a1">
				</a>

（三）页面跳转

使用#调用id属性

<h1 id="top">顶部</h1>
<!-- 篇幅请自动*N -->
<p>鹅鹅鹅，曲项向天歌</p>
<p>鹅鹅鹅，曲项向天歌</p>
<p>鹅鹅鹅，曲项向天歌</p>
<p>鹅鹅鹅，曲项向天歌</p>
<p>鹅鹅鹅，曲项向天歌</p>
<p>鹅鹅鹅，曲项向天歌</p>
<p>鹅鹅鹅，曲项向天歌</p>

<a href="#top">
	<img src="./img/顶部.jpg" alt="">
</a>

五、列表和内联框架

内联框架：<iframe>

经常被用在登录、注册页面

示例：

<iframe src="https://www.bilibili.com/" width="1920px" height="500px"></iframe>

注意：有些网站会拒绝请求

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

1.列表中的内容放在<li>

2.列表在网站中主要被用来做下拉菜单和展示同一类内容

示例：

<ul>
	<li>Java</li>
	<li>前端</li>
	<li>Python</li>
	<li>UI</li>
	<li>物联网</li>
</ul>
		
<ol>
	<li>Java</li>
	<li>前端</li>
	<li>Python</li>
	<li>UI</li>
	<li>物联网</li>
</ol>

六、input标签

<input type="text" placeholder="" maxlength="">

input:默认是一个文本框，但是通过修改type属性的值可以将input构造成不同的形式

placeholder：输入框中的提示性文字

maxlength:限制输入内容的长度

<input type="password" placeholder="请输入密码" maxlength="5">
<!-- value：当input为按钮时，在按钮上显示文字 -->
<input type="submit" value="登录" ><br>
		
<input type="color">
<input type="file">
<input type="date">
<input type="time">
<input type="datetime-local">

radio和checkboxl

radio：单选框

1.name:告诉系统两个单选框属于同一类
2.将单选框中的id属性值设置为和lable标签中的for属性值相同，表示相关联

示例：

<input type="radio" name="gender" id="gender1"><label for="gender1">男</label>
<input type="radio" name="gender" id="gender2"><label for="gender2">女</label>

checkboxL:复选框

<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>