HTML基础笔记

1 基本标签

在这里插入图片描述

1.1 head标签

在HTML中,一般来说,只有6个标签能放在head标签内。

  • title标签
  • meta标签
  • link标签
  • style标签
  • script标签
  • base标签

1.1.1 title标签

定义网页的标题

1.1.2 meta标签

在HTML中,meta标签一般用于定义页面的特殊信息,例如页面关键字、页面描述等。这些信息不是提供给人看的,而是提供给搜索引擎蜘蛛(如百度蜘蛛、谷歌蜘蛛)看的。简单来说,meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。有两个重要的属性:name和http-equiv

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字-->
    <meta name="keywords" content=""/>
    <!--网页描述-->
    <meta name="description" content=""/>
    <!--本页作者-->
    <meta name="author" content="">
    <!--版权声明-->
    <meta name="copyright" content=""/>
    <!--网页编码,h5可简化为<meta charset="utf-8"/>-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--当前页面在6秒后会自动跳转到http://www.baidu.com-->
    <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
<body>
</body>
</html>

1.1.3 style标签

定义元素的CSS样式。

1.1.4 script标签

用于定义页面的JavaScript代码,也可以引入外部JavaScript文件。

1.1.5 link标签

用于引入外部样式文件(CSS文件)。

1.1.6 base标签

用于配置所有相对路径的基准路径。

2 body标签

用于定于网页的标签布局,具体如下文标签介绍。

3 注释

HTML注释: <!–注释内容 -->
CSS注释: /* 注释内容 */
JavaScript单行注释:// 注释内容
JavaScript多行注释:/* 注释内容 */

2 文本

2.1 标题标签

在HTML中,共有六个级别的标题标签:h1、h2、h3、h4、h5、h6。

2.2 段落标签

在HTML中,我们可以使用p标签来显示一段文字。p标签包裹的段落会自动换行,并且段落与段落之间有一定的间距。

2.3 换行标签

在HTML中,我们可以使用br标签来给文字进行换行。其中<br/>是自闭合标签,br是“break(换行)”的缩写。

2.4 文本标签

常用的文本标签有以下八种:

  • 粗体标签:strong、b
  • 斜体标签:i、em、cite
  • 上标标签:sup
  • 下标标签:sub
  • 中划线标签:s、del
  • 下划线标签:u、ins
  • 大字号标签:big
  • 小字号标签:small

如果想要对文本实现加粗效果,尽量使用strong标签,而不要使用b标签。这是因为strong标签比b标签更具有语义性。

2.5 水平线标签

在HTML中,我们可以使用hr标签来实现一条水平线。hr,是“horizon(水平线)”的缩写。

2.6 div标签

在HTML中,我们可以使用div标签来划分HTML结构,从而配合CSS来“整体”控制某一块的样式。div,全称“division(分区)”,用来划分一个区域。div标签内部可以放入所有其他标签,例如p标签、strong标签、hr标签等。

2.7 标签类型总结

2.7.1 自闭和标签

在这里插入图片描述

2.7.2 块级元素

在这里插入图片描述

2.7.3 行内元素

在这里插入图片描述

2.7.4 特殊符号

在这里插入图片描述

3 列表

3.1 有序列表

有序列表从<ol>开始,到</ol>结束。有序列表一般采用数字或字母作为顺序,默认是采用数字顺序。

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

在HTML中,我们可以使用type属性来改变列表项符号。默认情况下,有序列表使用数字作为列表项符号。
在这里插入图片描述

<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>

3.2 无序列表

无序列表从<ul>开始,到</ul>结束。同样地,无序列表可以使用type属性修改列表项符号。
在这里插入图片描述

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

3.3 定义列表

在HTML中,定义列表由两部分组成:名词和描述。<dl>标记和</dl>标记分别定义了定义列表的开始和结束;dt标签用于添加要解释的名词;而dd标签用于添加该名词的具体解释。

<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言,控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表,控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言,控制网页的行为</dd>
</dl>

4 表格

4.1 基本标签

在HTML中,一个表格一般会由以下三个部分组成。

  • 表格:table标签
  • 行:tr标签
  • 单元格:td标签
<table>
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
    <tr>
        <td>单元格 3</td>
        <td>单元格 4</td>
    </tr>
</table>

4.2 标题标签

在HTML中,表格一般都会有一个标题,我们可以使用caption标签来实现。表格一般还会有表头,可以使用th标签来实现。

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格 1</th>
        <th>表头单元格 2</th>
    </tr>
    <tr>
        <td>表行单元格 1</td>
        <td>表行单元格 2</td>
    </tr>
    <tr>
        <td>表行单元格 3</td>
        <td>表行单元格 4</td>
    </tr>
</table>

4.3 语义标签

一个完整的表格包含:table、caption、tr、th、td。为了更深入地对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。thead、tbody和tfoot把表格划分为三部分:表头、表身、表脚。有了这三个标签,表格语义更加良好,结构更清晰,也更具有可读性和可维护性。

<table>
	<caption>考试成绩表</caption>
	<thead>
	<tr>
		<th>姓名</th>
		<th>语文</th>
		<th>英语</th>
		<th>数学</th>
	<tr>
	</thead>
	<tbody>
	<tr>
		<td>小明</td>
		<td>80</td>
		<td>80</td>
		<td>80</td>
	</tr>
	<tr>
		<td>小红</td>
		<td>90</td>
		<td>90</td>
		<td>90</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
		<td>平均</td>
		<td>85</td>
		<td>85</td>
		<td>85</td>
	</tr>
	</tfoot>
</table>

4.4 单元格合并

<td rowspan = "跨越的行数"></td>
<td colspan = "跨越的列数"></td>

例如下面这段代码

<table width="500" height="249" border="1" cellspacing="0">
	<tr>
		<td></td>
		<td colspan="2"></td>
	</tr>
	<tr>
		<td rowspan="2"></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

其效果为:
在这里插入图片描述

5 图片

在HTML中,我们可以使用img标签来显示一张图片。对于img标签,我们只需要掌握它的三个属性:src、alt和title。

<img src="" alt="" title="" />

6 超链接

在HTML中,我们可以使用a标签来实现超链接。

<a href="链接地址">文本或图片</a>

a标签的target属性取值有四种:
在这里插入图片描述

7 表单

在HTML中,表单相关的标签有五种:form、input、textarea、select和option。在外观上可以划分为:

  • 单行文本框
  • 密码文本框
  • 单选框
  • 复选框
  • 按钮
  • 文件上传
  • 多行文本框
  • 下拉列表

7.1 form标签

在这里插入图片描述

  • name属性:在一个页面中,表单可能不止一个,每一个form标签就是一个表单。为了区分这些表单,我们可以使用name属性来给表单进行命名。
  • method属性:用于指定表单数据使用哪一种http提交方法。method属性取值有两个,一个是get,另外一个是post。
  • action属性:用于指定表单数据提交到哪一个地址进行处理。
  • target属性:与a标签的target属性是一样的,都是用来指定窗口的打开方式。一般情况下,我们只会用到_blank这一个属性值。
  • enctype属性:用于指定表单数据提交的编码方式。一般情况下,我们不需要设置,除非你用到上传文件功能。

7.2 input标签

<form action="#" method="get">
	用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br/>
	密码: <input type="password" name="pwd"> <br>
	性别:
	男 <input type="radio" name="sex" value=""><input type="radio" name="sex" value="" checked="checked"> <br>
	爱好:
	吃饭 <input type="checkbox" name="hobby" value="吃饭"/>
	睡觉 <input type="checkbox" name="hobby" value="睡觉">
	打豆豆 <input type="checkbox" name="hobby" checked="checked" value="打豆豆"> <br>
	<input type="submit" value="免费注册">
	<input type="reset" value="重新填写">
	<input type="button" value="获取短信验证码"> <br>
	上传头像: <input type="file">
</form>

7.3 textarea标签

<form>
	留言板:
	<textarea cols="50" rows="5"> </textarea>
</form>

7.4 select标签

select标签的属性:
在这里插入图片描述
option标签的属性:
在这里插入图片描述

<form>
	籍贯:
	<select>
		<option>山东</option>
		<option>北京</option>
		<option>天津</option>
		<option selected="selected">广东</option>
	</select>
</form>
  • 27
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值