html的简短了解和最常用的内容总结

最新推荐文章于 2025-03-17 17:58:34 发布

1119597068

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量246

点赞数

分类专栏： CSS+html 前端JS 文章标签： html css

本文链接：https://blog.csdn.net/qq_31687191/article/details/106170817

版权

CSS+html 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端JS

6 篇文章

订阅专栏

本文深入讲解HTML的基础知识，包括超文本标记语言的概念、常用标签及其属性，如段落、标题、列表、链接、图片、表单等元素的使用，以及表格、下拉框等复杂组件的构建方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html是什么:

HyperText Markeup Language:超文本标记语言

2.点html(.html)是什么

.html ===>浏览器打开内容的文件属性

 <!DOCTYPE html>
	<html>
	<head>
		<title></title>
	</head>
	<body>
	
	</body>
	</html>

3.标记语言

<英文单词或者字母组合>	
<body>开始
</body>结束

4.标记属性种类

<英文单词或者字母组合 style class id ...>

5.html中常用的标签

段落标记

   `<p>段落标记</p>`

标题标记

<h1>标题标记</h1>....<h6>标题标记</h6>

加粗标记

<strong>加粗标记</strong>

斜体标记

  <em>斜体标记</em>

删除标记横线

<del>$99</del>

结构化模块

<div></div>,<span></span>

有序列表

 <ol><li>ewr </li><li>wewef</li></ol>

	ol的属性：type

无序列表

 <ul><li>iou</li><li>jl</li></ul>

img

<img src="a.jpeg">

标签属性`：`src(路径)，alt(文字提示框，在图片不能正常加载的情况下显示),title(图片标题)，

a:链接跳转页面

css<a href="http://www.baidu.com">百度一下</a>

	css<a href="http://www.baidu.com">百度一下</a>将需要点击跳转的物件用a链接包裹)为了能够实现新页面的跳转需要在herf后添加target = "_blank"

		<a href="tel:18523374710">给xxx打电话</a>
		<a href="mailto:2445710568@qq.com"></a>

form表单

		<form>
			<p>
				文本：<input type="" > ===<input type="text" >
			</p>
			<p>
				密码：<input type="password" >
			</p>
			<span>
				按钮：<input type="button" value="登录">
				提交：<input type="submit" value="登录">
			</span>
		</form>

select下拉框：

		<body>
		<select>
			<option>河北</option>
			<option>北京</option>
			<option>天津</option>
			<option>四川</option>
		</select>
		<select>
			<option>贵阳</option>
			<option>铜仁</option>
			<option>遵义</option>
			<option>思南</option>
		</select>
		</body>

table表格：分为thead栏目名和tbody内容数据，各自的内部有tr和td

<table border="0.5">
			<thead>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>34</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>男</td>
					<td>22</td>
				</tr>
				<tr>
					<td>笑傲文明</td>
					<td>女</td>
					<td>34</td>
				</tr>
				<tr>
					<td>无双</td>
					<td>女</td>
					<td>14</td>
				</tr>
			</tbody>
		</table>

单标记和注释符：
1)

div style="width: 300px;height: 300px;background: pink">
		sdfdddddddddddddddddddddddddfsfsdfsdfsdfsgdfgdlkjljsldfljwersdlkfsldf
		</div>
		<div style="width: 300px;height: 300px;background: red">
		为什么这样的为什么这样的为什么这样的为什么这样的为什么这样的为什么这样的
		</div>

	问题：为什么这样的英文会出现没换行的情况而汉字却可以换行
	分析：由于字母间没有间隔符导致系自己判断为一个单词导致不会自动换行，而汉字每个字都是独立的形式出现

	&nbsp ===>空格
	单标记
		<br />===>换行
		<hr />====>分割线
	2)

<div>老张           shuijiaol </div>
		<br />
		<hr />
		<div>
			老张 




			前端
		</div>

	问题：为什么添加了空格和换行符却没有实现应有的效果
	分析：需要将空格或者换行改为 “&nbsp” 系统能够识别的空格符即可
注释：

16 注释

<!--文字注释内容-->