HTML入门

已于 2022-08-18 11:38:32 修改
阅读量181 收藏
点赞数
文章标签： html 前端
于 2022-07-09 10:23:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63930574/article/details/125664948
版权

文章目录

一、概述

HTML：Hyper Text Markup Language（超文本1标记语言2）

<标签>： 开始标签
</标签>：结束标签

B/S结构系统：
B：Browser（浏览器）
S：Server（服务器）

二、基本标签

2.1 换行符：<p></p>

如下片段，使用换行符：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--段落标记-->
			<p>“师父，有吃的了。”那长老问甚东西，行者道：“这里没人家化饭，那南山有一片红的，想必是熟透了的山桃，我去摘几个来你充饥。
			”三藏喜道：“出家人若有桃子吃，就为上分了，快去！”</p>
			<p>行者取了钵盂，纵起祥光，你看他觔斗幌幌，冷气飕飕，须臾间，奔南山摘桃不题。</p>
			<p>却说常言有云：山高必有怪，岭峻却生精。果然这山上有一个妖精，孙大圣去时，惊动那怪。
			他在云端里，踏着阴风，看见长老坐在地下，就不胜欢喜道：“造化！造化！几年家人都讲东土的唐和尚取大乘，他本是金蝉子化身，十世修行的原体。</p>
			<p>有人吃他一块肉，长寿长生。真个到了。”那妖精上前就要拿他，只见长老左右手下有两员大将护持，不敢拢身。
			他说两员大将是谁？说是八戒、沙僧。八戒、沙僧虽没甚么大本事，然八戒是天蓬元帅，沙僧是卷帘大将，他的威气尚不曾泄，故不敢拢身。
			妖精说：“等我且戏他戏，看怎么说。”</p>
	</body>
</html>

注：1.<meta charset="utf-8">告诉浏览器应该采用哪种编码方式打开该页面，这种编码方式要和文件的编码方式相同，不然会出乱码！！！
2.windows操作系统的浏览器在没有指定任何编码方式时，会默认采用GBK的编码方式打开，这是因为我们的windows操作系统时简体中文环境

效果：
在这里插入图片描述

2.2 标题字：<h1></h1>

标题字符号分为1~6六个等级，如下代码所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--标题字-->
		<h1>一级标题字</h1>
		<h2>二级标题字</h2>
		<h3>三级标题字</h3>
		<h4>四级标题字</h4>
		<h5>五级标题字</h5>
		<h6>六级标题字</h6>
	</body>
</html>

效果：
在这里插入图片描述

2.3 换行标记：<br>或<br/>

换行标记为独目标记，如下代码所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--换行标记-->
		hello <br />world
	</body>
</html>

效果：

在这里插入图片描述

2.4 水平线：<hr>或<hr/>

水平线也为独目标记，如下代码所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--水平线-->
		hello world
		<hr />
		hello world
		<hr/>
	</body>
</html>

效果：

在这里插入图片描述

还可以给水平线指定颜色，如下所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--水平线-->
		hello world
		<hr color="red">
		hello world
		<hr / color="grenn">
	</body>
</html>

效果：

在这里插入图片描述

2.5 预留格式：<pre></pre>

保留格式，在HTML源码什么格式，到网页还是这个格式，如下代码所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--预留格式-->
		<pre>
			for(int i; i < 100; i++){
				System.out.println("i = " + i);
			}
		</pre>
	</body>
</html>

效果：
在这里插入图片描述

2.6 粗体字：<b></b>

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--粗体字-->
		<b>粗体字</b>
	</body>
</html>

效果：

在这里插入图片描述

2.7 斜体字：<i></i>

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--斜体字-->
		<i>斜体字</i>
	</body>
</html>

效果：
在这里插入图片描述

2.8 插入字：<ins></ins>

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--插入字-->
		<ins>插入字</ins>
	</body>
</html>

效果：
在这里插入图片描述

2.9 删除字

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--删除字-->
		<del>删除字</del>
	</body>
</html>

效果：
在这里插入图片描述

2.10 右上角标：<sup></sup>

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--右上角标-->
		10<sup>2</sup>
	</body>
</html>

效果：
在这里插入图片描述

2.11 右下角标：<sub></sub>

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--右下角标-->
		H<sub>2</sub>O
	</body>
</html>

效果：
在这里插入图片描述

2.12 font字体标签：<font></font>

color指定字体颜色，size指定字体尺寸

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--font字体标签-->
		<font color="red", size="12">hello world</font>
	</body>
</html>

效果：
在这里插入图片描述

2.13 锚点链接

当我们点击链接，快速定位到页面的某个位置

代码：

    <a href="#career">职业生涯</a>
    <h2 id="career">XXX的职业生涯</h2>

点击 “职业生涯” 会跳转到 “XXX的职业生涯” 位置

三、实体符号

3.1 空格：&nbsp;

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>实体符号</title>
	</head>
	<body>
		<!--空格-->
		a &nbsp;&nbsp; b &nbsp;&nbsp; c &nbsp;&nbsp; d
	</body>
</html>

效果：
在这里插入图片描述

3.2 小于号：b&lt，大于号：a&gt

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>实体符号</title>
	</head>
	<body>
		<!--大于号，小于号-->
		b&lt;a&gt;c
	</body>
</html>

效果：
在这里插入图片描述

四、表格

4.1 基础语法

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table>
			<tr>
				<td>表格第一行第一列</td>
				<td>表格第一行第二列</td>
				<td>表格第一行第三列</td>
			</tr>
			<tr>
				<td>表格第二行第一列</td>
				<td>表格第二行第二列</td>
				<td>表格第二行第三列</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

4.2 边框线：border关键字

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table border="1px">
			<tr>
				<td>表格第一行第一列</td>
				<td>表格第一行第二列</td>
				<td>表格第一行第三列</td>
			</tr>
			<tr>
				<td>表格第二行第一列</td>
				<td>表格第二行第二列</td>
				<td>表格第二行第三列</td>
			</tr>
		</table>
	</body>
</html>

注：1px代表一像素
效果：
在这里插入图片描述

4.3 宽度与高度：width和height

代码1：

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table  border="1px", width="500px", height="500px">
			<tr>
				<td>表格第一行第一列</td>
				<td>表格第一行第二列</td>
				<td>表格第一行第三列</td>
			</tr>
			<tr>
				<td>表格第二行第一列</td>
				<td>表格第二行第二列</td>
				<td>表格第二行第三列</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述
宽度和高度传入的值除了是像素外，还可以传百分比，表示占显示框百分之几
代码2：

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table  border="1px", width="50%", height="50%">
			<tr>
				<td>表格第一行第一列</td>
				<td>表格第一行第二列</td>
				<td>表格第一行第三列</td>
			</tr>
			<tr>
				<td>表格第二行第一列</td>
				<td>表格第二行第二列</td>
				<td>表格第二行第三列</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

4.4 布局：align

align使用在<table></table>中，表示整张表的布局：

代码

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table  border="1px", width="500px", height="500px", align="center">
			<tr>
				<td>表格第一行第一列</td>
				<td>表格第一行第二列</td>
				<td>表格第一行第三列</td>
			</tr>
			<tr>
				<td>表格第二行第一列</td>
				<td>表格第二行第二列</td>
				<td>表格第二行第三列</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

align使用在<tr></tr>中，表示一行数据的布局：

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table  border="1px", width="500px", height="500px", align="center">
			<tr align="center">
				<td>(1, 1)</td>
				<td>(1, 2)</td>
				<td>(1, 3)</td>
			</tr>
			<tr>
				<td>(2, 1)</td>
				<td>(2, 2)</td>
				<td>(2, 3)</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

align使用在<td></td>中，表示具体某一个数据的布局：

代码：

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--表格基础语法-->
		<table  border="1px", width="500px", height="500px", align="center">
			<tr align="center">
				<td>(1, 1)</td>
				<td>(1, 2)</td>
				<td>(1, 3)</td>
			</tr>
			<tr>
				<td>(2, 1)</td>
				<td>(2, 2)</td>
				<td align="right">(2, 3)</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

4.5 单元格合并：colspan和rowspan

colspan表示列合并，rowspan表示行合并

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!-- 表格合并 -->
		<table border="1px", width = 50%>
			<tr>
				<td rowspan="2">a</td>
				<td colspan="2">b</td>
			</tr>
			<tr>
				<td>e</td>
				<td>f</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

4.6 th标签：<th></th>

<th></th>相当于<td></td>，但是里面的内容自动加粗并居中

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--<th>标签-->
		<table border="1px", width = 50%>
			<tr>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工薪资</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Jams</td>
				<td>1000</td>
			</tr>
			<tr>
				<td>2</td>
				<td>JOJO</td>
				<td>1000000</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

4.7 thead, tbody, tfoot标签

将整个表格分为thead, tbody, tfoot三个部分，有利于后期JavaScript操作

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!--thead, tbody, tfoot标签-->
		<table border="1px", width = 50%>
			<thead>	<tr>
					<th>员工编号</th>
					<th>员工姓名</th>
					<th>员工薪资</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Jams</td>
					<td>1000</td>
				</tr>
				<tr>
					<td>2</td>
					<td>JOJO</td>
					<td>1000000</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>x</td>
					<td>y</td>
					<td>z</td>
				</tr>
			</tfoot>>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

五、背景颜色和背景图片：bgcolor和background

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
	</head>
	<body bgcolor="green">
		<!--背景颜色-->
		
	</body>
</html>

效果：
在这里插入图片描述

将背景图片导入到目录中：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
	</head>
	<body background="images/阿尼亚.jpg">
		<!--背景图片-->
	</body>
</html>

效果：
在这里插入图片描述

六、图片

6.1 设置图片：<img></img>

与背景图片不同，该图片是网页的元素
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body bgcolor="green">
		<img src="images/百度logo.jpg""/>
	</body>
</html>

效果：
在这里插入图片描述

6.2 图片大小：width关键字

指定图片的宽度，高度会等比缩放，不要指定图片的高度

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body bgcolor="green">
		<img src="images/百度logo.jpg", width="1000px"/>
	</body>
</html>

效果：
在这里插入图片描述

6.3 提示信息：title和alt

title设置鼠标悬停时的提示信息

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body bgcolor="green">
		<img src="images/百度logo.jpg", width="1000px", title="点击查看大图"/>
	</body>
</html>

效果：
在这里插入图片描述

alt用来设置当图片加载失败的时候的提示信息

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body bgcolor="green">
		<img src="images/百度logo.jpg", width="200px", title="点击查看大图"/>
		<img src="i" alt="图片加载失败">
	</body>
</html>

效果：
在这里插入图片描述

七、超链接

<a></a>标签中有一个属性，href属性，热链接，用来指定链接的路径

7.1 文本做超链接

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

效果：
在这里插入图片描述
点击即可传送到百度。

7.2 图片做超链接

标签嵌套使用

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="http://www.baidu.com"><img src="images/百度logo.jpg"></a>
	</body>
</html>

在这里插入图片描述

7.3 超链接的target属性

target有4个值：
_blank：点击超链接，打开一个新的窗口
_self：点击超链接，在当前窗口打开
_parent：点击超链接，在当前窗口的父窗口打开
_top：点击超链接，在当前窗口的顶级窗口打开

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="http://www.baidu.com", target="_self"><img src="images/百度logo.jpg"></a>
		<a href="https://www.bilibili.com/", target="_blank">b站</a>
	</body>
</html>

八、列表

8.1 无序列表：<ul></ul>

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>江苏
						<ul>
							<li>苏州
								<ul>
									<li>相城区</li>
								</ul>
							</li>
							<li>扬州</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>日本</li>
			<li>韩国</li>
		</ul>
	</body>
</html>

效果：
在这里插入图片描述
注：<ul></ul>有关键字type，可以指定文字前面的标题样式

8.2 有序列表：<ol></ol>

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol>
			<li>动物
				<ol>
					<li>狗
						<ol>
							<li>金毛</li>
							<li>拉布拉多</li>
							<li>萨摩耶</li>
						</ol>
					</li>
				<li>猫</li> 
					<li>鸟</li>
				</ol>
			</li>
			<li>植物</li>
			<li>人类</li>
		</ol>
	</body>
</html>

效果：
在这里插入图片描述
注：<ol></ol>也有关键字type，可以指定文字前面的标题样式

九、表单：<form></form>

表单的作用： 发送请求，并且携带数据给服务器。（收集用户信息）

9.1 表单的基础语法

<form></form>标签中有一个action属性，这个属性和超链的herf相同

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com">
			<input type="submit" value="百度">
		</form>
	</body>
</html>

效果：
在这里插入图片描述
点击该按钮就可以跳转到百度页面。

注：1.<input>的type属性必须是submit才能发送请求。
2.<input>的value属性是指定按钮显示的内容。

9.2 用户登陆的简单实现

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://192.168.145.2:8080/crm/login">
			<hr>
			用户名：<input type="text" name="x">
			<br>
			密码：<input type="password" name="y">
			<br>
			<input type="submit" value="登录">
			<hr>
		</form>
	</body>
</html>

http://192.168.145.2:8080/crm/login：
协议：http协议
访问服务器的IP地址：192.168.145.2
访问该服务器的哪个软件：8080端口对应的服务
/com/login：是该服务器上的某个资源名

注：表单最终提交时，<input>的name属性至关重要，有name的才会提交，没有name是不会提交的，并且向浏览器提交的数据格式是
url?name1=value1&name2=value2&name3=value3，value是输入的或者指定的，该提交格式是W3C指定的格式，所有浏览器都是这样。这样的意义：后台的Java程序接收到这个信息后，会按照这个格式去拆分字符串，拆分之后存储到数据库中。

效果：
在这里插入图片描述

输入任意用户名和密码后：
在这里插入图片描述

9.3 用户注册的实现

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
	</head>
	<body>
		<form action="http://localhost:80/crm/register">
			<hr>
			用户名：<input type="text" name="username">
			<br>
			密码：<input type="password" name="password">
			<br>
			性别：<input type="radio" name="sex" checked> 男
				<input type="radio" name="sex"> 女
			<br>
			兴趣：
			<input type="checkbox" name="hobby" checked>打篮球
			<input type="checkbox" name="hobby">打游戏
			<input type="checkbox" name="hobby">健身
			<input type="checkbox" name="hobby">摄影
			<br>
			学历：
			<select name="quali">
				<option value="xx" selected>小学</option>
				<option value="cz">初中</option>
				<option value="gz">高中</option>
				<option value="zk">专科</option>
				<option value="bk">本科</option>
				<option value="ss">硕士</option>
			</select>
			<br>
			<textarea name="jj" id="" cols="30" rows="10"></textarea>
			<br>
			<input type="submit" value="注册">
			<hr>
		</form>
	</body>
</html>
  1. 性别采用了单选框，type属性为radio。同一组单选框的name属性一定要一样，否则就达不到单选的目的。选择某个选项为默认选项使用checked关键字；
  2. 兴趣采用了复选框，type属性为checkbox。选择某个选项为默认选项使用checked关键字；
  3. 学历采用了下拉框，<select> <option></option> </select>，选择某个选项为默认选项使用selected关键字；
  4. 简历采用文本域，<textarea></textarea>

效果：
在这里插入图片描述

输入相应内容后：
在这里插入图片描述

9.4 下拉列表

size属性可设置下拉列表一次最多显示的条数，multiple属性表示下拉支持多选

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表</title>
	</head>
	<body>
		<select name="province" size="3" multiple>
			<option value="jiangsu">江苏</option>
			<option value="henan">河南</option>
			<option value="hebei">河北</option>
			<option value="sichuan">四川</option>
			<option value="fujian">福建</option>
			<option value="anhui">安徽</option>
		</select>
	</body>
</html>

效果：
在这里插入图片描述

9.5 file控件

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		文件：<input type="file">
	</body>
</html>

后台Java程序通过IO流的方式接收这个文件

效果：
在这里插入图片描述

9.6 隐藏域控件 hidden

不希望用户在浏览器上看到，但是希望这个数据可以提交

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hidden控件</title>
	</head>
	<body>
		<form action="http:127.0.0.1:8080/crm/save">
			<input type="hidden" name="usercode" value="11111">
			<input type="submit" value="提交">
		</form>
	</body>
</html>

效果：
在这里插入图片描述

点击提交后的结果：

在这里插入图片描述

9.7 readeonly和disabled控件

readonly和disabled都是只读不可修改。但是readonly修饰的可以提交给服务器，disabled不行。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly和disabled控件</title>
	</head>
	<body>
		<form action="http://www.baidu.com">
			<input type="text" name="orgcode" value="11111" readonly>
			<br>
			<input type="text" name="usercode" value="22222" disabled>
			<br>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

效果：
在这里插入图片描述

点击提交以后：
在这里插入图片描述

9.8 maxlength属性

限定输入的字符长度

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>maxlength属性</title>
	</head>
	<body>
		<input type="text" name="ceshi" maxlength="4">
	</body>
</html>

效果：
在这里插入图片描述

9.9 <label></label>标签

使用场景：在选择单选框时，由于单选框过小很难选中，这时需要设置点击对应内容也能选中单选框，增加用户体验

代码：

性别：
	<input type="radio" name="sex" id="nan">
	<label for="nan">男</label>
	<input type="radio" name="sex" id="nv">
	<label for="nv">女</label>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0n7NyZic-1660793887740)(C:\Users\d_hf\AppData\Roaming\Typora\typora-user-images\image-20220818104029978.png)]

十、id属性

  1. 在HTML中任何一个节点上，都有id属性
  2. 在同一网页上，id属性是不能重复的
  3. id代表这个节点，，id是这个节点的身份证号
  4. 后期学习了JavaScript后，我们要通过JavaScript对HTML的节点进行增删改，对节点增删改的时候，需要先获取到该节点的对象，id属性可以让我们方便的获取到该节点的对象
  5. JavaScript通过id属性获取到节点对象，对节点进行操作可以使网页产生动态效果

代码：

<!DOCTYPE html>
<html id="myhtml">
	<head id="myhead">
		<meta charset="utf-8" id=mymeta"">
		<title id="mytitle">id属性</title>
	</head>
	<body id="mybody"">
		<form action="" id="myform">
			<ul id="myul">
				<li id="myid"></li>
			</ul>
		</form>
	</body>
</html>

在这里插入图片描述

以上被称为html文档（doucument），或者简称为DOM树

十一、div和span图层

  1. 每一个图层在网页当中都是一个独立的盒子，图层最主要的作用就是网页布局。
  2. table表格也可用来布局，但是格式过于死板，不灵活，div和span布局更加灵活
  3. 每一个div和span左上角的顶点，都有x轴和y轴，通过这个坐标可以定位div在网页中的位置。
  4. div和span的区别：div默认情况下独自占用一行，span不会独占行
  5. div可以嵌套

  1. 超级文本，例如流媒体、声音、视频、图片等 ↩︎

  2. 由大量标签组成，任何一个标签都有开始标签和结束标签 ↩︎

小丁不会编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
HTML5 考试题（一）
HAI6545的博客
12-18 1万+
一、单选题（共30题，每题2分） 1.下面关于外部样式表的说法错误的是 A文件扩展名为 .cs B外部样式表内容不需要使用<style>标签 C使用<link>标签引入外部样式 D使用外部样式表可以使网站更加简洁，风格保持统一 正确答案: A 解析:文件扩展名为 .css 2.下列在HTML文档中插入样式表的方式，优先级最高的是 A外部样式表 B内部样式表 C层叠样式表 D内联样式表 正确答案: D 解析:样式表的优先级： 内联样式表的优先级别最高 内
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html入门练习
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
菜鸟教程：零基础HTML入门
weixin_52163352的博客
11-08 2万+
HTML入门 文章目录一、HTML是什么？二、入门实例1.新建html文档2.html常用标签三、属性总结 一、HTML是什么？ HTML全称：Hyper Text Markup Language 中文名：超文本标记语言 HTML是由W3C组织定义的语言标准，是用于描述页面机构的语言。 二、入门实例 1.新建html文档 如图： 每一个html文件开头必须是这个标签，作用是告诉浏览器此文档为html文档。 ：根元素在所有的html文件中这个元素级别最高 网页编码格式，一般为UTF-8 中间内容就是这个h
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
前端学习之HTML入门
肥叔菌的博客
03-30 8772
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
学习html入门
12-24
简单的HTML入门，超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1215
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 481
超文本标记语言（HTML）简介
DAY02 HTML
最新发布
adminstate的博客
06-15 768
HTML基础学习
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 706
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
html入门基础知识
10-08
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签被用来定义和呈现网页的内容和结构。HTML中的基本概念包括标签、元素、属性和文本内容。 标签是用尖括号括起来的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值