HTML5学习笔记 --- 基础标签

最新推荐文章于 2022-09-15 10:43:51 发布

小米先森丶

最新推荐文章于 2022-09-15 10:43:51 发布

阅读量293

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44866495/article/details/116570603

版权

`<!DOCTYPE html>`

文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页,注意:该行代码必须再最上方.

`<html lang="en">`

lang: 用来定义当前文档显示的语言 en定义语言为英语，zh-CN定义语言为中文

`<meta charset="UTF-8"/>`

在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码.

<meta  charset="UTF-8"/>

注意:上面的语法是必须要写的代码,否则可能引起乱码的情况,一般情况下,同意使用UTF-8编码编程.尽量统一写成标准UTF-8,不要写成UTF8或者utf8.

标题标签 `

-

标注这行代码是一个标题,有加粗字体放大的效果,效果h1-h6依次递减

<h1></h1>
<h2></h2>

段落标签 ``

具有分段效果是一个行级标签

<p></p>

换行标签 ` `

具有换行效果

<br/>

加粗` 和`

具有给字体加粗效果更推荐

<strong></strong>
<b></b>

倾斜 ` 和 `

具有给文字倾斜的效果更推荐

<em></em>
<i> </i>

删除线 `<del> 和 <s>`

标记删除的效果如:删除.更加推荐<del>

<del></del>
<s></s>

下划线 `<ins> 和`

下划线的效果如:下划线.更推荐使用<ins>

<ins></ins>
<u></u>

`<div>`标签

这个标签没有语义,是一个干净的行级标签,就像一个干净的盒子用来装内容.

<div></div>

``标签

这个便签也没有语义,是一个干净的块级标签.

<span></span>

`<img src="图片的路径"/>` 图片标签

用来链接图片,将图片显示到网页上,src里面存放的上图片路径
里面还有几个属性
alt:替换文本,图像显示不出来是用文字替换
title:提示文本,鼠标放在图像上提示的文字.
width:设置图像的宽度
height:设置图片的高度
border:设置图像的边框粗细

<img src="图片路径" />

超链接标签 `<a href="" target="">`

从一个页面链接到另一个页面,
两个重要属性:
href:跳转的目标路径
target:用于指定链接页面的打开方式,其中_sert为默认值在当前页打开,_blank为在新的窗口中打开
在这里插入图片描述

注释标签 ``

如果需要在HTML中添加一行语句,这行语句只是为了注明意思,不参与代码实现,就可以用到注释标签标注它.

<!-- 注释语句 -->

特殊字符

在这里插入图片描述

表格标签 `<table>`

<!--  table用来定义表格的标签 -->
<table>
	<!-- th标签表头标签里面的内容会加粗并且居中显示 -->
	<th>
	<td></td>
	</th>
	<!-- tr用来定义表格中的行 -->
	<tr>
	<!-- td用来定义表格中的单元格 -->
		<td></td>
	</tr>
</table>

表格属性:
在这里插入图片描述
表格的结构标签:
有时候表格可能会很长,为了更好的表示表格的语义,可以将表格分为表格头部和表格主体两大部分.

该标签表示表格头部部分
<thead></thead>
该标签表示表格主体部分
<tbody></tbody>

合并单元格:
跨行合并: rowspan=“合并单元格的个数”
跨列合并: colspan = “合并单元格的个数”

列表标签 ``

列表标签主要是用来布局的.
列表标签最大的特点就是.整齐.整洁.有序,它作为布局会更加自由和方便.
通常我们根据使用情景的不同,列表可以分为三大类: 无序列表,有序列表,自定义列表

无序列表:

<ul>标签标示HTML页面中项目得无序列表,一般以项目符号呈现列表项,而列表项使用<li>标签定义.
<ul>
	<li></li>
	<li></li>
</ul>

有序列表:
有序列表即为有排列顺序的列表,其中各个列表项会按照一定的顺序排列定义.

<ol>
	<li></li>
	<li></li>
</ol>

自定义列表:

自定义列表常用于对术语或名词进行解释和描述,定义列表项前没有任何项目符号

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词2解释2</dd>
</dl>

在这里插入图片描述

表单

使用表单目的是为了收集用户信息.
一个完整的标点通常由表单域,表单控件(也成称为表单元素)和提示信息.三个部分组成.

1表单域:
表单域是一个包含表单元素的区域
在HTML标签中<from>标签用于定义表单域,以实现用户信息的收集和传递.
form表单会把它范围内的表单元素信息提交给服务器

<form action="url地址" methond="提交方式" name="表单域名称">

</form>

在这里插入图片描述

表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件.
1: input输入表单元素

<input type="属性值"/>

type取值:
在这里插入图片描述
input其他属性:

2:select 表单元素
下拉列表

<select>
	<option></option>
</select>

注意 select 中直到有一对option
在option中定义select = “select” 时,当前项即为默认选中项

3: textarea 文本域表单元素
文本域,有需要输入大量文字的时候可以采用textarea标签,它可以输入很多的文字.

<textarea rows="3" cols="20">
	rows 控制显示的行数
	cols 控制每行中的字符个数
</textarea>

`<label>标签`

label标签为input元素定义标注

lable标签用于绑定一个表单元素,当点击lable标签文本时,浏览器会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验
语法:

<lable for="输入框ID"></lable> 
<input type="属性" name="" id="" />

主要是lable标签的for属性应当与相关元素的ID属性相同

小米先森丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记 --- 基础标签

<!DOCTYPE html>文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页,注意:该行代码必须再最上方.<html lang="en">lang: 用来定义当前文档显示的语言 en定义语言为英语，zh-CN定义语言为中文<meta charset="UTF-8"/>在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码.<meta charset="UTF-8"/
复制链接

扫一扫