HTML速成

原创已于 2025-10-22 20:01:21 修改 · 607 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2025-10-22 19:58:02 首次发布

HTML

行胜于言，想要学懂，必须动手去尝试

文章目录

HTML
- - 一、入门

一、入门

html中主要的就是元素和元素的属性<meta charset="utf-8" />中meta就是元素，charset就是属性
元素有的是单个出现，有的成对，meta是单独出现的元素，元素以/结尾，有的则是成对出现，如<head><head/>。

1.现代网页基本框架（参考宝塔官网）

<!DOCTYPE html>
<html>
	<head>
        <!--编码方式-->
		<meta charset="utf-8" />
		<!-- 浏览器兼容优化 -->
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<!-- 访问与安全策略-->
		<meta name="referrer" content="always" />
		<!-- 基本三件套 -->
		<meta name="keywords", content="网络安全，网安，渗透">
		<meta name="description", content="这是一个网络安全的博客网站">
		<title>second_web</title>
	</head>
	<body>
	</body>
</html>

UTF-8是比较流行的编码方式，兼容多国语言

这条命令告诉浏览器要用utf-8编码方式解释页面中出现的文字

国内特有写法，因为国内一些浏览器有两个内核（一个是IE，另一个是新的WebKit）

作用是让网页强制使用 “极速模式” (也就是 Chrome 内核 / WebKit)来打开。

从A访问B，会给B发送从A来的信息

2.基本元素

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>6</h6>
<br>
<hr>
<p></p>

<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
<del></del> 删除线
<font></font> 文字

3.表单

1)基本框架

<form action="", method="get" enctype="application/x-www-form-urlencoded">
	<input type="submit">
	<input type="reset">
</form>

action指定发送数据后跳转到的页面

method有两个参数，get和post

get：通过url提交数据，跳转新网页后可以上导航栏url看到输入的信息。

post：通过http请求体提交数据，不在url显示数据，相对更加安全。

enctype有三个参数，介绍比较常用的两个

application/x-www-form-urlencoded：普通表单，文字，数字一类提交

multipart/form-data：文件提交

2）标签

用处一：文字解释

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

用处二：跳转

通过for和id的配合实现点击文字跳到输入框的操作

<label for="name">姓名<input size="20", " id="name"></label>

3)标签

以下都是input标签的属性：

name：同样是表示的该文本输入框名称。

size：输入框的长度大小。

maxlength：输入框中允许输入字符的最大数。

value：输入框中的默认值

readonly：表示该框中只能显示，不能添加修改。

type：文本框的类型

type比较重要，决定input标签接受什么类型的数据

空：文本

password：密码

file：文件

hidden：隐藏（不显示）

checkbox：多选框

radio：单选框

submit：提交

reset：重置

button：按钮

		<form action="", method="get">
			<label for="name">姓名</label><input size="20", value="please input name" id="name"><!--注意这里定位是for配合id-->
			<br />
			<label>密码</label><input type="password", size="20">
			<br />
			<label>爱好</label>
			<label>足球</label><input type="checkbox" value="1" name="爱好">
			<label>篮球</label><input type="checkbox" value="2" name="爱好">
			<br />
			<label>性别</label>
			<label>man</label><input type="radio", value="1", name="sex">
			<label>woman</label><input type="radio", value="2", name="sex">
			<label>1</label><input type="button">
			<br />
			<input type="submit">
			<input type="reset">
		</form>

4. a

1）跳转外部链接

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

target有多个参数

_blank 在新窗口中打开被链接文档。

_self 默认。在相同的框架中打开被链接文档。

_parent 在父框架集中打开被链接文档。

_top 在整个窗口中打开被链接文档。

2）锚点

这里href配合name实现跳转

<a href="#2">锚点</a>
<a name="2">锚点</a>

5.img

<img src="1.jpg"， alt="郁金香"， width="100", higth="200" />

alt：图片无法正常显示时，显示文字内容

6.table

<table border="1" width="500" cellspacing="0" cellpadding="20">
	 <caption>我的标题</caption>
	 <tr>
		 <th>姓名</th>
		 <th>年龄</th>
		 <th>城市</th>
	 </tr>
	 <tr>
		 <td>张三</td>
		 <td>18</td>
		 <td rowspan="2">北京</td>
	 </tr>
	 <tr>
		 <td>李四</td>
		 <td>20</td>
	 </tr>
	 <tr>
		 <td colspan="2">合并两列</td>
		 <td>上海</td>
	 </tr>
</table>

cellspacing：单元格之间的距离

cellpadding：内容到外边框的距离，如何内容居左，只对上左下有效，其他同理

rowspan：合并行

colspan：合并列

7.列表

1）无序列表

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

2）有序列表

<ol>
  <li>洗衣服</li>
  <li>做饭</li>
  <li>睡觉</li>
</ol>

有序列表可以用type指定类型：

type="1" → 数字（默认）

type="A" → 大写字母

type="a" → 小写字母

type="I" → 大写罗马数字

type="i" → 小写罗马数字

8.frame

用于 定义一个框架集，也就是在浏览器中把页面划分成多个窗口（frame）。

每个 frame 可以显示独立的 HTML 文档。

1）frameset配合frame使用，不需要body标签（老方法）

<frameset rows="30%,50%">
	<frame src="https://www.youkuaiyun.com">
	<frame src="https://www.bilibili.com/">
</frameset>

frameset可以是rows或者cols

frame属性：
src 指定框架显示的页面
scrolling 滚动条显示方式，可以是auto/yes/no
noresize 禁止用户调整框架大小
name 框架名称，可用于链接目标

2)iframe标签，可以在body使用，在body中选择一块显示新的页面

<iframe src="https://www.bilibili.com" width="600" height="400" scrolling="yes"></iframe>

加油！！！