入门html这篇文章就够了
HTML笔记
文章目录
- HTML笔记
-
- html介绍
-
- 什么是html
- html的作用
- HTML标签介绍
-
- 常用标签
-
- 标签and标签
- and 标签
- u标签
- del删除线
- br 标签用于换行
- pre标签，预处理标签
- span标签
- div标签
- sub标签 and sup标签
- hr标签
- h1,h2...h6标签：
- HTML5中的语义标签：
- 特殊字符
- img标签
- a标签
-
- 第一种用法：超链接
- 第二种用法：锚点
- video标签
- 表格标签：
- form标签
- input标签
- select
- textarea标签
- textarea标签
前端可以用的工具：
vscode,webstorn
前端包含的语言：
html,css,javascript,vue,react,node.js等都是前端相关的语言
html介绍
什么是html
html是超文本标记语言，支持超链接，图片，视频，音乐等元素。然后用不同的标签来对这些元素进行标记。
html是一种树型结构的文本。主要包括两个部分：头部和主题
头部中主要有标记，引入样式，设置文本编码，搜索优的关键字，以及搜索优化的描述等信息
主题就是我们可以看到的所有内容，都在这个部分
html的作用
html是呈现数据的基础
编写页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML页面</title>
</head>
<body>
^_^大家上午好，第一次和大家见面，很开心！希望接下来的这几天和大家相处愉快！！
</body>
</html>
页面元素的解析：
1.,这个标签的作用是告诉浏览器这是一个html格式的文档，告诉有什么用嘞？告诉后浏览器就知道要用html的语法去解析啦，同时也是告诉浏览器的解析根节点为html
2.就是文档的根节点，它需要有一个关闭的节点就是
3. 这个标签指定浏览器用什么编码来解析这个文件，编码格式主要有如下几种：
-gbk，港台一般在用
-utf-8，国际通用
-utf-16，它是在utf-8放不下的时候就会采用这个格式
4.,用于指定文档的标题，会显示在浏览器的标签卡上面
5.,用于指定文档的头部的信息
6.,用于指定文档的主题部分
HTML标签介绍
常用标签
标签and标签
<body>
2024年8月15日
<b>HTMLb>
<strong>页面strong>
body>
一般推荐使用strong标签
and 标签
i标签和em标签可以让字体变成斜体
<body>
<i>啦啦啦啦i>
<b>HTMLb>
<strong>页面strong>
<em>标记em>
body>
u标签
它的使用可以让文字加上下划线
<body>
<u>this is my htmlu>
bode>
del删除线
用上del标签会给文字加上删除线
<body>
<del>html标签通常是成对出现的del>
body>
br 标签用于换行
<body>
<i>lalali>
<br>
<strong>xixistrong>
body>
p 标签
这个标签本来就是一个段落标签，本身自带了距离，这个标签在文件中会独占一行
<body>
<p>我独占一行啦p>
body>
pre标签，预处理标签
这个标签的作用是书写的内容和显示的内容一样,因此这个标签一般用于源码的显示
<body>
<pre>
静夜思
cl
床前明月光，
疑是地上霜。
......
pre>
body>
span标签
这个是一个行内标签，没有什么特殊的意义，但是在使用的过程中却比较多，一般来说会结合css样式来修饰文本，接下来简单举个例子
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签title>
<style>
span {
color: red;
}
style>
head>
<body>
<span>this is my span tagsspan>
body>
html>
div标签
这个是一个块状标签，一般用于页面的布局
<body>
<div class="div2">
div是一个块状的标签，
一个div也会独占一行
div>
<div id="div1">
div标签没有任意的属性，
但是我们可以给这个标签自定义属性
比如这里用到的id，class等
div>
body>
sub标签 and sup标签
sub标签的作用是指定下标，而sup标签的作用是指定上标，一般都用于数字方面的解析
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sub and suptitle>
head>
<body>
log<sub>2sub>
<br>
x<sup>2sup>
body>
html>
hr标签
这个标签用于给页面划水平线
<body>
静夜思
<hr size="5" width="100" align="left">
cl
窗前明月光，
......
body>
标签属性说明：
-
- size 指定线的粗细 - width指定线的宽度 - align对齐方式，有以下三种 - left - center - right
h1,h2…h6标签：
这个标签一般用于标题
<body>
<h1>this is h1 tagh1>
<h2>this is h2 tagh2>
<h3>this is h3 tagh3>...
body>
HTML5中的语义标签：
在html5中定义的新的语义标签有以下几个
-
header:用于的定义页面的顶部
-
article:用于表示文章的内容
-
section：用于定义内容的分块信息
-
nav：用于定义页面的导航部分
-
aside：用于定义页面的侧边栏
-
footer：用于定义页面的页脚部分
-
address：用于定义用户邮件，地址等信息
<body> <header>这是新闻的头部header> <nav>首页 | 新闻 | 游戏nav> <aside>侧边栏aside> <footer>@1350;2024这是页脚footer> body>特殊字符
在html中有很多特殊的字符，如下表所示,因为在md中，这些特殊字符之间就变成了对应的东西，于是我特意在字符和分号之间加了一个空格，以防他们之间变回去。
特殊字符 转移码 空格 ; < < ; > > 版权 © ; img标签
这个标签的作用是在页面中引入图片
<body> <img src="地址" width="200" height="50" border="1" alt="这是图片" title="这是图片的标题"> body>标签属性说明：
- src后面要图片的地址，可以是绝对路径也可以是相对路径
- border：这个是指定图片边框的粗细，默认没有边框
- alt：当图片不能正常显示的时候，才会显示这里的内容
- title：当鼠标移动上去的时候会显示提示信息，一般用于搜索引擎优化
a标签
这个标签是用于作链接的标签
第一种用法：超链接
<body> <a href="https://www.baidu.com">这个是百度的链接a><br> <a href="https://www.baidu.com" target="_blank">打开百度a> body>a标签的属性说明
-
herf：这是一个必须的标签，用于打开目标的地址
-
target：这个是连接的打开方式
-
_blank:在新窗口中打开
-
_sele:在本窗口打开，这个是默认的
-
_top:在父窗口打开，一般用于frame框架
-
_parent：同_top一样
-
第二种用法：锚点
<body> <a href="#bottom">可以到底部a> <a name="bottom">a> body>
audio 标签
这个标签是用于播放音乐的标签
<body>
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls="controls" autoplay="autoplay">audio>
<audio controls>
<source src="https://www.runoob.com/try/demo_source/horse.mp3">
audio>
body>
标签属性说明：
- controls：用于对播放器进行控制的，就是显示播放器的控制按钮
- src：用于指定播放音频文件的路径
- autoplay：指定是否自动播放
- loop：指定是否循环播放
video标签
<body>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay width="200">video>
<video controls>
<source src="https://www.runoob.com/try/demo_source/movie.mp4">
video>
body>
video标签的属性说明：
- src：视频的地址可以是相对也可以是绝对路径目前只支持mp4，ogg这两种格式
表格标签：
在我们进行数据展示的时候，很多时候都会用到表格，在后台进行数据管理时或者显示列表数据时，就会用到表格。
在使用表格，就需要用到table标签。表格嘞是由行和列组成，而行的标签是tr，列的标签的td或者th
<body>
<table width="100" border="1" cellspqcing="0" cellpadding="0">
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>4td>
<td>5td>
<td>6td>
tr>
table>
body>
表格属性说明：
table：用于绘制表格
tr：用于绘制表格的行
td：用于绘制表格的列（单元格）
width：指定表格的宽度，也可以是 td 的属性
border：指定表格的边框粗细
cellspacing：指定单元格之间的间距
cellpadding：指定单元格边框与单元格中内容的距离
align：用于指定表格对齐方式：
- left：左对齐，默认值
- center：居中对齐
- right：右对齐
align属性可以是 table，也可以是 tr，还可以是 td。如果是 table 的，表示对整个表格有效；如果是 tr 的，表示对当前行有效；如果是 td 的表示只对当前的单元格有效。
表格标签的内容还有很多，但是不是很重要就先跳过！
form标签
这个标签是用于表单提交的标签，一般是在于用户交互的时候就会用到form标签
<body>
<form name="form1" action="demo1.html" method="post">
<input type="submit" value="提交">
form>
body>
form标签的属性说明
- name：给这个表单取一个唯一的名称，以遍后续js来操作这个表单
- action：是表单提交的地址，也就是页面会跳转的那个地方
- method：是表单提交的方式，有以下两个值：
- get 和 post
补充：get和post提交的区别：get提交的诗句会以参数的形式在浏览器的地址中体现，而post提交的数据是在请求头中。get提交的数据大小不能超过4k，但是post理论上没有大小限制
input标签
这个是表单元素中非常重要的一组标称，他有很多类型如下：
- text：提交文本字符串
- password：用于提交密码
- image：图片按钮
- file：文件上传
- button：普通按钮
- reset：重置按钮
- radio：单选按钮
- checkbox：多选按钮
<body>
<form action="" method="post">
<input type="text" name="name" placeholder="姓名" value="张三"><br>
<input type="password" name="password" placeholder="密码"><br>
<input type="number" name="age" value="18" placeholder="年龄"><br>
<input type="email" name="email" placeholder="邮箱"><br>
<input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" checked value="女"> 女 <br>
<input type="checkbox" name="love" value="看书" checked> 看书 <input type="checkbox" name="love" checked value="电影"> 电影 <input type="checkbox" name="love" value="游戏"> 游戏<br>
<input type="file" name="file"><br>
<input type="button" name="btn" value="普通按钮"> <br>
<input type="reset" name="reset" value="重置"><br>
<input type="submit" name="submit" value="提交"><br>
<input type="image" src="image/8.jpeg" width="50">
form>
body>
select
select是下拉列表标签
<body>
<form action="" method="post">
<select name="city">
<option>---请选择---option>
<option value="西安">西安option>
<option selected value="北京">北京option>
<option value="上海">上海<option>
select>
<hr>
<select name="hobby" size="3" multiple>
<option value="看书">看书option>
<option value="电影">电影option>
<option value="音乐">音乐option>
<option value="游戏">游戏option>
select>
form>
body>
标签属性说明：
- name：表单提交的时候要获取对应元素值是所需要的属性
- value：指定select中每一个子元素的值
- size：指定select可以看到的元素个数，默认是1
- multiple：表示可以多选
textarea标签
这个标签是用于输入大文本内容的标签
<body>
<form action="" method="post">
<testarea name="content" cols="50" rows="5">这里是内容testarea>
form>
body>
标签属性说明：
- name：用于获取元素值的属性
- cols：用于指定文本框的宽度
书">看书
电影
音乐
游戏
标签属性说明：
- name：表单提交的时候要获取对应元素值是所需要的属性
- value：指定select中每一个子元素的值
- size：指定select可以看到的元素个数，默认是1
- multiple：表示可以多选
textarea标签
这个标签是用于输入大文本内容的标签
<body>
<form action="" method="post">
<testarea name="content" cols="50" rows="5">这里是内容testarea>
form>
body>
标签属性说明：
- name：用于获取元素值的属性
- cols：用于指定文本框的宽度
- rows：用于指定文本框的高度