HTML总结
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
就是超链接要跳转的地址,targe
t是指以什么样的形式跳转到指定的页面,这里是用的_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
:背景颜色
border-collapse
:决定表格的边框是分开还是合并
列表
列表分为无序列表<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>
综上大致就是我所学的html
的一些总结,在这里感谢我的web课老师,这里附上他的个人教学网:
棋歌教学网