web基础课 html总结

chychychy001

已于 2022-06-22 21:48:19 修改

阅读量133

点赞数

文章标签：前端 html javascript

于 2022-06-22 21:43:52 首次发布

本文链接：https://blog.csdn.net/chychychy001/article/details/125414713

版权

html简介

html是一种超文本标记语言，可以在浏览器上执行。通常我们所访问的网站就是由html构建起来的，属于前端三剑客（HTML，CSS，JavaScript）之一

html基础语法

标记

标记又称标签，是构成html的重要元素。而标签又分为封闭标签和不封闭标签。但是注意：在使用标签的时候要用<>括起来
例如不封闭的标签：

<img><!--图片-->
<br><!---换行符-->
<hr> <!--分割线-->

封闭的标签：

<h1>这里面是可以嵌套其他标签或者文本</h1>
<p>这是段落标签</p>

标签里面是可以再嵌套其他的标签的：

<h1><a>百度一下</a></h1>
<p><span></span></p>

html文档结构

对于以下的html基本结构我们来进行剖析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
    <link>
    <script></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>：声明文档的类型为html文档
<html></html>：这个元素包裹了整个完整的页面，是一个根元素，
其它元素都嵌套到其中。
<style></style> :定义内部样式
<link> 用来引入外部样式
<script></script> 用来引入javaScript文件或者可以在里面写javaScript代码
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码
<title></title>：设置页面标题，出现在浏览器标签上
<body></body>: 页面的主体结构，显示网页中的主题内容

html常见的标签

标题和文本

标题

html提供了1~6级的标题

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

文本

<p>这是一个段落标签，一般用于文本显示</p>

超链接与图像

超链接

<a href="https://www.baidu.com">超链接能够跳转到指定的URL</a>
<a href="https://www.google.com" target="_blank">以新页面的方式跳转到谷歌网站</a>

其中href就是超链接要跳转的地址，target是指以什么样的形式跳转到指定的页面，这里是用的_blank，默认的话是_slef

超链接锚点

<p id="a1">我是p1</p>
<a href="#a1">跳到p1</a>

超链接的锚点可以在很长的网页中跳转到指定的位置，例如上述代码就可以跳转跳转到p1
上述代码中为p标签设定了一个id，那么就可以使用a标签来跳转到锚点的位置

图像

<img src="https://cn.vuejs.org/images/logo.svg" height="400px" width="300px">

我们在页面上插入了一张图片，并设置了宽和高，其中src是图片的地址，height设置图片的高，width设置图片的宽，单位是像素px

图像的路径

<img src="picture.jpg">
<img src="./images/picture.jpg">
<img src="../picture.jpg">

<img src="picture.jpg">引入的图片和当前html文件在同一个文件夹下
<img src="./images/picture.jpg">引入的图片在与当前目录下的images文件夹中
<img src="../picture.jpg">引入的图片在上一级目录中
即./代表当前目录 …/表示上一级目录而…/…/表示上上级目录…以此类推
还可以将图片做成一个超链接，需要在a标签中嵌套一个img标签就行，具体代码如下：

<a href="https://cn.vuejs.org/images/logo.svg">
	<img src="https://cn.vuejs.org/images/logo.svg" height="400px" width="300px">
</a>

表单与表格

表单

<form>
			<span>用户名：<br></span><input type="text" placeholder="用户名"><br>
			<span>密码：<br></span><input type="password" placeholder="密码"><br>
			<span>年龄：<br></span><input type="number" value="23" name="age"><br>
			<span>下拉列表：<br></span>
			<select name="list">
				<option value="op1">选择一</option>
				<option value="op2">选择二</option>
				<option value="op3">选择三</option>
			</select><br>
			<span>上传文件：<br></span>
			<input type="file" name="file"><br>
			<span>文本区域：<br></span>
			<textarea name="text"></textarea><br>
			<button type="submit">提交</button>
</form>

表单常用来收集用户的数据提交到后台，比如登录验证，信息注册等等
上述代码中form表示一个表单
input标签是代表的是一个输入框，可以指定它的类型type，其中text、password、number、file分别表示输入的是文本数据、密码、数字、上传文件

select标签表示的是一个选择列表，option就代表着一个一个选择

注意：
当提交表单的时候，表单中没有name属性的元素是不会将不会提交，有name属性的将会将它的value提交至服务器

表格

<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>居住地</th>
		</tr>
		<tr>
			<td>chy</td>
			<td>18</td>
			<td>重庆交通大学</td>
		</tr>
		<tr>
			<td>Jet</td>
			<td>18</td>
			<td>重庆市南岸区</td>
		</tr>
</table>

在表格中<tr>表示一行，<td>表示一行中的一个单元，<th>表示表头的单元，它将会默认加粗表示
同时table也有一些属性：
width:宽度
height:高度
border:设置表格边框
align:设置表格的水平对齐方式取值：left/center/right
cellpadding:设置单元格的内边距（内容与td之间的间距）
cellspacing:设置单元格的外边距（td边框外的距离）
bgcolor:背景颜色

列表

列表分为无序列表<ul>、有序列表<ol>具体如下：

<ul>
	<li>l1</li>
	<li>l2</li>
	<li>l3</li>
</ul>
<ol>
	<li>l1</li>
	<li>l2</li>
	<li>l3</li>
</ol>

无序列表<ul>中默认是实心原点，可以设置它的属性
有序列表<ol>中默认是以数字1,2,3来显示列表的

其他标签

html中的标签分为区块元素和内联元素

区块元素

<h1>区块元素</h1>
<div>
	这是一个区块盒子标签
</div>
<!--table也是一个区块元素-->
<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>居住地</th>
		</tr>
		<tr>
			<td>chy</td>
			<td>18</td>
			<td>重庆交通大学</td>
		</tr>
		<tr>
			<td>Jet</td>
			<td>18</td>
			<td>重庆市南岸区</td>
		</tr>
</table>
<p>你好啊</p>
<p>嗯，我很好</p>

区块元素就是占据新的一行，比如：<div>、<h>、<table>标签

内联元素

内联元素就是占据同一行，默认是不会换行的，但是可以加入换行符<br>、分隔符<hr>来实现新的一行显示

<a href="#">超链接</a>
<img src="#">
<input type="text" placeholder="input是内联元素">
<span>span也是内联元素</span>

html中文本的格式

html中的文本的格式是无法达到我们预设的那样，需要使用<pre></pre>标签来显示
例如：

<pre>
	这里面的文本内容将会保持预设的格式,同时可以嵌套html标签
	<h1>this is h1</h1>
	<a href="https://www.baidu.com">超链接</a>
	web基础技术需要总结的内容：
		1、html&&Css
		2、javaScript&&TypeScript
		3、使用框架完成一个项目
</pre>