HTML基础

aston_c

已于 2022-06-24 23:08:24 修改

阅读量149

点赞数

分类专栏：前端文章标签：前端 html

于 2022-06-23 00:48:25 首次发布

本文链接：https://blog.csdn.net/cds7777/article/details/125418416

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的定义、用途、与CSS和JavaScript的关系。讲解了常用标签如标题、段落、图片、链接、列表、表格和表单的使用方法，并通过实例展示了各元素的效果。此外，还提到了HTML中的实体符号和表单元素的交互功能。

摘要由CSDN通过智能技术生成

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

HTML是解释型的文本标记语言，不区分大小写。

关系
HTML：决定页面上显示什么内容
CSS：页面上的内容显示的风格，即页面美观程度。
JavaScript：页面特效

常用标签

<html>
	<head>
		<title>这是标题哈哈</title>
		<meta charset="UTF-8">
	</head>
	<body>

		HELLO WORLD!<br/>
		HELLO HTML

		<p>这是一个段落</p>
		<p>这是第二个段落</p>

		<img src="imgs/girl.jpg" width="114" height="146" alt="这是一张图片" />
		
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h6>标题六</h6>

		<b>落霞</b>与<i>孤鹜</i>齐飞，<u>秋水</u>共<b><i>长天一色<i></b>
		<br/><br/>

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

	</body>
</html>

html页面中由一对标签组成：<html></html>

<html>称之为开始标签
</html>称之为结束标签
html标签中有两对标签head和body
head表示html文件的头
body表示html文件的内容

title：网页的标题

meta标签中设置编码方式

<br/>表示换行，br标签是一个单标签。
单标签： 开始标签和结束标签是同一个，斜杠放在内容后面

图片标签：
img标签是图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示

h1~h6：标题标签

<u>下划线 <b>粗体 <i>斜体

超链接：
<a>
href 表示链接的地址（Hypertext Reference 的缩写）
target 表示打开的方式
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开

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

列表、符号实体

	<body>

		<ol>
			<li>扫地僧</li>
			<li>萧远山</li>
			<li>虚竹</li>
		</ol>

		<ol type="A" start="3">
			<li>扫地僧</li>
			<li>萧远山</li>
			<li>虚竹</li>
		</ol>

		<ul>
			<li>特朗普</li>
			<li>克林顿</li>
			<li>罗斯福</li>
		</ul>

		<ul type="square">
			<li>特朗普</li>
			<li>克林顿</li>
			<li>罗斯福</li>
		</ul>

		<hr>

		水分子的化学式： H<sub>2</sub>O 
		<br/>
		N的平方：N<sup>2</sup> 
		<br/><br/>

		<span>马云</span>喜欢太极拳
		<br/>

		小于号： 5&lt;10
		<br/>
		大于等于号：10&ge;5
		<br/>
		商标： &reg;

	</body>

列表标签：

ol 有序标签
start表示从第几开始，type 显示的类型(五种)：A a I i 1
ul 无序列表

<hr> 一条水平线

sup上标 sub下标

span 不换行的块标记

HTML中的实体：小于号 < 大于等于号 ≥ 商标®
HTML 符号实体参考手册

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

表格


	<table border="1" cellspacing="0" cellpadding="4" width="600">
		<tr align="center">
			<th>名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>小计</th>
			<th>操作</th>
		</tr>
		<tr align="center">
			<td>苹果</td>
			<td>5</td>
			<td>12</td>
			<td>60</td>
			<td><img src="imgs/delete.png" width="24" height="24" /></td>
		</tr>
		<tr align="center">
			<td>菠萝</td>
			<td rowspan="2">9.5</td>
			<td>10</td>
			<td>95</td>
			<td><img src="imgs/delete.png" width="24" height="24" /></td>
		</tr>
		<tr align="center">
			<td>西瓜</td>
			<td>2</td>
			<td>19</td>
			<td><img src="imgs/delete.png" width="24" height="24" /></td>
		</tr>
		<tr align="center">
			<td>总计</td>
			<td colspan="4">174</td>
		</tr>
	</table>

表格table
行tr
列td
表头列th

table有如下属性（已淘汰仅供了解）
border：表格边框的粗细
width：表格的宽度
cellspacing：单元格间距
cellpadding：单元格填充

tr中有一个属性：align -> center , left , right

rowspan：行合并
colspan：列合并

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

表单


	<form action="demo02.html" method="post">
		昵称：<input type="" name="nickName" value="请输入昵称" /><br/>

		密码：<input type="password" name="pwd"/><br/>

		性别：<input type="radio" name="gender" value="male"/>男
			<input type="radio" name="gender" value="female" checked/>女<br/>
			<!--属性名和值一样时可以省略值，比如checked-->

		爱好：<input type="checkbox" name="hobby" value="basketball" checked />篮球
			<input type="checkbox" name="hobby" value="football" checked />足球
			<input type="checkbox" name="hobby" value="earth"/>地球<br/>

		星座：<select name="star">
			<option value="1">白羊座</option>
			<option value="2">金牛座</option>
			<option value="3" selected>天蝎座</option>
			<option value="4">双子座</option>
		</select><br/>

		备注：<textarea name="remark" rows="4" cols="50">你是一个什么样的人</textarea><br/>

		<input type="submit" value="注册">
		<input type="reset" value="重置">
		<input type="button" value="普通按钮">
	</form>