HTML基础

原创已于 2023-03-22 11:34:40 修改 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2023-03-18 09:18:41 首次发布

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括文档声明、头部元素、body内容结构，以及文本标签、div、图片、超链接、路径、base标签、iframe框架和表格等核心元素的使用。此外，还讲解了表单元素如input、textarea、select及其相关属性。

一、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>
</head>
<body>
</body>
</html>

1、html部分

<!doctype html>文档声明:用于告诉浏览器以html5的标准来解析当前的代码。

必须写在第一行
不区分大小写

<html></html>根标签,也叫根元素

2、head部分

<head></head>用来表示头部区域也称作描述区域。
meta表示元信息针对当前页面的一些基础信息的设置一个网页当中可以有多个meta标签。
title用来定义当前网页的标题（是在标签页上的标题)。
link用于引入css文件或者直接写内嵌样式的。
script用于引入js文件或者直接写js代码的。

3、body部分

html的基本组成部分，我们称之为标签，也可以称之为元素。分为下面两类：

双标签：<div></div>
单标签：<input>
格式：<标签名称 [属性名称="属性值"]></标签名称>

二、标签之间的关系

1、父子关系

<html><body></body></html>，html就是body的父元素。

2、后代关系（祖先关系）

<html><body><div></div></body></html>，html就是div的祖先。

三、页面的基本元素

1、文本标签

文本标题标签

h1~h6：文字大小粗细逐级递减。

h1标签，页面当中最重要的部分。一个页面只能有一个h1标签。
搜索引擎并不具备区分多个h1当中谁的内容是真正的核心的能力所以当你写多个h1的时候，非常不利于搜索引擎检索到我们页面当中标题的内容从而会导致我们的搜索引擎优化（seo）不好。
通常情况下，会将页面的logo写在h1标签当中。

段落标记

<p></p>：自动换行，每个标签之间自带间距。

字体倾斜&加粗标记

<b></b>：文本倾斜
<strong></strong>：语义化标签，更具有强调的作用，更推荐。
<i></i>：文本加粗
<em></em>：语义化标签

下划线&删除线

<u></u>
<ins></ins>：下划线
<s></s>
<del></del>：删除线

上标字与下标字

<sup></sup>：平方
<sub></sub>：角标

字符（小段文本）文本节点

<span></span>：单独选中一部分进行操作，优点是不具备任何默认样式。

换行&水平线

<br>：换行。
<hr>：在页面当中生成水平的分割线。

转义字符

 ：空格
<：左尖括号<
>：右尖括号>
©：版权符号©
\：转义字符

2、div标签

div标签用来划分区域。

	<div class="header"></div>
	<div class="main">
		<div class="main-left"></div>
		<div class="main-center"></div>
		<div class="main-right"></div>
	</div>
	<div class="footer"></div>

3、图片标签

    <img src="图片路径" [alt="图片加载失败的提示文字" title="鼠标悬停显示的文字"]>

4、路径

绝对路径

    <img src="D:/前端/HTML基础/img/图片.jpg">

相对路径

	<img src="../图片.jpg">`

/：表示根目录，可省略。
./：从当前位置出发，可以省略。
../：表示返回上一层，../../表示返回上两层。

相对路径的寻找过程就是从当前文件的路径寻找到目标文件的路径。

5、超链接

超链接

	<a href="跳转的网址或本地html文件路径">文字或图片</a>

锚点链接：当 “锚点名称=id值”，点击链接自动跳转到当前id对应的标签位置

	<a href="#锚点名称" target="页面打开方式"></a>
	<div id="id值"></div>

跳转到其他网址的锚点位置

    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <div id="box1">这里是box1</div>
    <div id="box2">这里是box2</div>
	<!-- 跳转到京东秒杀 -->
    <a href="https://www.jd.com/#J_seckill">京东秒杀</a>

属性

target属性：_self在当前窗口打开 _blank新窗口打开
title属性：文本提示

6、base标签

base标签是描述标签，统一规定当前页面属性的属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- base 标签 写在 head 里 -->
    <base target="_blank" href="images/">
</head>
<body>
    <a href="https://jd.com" target="_self">链接1</a>	<!-- 打开方式为 _self -->
    <a href="https://jd.com">链接2</a>					<!-- 打开方式为 _blank -->
    <a href="13_图片标签.html">13图片标签</a>			<!-- 找不到路径 -->
    <img src="1.jpg" alt="打开失败">						<!-- 打开成功 -->		
</body>
</html>

注意：

当a标签自身设置了target属性的时候，优先本身属性，忽略base设置的内容。
base里的href地址是一个相对基准地址，使用了之后，在页面的内的所有相对路径前就都会添加上base里的地址，然后咱们所调用的图片、超链接、音乐什么的，就不用填写完整的文件夹地址，写上图片名、歌名就行了，他会在你的地址前添加上base里面的地址。
如果我们的a标签的href设置的一个带协议名称的网址，则不会受到base的影响。通常情况下，我们通过base统一设置a标签的打开方式是用的比较多的，而href属性的配置使用比较少。

7、iframe框架标签

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)，动条默认宽高不够时自动显示。

iframe框架标签

	<iframe src="要嵌入的目标网址或文件或图片的路径" frameborder="0不显示边框，1显示（默认值）"></iframe>

iframe指定a标签打开的位置：按照超链接的地址，在iframe打开

    <a href="http://www.baidu.com" target="baidu">百度一下</a>
    <iframe wide="500" height="300" name="baidu" frameborder="0"></iframe>

iframe指定提交表单的位置

	<form action="http://www.baidu.com/" target="atguigu">
		<input type="text" name="wd">
		<button>搜素</button>
	</form>
	<hr>
	<iframe name="atguigu" width="100%" height="600"></iframe>

四、列表

有序列表

    <ol>
        <li>列表项内容</li>
        ...
        <li>列表项内容</li>
    </ol>

无序列表

    <ul>
        <li>列表项内容</li>
        ...
        <li>列表项内容</li>
    </ul>

自定义列表

    <dl>
        <dt>名词</dt>
        <dd>解释</dd>
        ...
        <dd>解释</dd>
    </dl>

使用场景： 无序列表一般用于导航栏，列表之间可以互相嵌套。定义列表一般用于页面底部或图文排列。

五、table表格

1、表格的基本结构

    <table>
        <caption>表格标题</caption>
        <tr>
        	<th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
    </table>

2、表格的html属性

table：父容器
caption：表格标题，只能写在第一个子元素位置
colgroup：表示一列
tr：表示一行
th：表头，相当于加粗的、水平居中的td
td：单元格

3、表格的基础属性

width，height：宽度，高度，自适应撑开。
cellspacing：单元格间距，一般设置为0。
cellpadding：单元格内边距，默认值为1。
rules：分割线，none rows cols all group。table的属性。
bgcolor：背景颜色。
border：边框，默认为0。table设置border时，会有斜面浮雕效果；当border>1只有外边框会加粗。所以一般border设置给td和th，且没有浮雕效果。
align：水平对齐方式，left(默认) center right。注意colgroup没有此属性。当<table align="center">，表格整体居中；当<td align="center">，单元格内文字居中。
valign：垂直对齐方式，top middle(默认) bottom。table和colgroup没有此属性。
colspan：列合并。设置给td。
rowspan：行合并。设置给td。

border效果实例：

    <!-- table设置border时，会有斜面浮雕效果 ；
        当border>1 只有外边框会加粗
        所以一般border设置给td th -->
    <table width="200" heigth="300" cellspacing="0" border="10">
        <caption>表格标题</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td bgcolor="pink">表格内容</td>
            <td>表格内容</td>
        </tr>
    </table>

在这里插入图片描述

4、表格的行分组

<thead></thead>：表头
<tbody></tbody>：表体
<tfoot></tfoot>：表尾

当我们设置表头、表体和表尾时，浏览器自动识别；当我们不设置时，浏览器会把表格里的不设置分组的内容都默认为表体部分。

5、表格的列分组

<colgroup span="value"></colgroup>表示列组，添加在<caption>后。value值表示分组的列数，而不是第几列。

    <table width="600" heigth="300"  cellspacing="0" border="1">
        <caption>表格标题</caption>
        <colgroup span="1" bgcolor="pink"></colgroup>
        <colgroup span="2" bgcolor="skyblue"></colgroup>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
    </table>

在这里插入图片描述

6、表格的分割线

<table rules=""></table>设置分割线。值可以为none rows cols all group组分割线。

7、表格的合并

	<td colspan="2"></td>

上述表示从此单元格开始，往后两列合并。

六、表单

1、input标签

    <form action="" method="get/post">
        文本框：<input type="text" name="" id="">
        <br>
        密码框：<input type="password" name="" id="">
        <br>
        单选框：<input type="radio" name="sex" id="">
               <input type="radio" name="sex" id="">
        <br>
        多选框：<input type="checkbox" name="" id="">
        	   <input type="checkbox" name="" id="">
        	   <input type="checkbox" name="" id="">
        重置按钮：<input type="reset" value="重置">
        提交按钮：<input type="submit" value="提交">
        普通按钮: <input type="button" value="">
    </form>

type属性

text：单行文本框，超出部分被隐藏。
password：密码框。
radio：单选框，需要与name属性配合。组内多个相同name值，利用本属性的互斥性达成单选效果。
checkbox：复选框，多选框。
reset：重置按钮，value="重置"。
submit：提交按钮，value="提交"。
button：按钮，value=""。

2、单选框&复选框

radio单选框，需要与name属性配合，checked表示默认选中。组内多个相同name值，利用本属性的互斥性达成单选效果。

		<input type="radio" name="sex" checked>男
		<input type="radio" name="sex">女

checkbox复选框，多选框，checked表示默认选中。

		<input type="checkbox" checked>中国
		<input type="checkbox">韩国
		<input type="checkbox">俄罗斯

3、textarea标签

textarea是多行文本框。可以回车。可以拖拽，设置resize:none;取消拖拽效果。我们不通过此设置宽高。

    <form action="">
        <textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
    </form>

4、select下拉选框

select表示下拉选框，size设置下拉显示的行数，optgroup设置二层分级，selected设置默认选中。

        <select size="">
        	<optgroup label="组名">
	            <option value="value1" selected>选择内容</option>
	            <!-- 当属性名=属性值时，可以简写属性名 ;  并且后面的会覆盖前面的selected-->
	            <option value="value2">选择内容</option>
	            <option value="value3">选择内容</option>
	         </optgroup>
        </select>

5、表单的其他属性

实际上实际使用的规则都是通过JavaScript里的正则表达式完成的，标签里自带的规则比较简单。

maxlength：控制最多输入的字符
minlength：控制最少输入的字符
size：控制宽度的属性(以字符个数为单位)
value：真实出现的值
placeholder：默认提示信息，写入信息会消失，删除信息会出现
checked：控制单选框和多选框默认选中的状态
selected：控制下拉框的默认选中的状态
disabled：禁用，也叫置灰

6、label提示信息标签

label是提示信息标签，用在表单域里边的提示标签。

绑定提示信息的两种方式：

可以通过嵌套来实现将表单元素和提示的文本都写在labe1元素的内部当中即可
可以通过给表单元素设置id属性然后将1abel标签的for属性的属性值设置成对应表单元素的id名称进行关联绑定

    <form action="">
        <!-- 第一种：通过嵌套绑定 -->
        <label for="">
            <input type="radio" name="" id="">字在里面
        </label>
        <!-- 第二种：通过id绑定 -->
        <input id="1" type="radio">
        <label for="1">字在里面</label>
    </form>