HTML入门
HTML入门
HTML简介
ps：以下内容全部为个人理解，可能有些地方描述不够准确,因为面向新人,所以推荐的阅读方式是顺读,里面都是新人练习的使用场景,可以直接跟着练,下面涉及到自行查找的标签,及属性值可以在这里查找:点我
简单介绍一下web前端,前端是构建网页的一部分,负责用户在浏览器中看到和与之交互的内容,网页是在浏览器中呈现内容的文档或页面,通常网页是使用html,css,以及javascript(简称js)组成
html定义了页面的结构和内容,包括文本,图像,链接等等
css用于定义页面的样式或布局,比如按键,页面的颜色
js用于添加交互性和动态功能作用
HTML的作用：为网页提供结构
ps：就是通过标签来告诉浏览器哪些是标题，哪些是段落，哪些是列表
标签可以通过属性来提供更多的信息，一般是成对出现的
单标签和双标签:单标签一般用于没有内容的元素，双标签用于有内容的元素
HTML文件结构：
<!-- 这里放置文档的元信息 --> //该行代表注释
<!DOCTYPE html> //告诉浏览器这是一个html文件
<html> //html标签对，是HTML文档的根元素，也就是文档的起始点
<head>
<title>文档标题</title>
</head>
<body> //body标签对，就是实际在浏览器中页面的内容
<!-- 这里放置内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
配置VSCode环境：
1.官网下载VSCode https://code.visualstudio.com/
2.安装如下插件，具体作用可以自行百度
安装配置环境完成
常用文本标签
文本标签
<body>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h6>六级标题标签</h6>
</body>
如图所示
段落标签
<body>
<p>这是段落标签</p>
</body>
标签可以嵌套使用
<body>
<p>
更改文本样式：<b>字体加粗</b>，<i>斜体</i>，<u>下划线</u>，<s>删除线</s>
</p>
</body>
ps:当然也可以通过css改变字体的大小
列表标签
<body>
<ul> //无序列表
<li>无序列表元素1</li> //包含了几个无序列表元素
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
<ol> //有序列表
<li>有序列表元素1</li> //包含了几个有序列表元素
<li>有序列表元素2</li>
<li>有序列表元素3</li>
</ol>
</body>
表格标签
<body>
<table> //表格中，即有行，又有列
<tr> //table row(表格行的意思)
<th>列标题1</th> //table header列标题
</tr>
<tr>
<td>元素1</td> //table data(表格列的意思)
<td>元素2</td>
<td>元素3</td>
</tr>
</table>
</body>
<table border="1"> //border是talbe标签的一个属性，表示表格边框的宽度 可以自行尝试
</table>
HTML属性
属性可以定义元素的行为和外观，以及与其他元素的关系,非常重要
基本语法
<开始标签 属性名="属性值">
属性名称不区分大小写，属性值对大小写敏感
<img src="example.jpg" alt="0">
<img SRC="example.jpg" alt="0">
<img src="EXAMPLE.JPG" alt="0">
<!-- 前两者相同，第三个与前两个不一样 -->
有些属性是某个标签特有的，有些属性是大部分标签都可以使用的
下面是大部分标签都可以使用的
| 属性 | 描述 |
|---|---|
| class | 为HTML元素定义一个或多个类名(类名从样式文件写入) |
| id | 定义元素唯一的id |
| style | 规定元素的行内样式 |
例如：
<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class=nav-bar></h2>
因为目前还没学css，暂时还用不到他们，学完css后，这些属性很常用
a标签(超链接)
a标签常用于创建链接，到其他的网页或位置，创建时默认有一个href属性，这个属性，是定义我们链接的目标，可以是其他网页的URL，文件的路径，电子邮箱地址，手机号等等
<a href="https://baidu.com">百度搜索</a>
除了href属性之外，a标签还有一个属性是target，有四个选项
_blank , _parent , _self , _top
可以把鼠标放到target上，会展示属性值的介绍
(这里说的窗口包括标签页的含义)比如 _self 是一个默认值,表示链接在当前窗口打开,_blank表示链接会在新的窗口打开,_parent 表示链接会在父窗口打开,_top表示会在顶层窗口打开
我们发现之前的文本标签展示的内容,都是在浏览器中独占一行
而这两个a标签却排在了同一行,
这个涉及到了行内元素和块元素,之后会有介绍
如果想让两个a标签出现在不同行的话,就可以使用换行标签
换行标签(br)
<a href="https://baidu.com">百度搜索</a>
<br>
<a href="https://baidu.com" target="_blank">百度搜索</a>
也可以使用<hr>创建一条水平分割线,把他分割
图片标签
<img src="" alt="">
src属性定义了路径,比如我输入网上找的柯尼塞格的图片路径,当然也可以是本地的路径,alt属性用于定义图片的替代文本,意思就是如果我们的图片,因为网络等原因无法加载的话,浏览器中就会展示相应的文本
当然img也是行内元素,都不是独占一行的
我们也可以设置图像的宽度和高度
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.CIWleOesQ9SVi7XQ9BN_4QHaE8?rs=1&pid=ImgDetMain" alt="" width="200" height="150">
块元素与行内元素
之前也讲了,有些元素是独占一行的(其他元素无法与该元素在同一行),称其为块元素
如
<p>,<h1>,<table>等等
有些元素可以和其他元素位于同一行,称其为行内元素,比如上节课学的<a>,<img>标签,注意我们说的独占一行是在浏览器中独占一行,而不是在vscode中的代码文件中独占一行
块元素
块级元素通常用于组织和布局页面的主要内容,例如段落,标题,列表,表格等,他们用于创建页面的主要部分,将内容分割成逻辑块
- 块级元素通常会从新行开始,并占据整行的宽度,因此他们会在页面上呈现为一块独立的内容快
- 可以包含其他的块级元素和行内元素
- 常见的块级元素包括
<div>,<p>,<h1>到<h6>,<ul>,<ol>,<li>,<table>,<form>等
行内元素
行内元素通常用于添加文本样式或为文本中的应用样式.他们可以在文本中插入小的元素,例如超链接,强调文本等.
- 行内元素通常在同一行内呈现,不会独占一行
- 他们只占据其内容所需宽度,而不是整行宽度
- 行内元素不能包含块级元素,但可以包含其他行内元素
- 常见的行内元素包括
<span>,<a>,<strong>,<em>,<imf>,<br>,<input>等.
我们来讲一下html中最常用的两个标签,<div>和<span>
div标签
div标签是一个块级标签,通常用于创建一个可以包含其他元素的容器块,他通常没有任何语义,仅用于组织内容,所以经常用于创建页面的布局结构
可以用
<div>标签来创建页面的不同部分,比如页眉,导航栏,侧边栏,中间的内容区域,以及页脚,这里给个抽象图(指我画的抽象)来方便大家理解
举个例子
<body>
<!-- 用带有nav类的div标签,包裹a标签 --> //表示导航栏
<div class="nav">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
<a href="#">链接 4</a>
<a href="#">链接 5</a>
</div>
<div class="content"> //表示内容
<h1>文章标题</h1>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
</div>
</body>
span标签
相当于没有特殊元素的a标签或者img标签,主要作用就是把一小部分文本包装起来,便于对他们使用样式,css或者是使用js行为,因为他是行内元素,也不会独占一行,只会占据他内容所需的宽度
<span>这是第一个span标签</span>
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
<span>这是第四个span标签</span>
<hr>
<span>链接点击这里<a href="#">链接</a></span>
总结一下
-
div标签通常用于创建块级容器,以便于组织页面的结构和布局
-
span标签通常用于内联样式化文本,给文本的一部分应用样式或标记
-
这两个标签通常与css和js一起使用
HTML表单
表单的应用非常丰富,
form标签
form标签是表单的容器,他有很多的属性(先不学哈),目前可以理解为,创建一个表单,和创建一个表格差不多,如果你想创建表单,你需要把表单中的所有元素,包含在form标签内部,
form标签最常用的标签就是input(input标签有几十个属性,常用的只有几个,最重要的就是type属性)
- type属性规定了input元素的类型,可以自行查找type属性值
- 可以在placeholder的属性值里面填写想要展示的内容
- value会让搜索框中自动填写内容,它的作用是规定input元素的值,placeholder的作用只是提示
- 可以在input前面加span标签,在form表单中也有专门为input元素标记的标签,作用与span标签差不多,就是label,仅限于与input标签对应使用
- input标签也可以变成单选框,只需要把type的值改成radio,想要实现单选效果,要在标签里加一个name属性,而且这些单选选项的标签,他们的name属性值,必须一致,都是gender
- for属性可以把label标签,绑定input元素,一般绑定input标签中的id,因为id对于每个元素都是唯一的,所以在单选框中就不是很合适,
- input标签中,我们密码也有一个单独的类别,就叫password
- 多选对应的属性值是checkbox
- submit属性会在页面上显示一个提交按钮,可以把我们表单中填写的数据,提交到一个地方,就是下面的action,也可以设置一个value,设置这个按钮的名字
- action属性表示点提交按钮的时候,向何处发送我们的数据,所以action的属性值就是URL,但是这个URL不是乱填的,需要服务器(后端)给我们提供API,我们先用#,也就是不跳转,起到一个锚点和占位的作用
<body>
<form action="#">
<span>用户名:</span>
<input type="text" placeholder="请输入用户名">
<input type="text" value="请输入用户名">
<br><br>
<label for="pwd01">密码:</label>
<input type="password" id="pwd01" placeholder="请输入密码">
<br><br>
<label>性别:</label>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
<br><br>
<label>爱好:</label>
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">RAP
<input type="checkbox" name="hobby">篮球
<br>
<input type="submit" value="登录">
</form>
</body>
