html基本元素转义字符语义修改超链接表单表格知识

最新推荐文章于 2022-04-23 15:36:11 发布

zzsaixuexi

最新推荐文章于 2022-04-23 15:36:11 发布

阅读量376

点赞数 1

分类专栏： html 文章标签： html5 html css

本文链接：https://blog.csdn.net/zzsaixuexi/article/details/120234956

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本元素，包括html、head、body、标题、段落、链接、列表、图形、表格和表单等，并探讨了HTML5新增的语义化元素和表单控件。此外，还讲解了文本格式化、转义字符和常见的HTML属性，为理解网页结构和创建静态页面提供了全面的知识框架。

摘要由CSDN通过智能技术生成

文章目录

基本元素

html：HTML文档的根标签

head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里
body：页面的主体，正文，其内容都会呈现在网页中
title：网页的标题
meta：主要用于设置网页内容
style：用于使用CSS样式表
h1-h6：标题1-标题6，块级元素
p：段落，块级元素，段前段后间距
span：一段文字，内联元素，不换行
font：字体标签，内联
hr：一条水平线，块级
div：盒子，容器，文档的节，主要用于页面布局，块级，它可以容纳很多其他元素

文本格式化元素

b/strong：加粗
i/em：斜体
sup：上标文本
sub：下标文本
small：小号文本
big：大号文本
bdo：文本方向 dir属性来标记文本方向 ltr rtl

常见的转义字符

<：<
>：>
 ：空格
¥：￥
"："
÷：÷
©：©
®: ®

语义相关元素

abbr：缩写，用title属性来标记全称
address：地址，块级元素
blockquote：长段引用，用cite属性标记引用的出处块级元素
q：短引用，用cite属性标记引用的出处，默认加双引号
cite：表示作品的名称
code：表示一段代码块级
pre：预格式化块级
kbd：键盘录入标记
dfn：专业术语
var：变量标签
del：删除文本
ins：插入文本

超链接和锚点

只有一个标签<a>,有如下几个重要的属性：

href：所链接到的资源，可以是本地的，也可以是互联网上的
target：新链接的打开方式，_self，_blank
media：媒体类型

列表相关元素

ul：无序列表
- type属性：circle（空心圆）、disc(圆圈)、square（正方形）
ol：有序列表
- type属性：1，A，I
- start：起始编号
li：有序和无序列表的子选项
dl：自定列表
dt：自定义分类
dd：自定义的选项

图形相关元素

img标签主要用于表示一个图像，有这么几个重要的属性：

src：图片的路径可以是本地的可以是网络上的
width：宽度
height：高度
alt：如果图片加载不出来，则用alt文本表示鼠标悬浮名称
title：图片的文字说明
bodder：边框

表格相关元素

table：表示表格的标签，最多有一个caption表格标题，最多有一个theader表头，最多有一个tfoot表尾，多个tr行，多个td单元格，多个th加粗的tr
- cellspacing：单元格与单元格之间的间距
- cellpadding：单元格内的内边距
- width：表格的宽度
- align：表格内容的对齐方式
- bgcolor：表格的背景颜色
- background：表格的背景图片
caption：表格的标题
tr：表格的行
td：表格的单元格
- rowspan：跨行
- colspan：跨列
- height：高度
- width：宽度
th：页眉单元格
tbody：表格的主体部分
thead：表头
tfoot：表尾

表单相关元素

form标签：表单标签，form当中的其他控件当做整体去提交给我们的服务器的。

对于form的属性而言：

action属性：我们将表单的数据提交到哪里去？一般会去提交到服务器上的一个专门处理数据提交的文件。
method属性：数据的提交方式，post和get。get提交的数据是明文的，post提交的数据经过封装的。

常见的一些控件

input：其中有type属性，type属性的不同，则会导致input表现的形式也会不同

text：文本框

placeholder 默认信息
date 日期
password：密码框
radio：单选框
checkbox：复选框
submit：提交按钮
reset：重置按钮
button：按钮
image：图像
file：文件上传

<label for="username">单行文本框:</label>
			<input id="username" type="text" placeholder="请输入XXX"><br>
			不可编辑的文本框:<input type="text" readonly><br>
			<label>密码框：<input type="password"><br></label>
			隐藏文本框：<input type="hidden"><br>
			第一组单选框：<br>
			<label><input type="radio" name="wife">迪丽热巴</label><br>
			<label><input type="radio" name="wife">哈妮克孜</label><br>
			<label><input type="radio" name="wife">马尔扎哈</label><br>
<select name="高级编程语言" multiple size="3">
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
			</select>
			<br>
			<select name="城市选择" >
				<optgroup label="西安">
					<option value="高新区">高新区</option>
					<option value="雁塔区">雁塔区</option>
					<option value="碑林区">碑林区</option>
				</optgroup>
				<optgroup label="咸阳">
					<option value="渭城区" selected>渭城区</option>
					<option value="秦都区">秦都区</option>
				</optgroup>
			</select>

cols：横向的宽度
rows：纵向的高度

<textarea cols="50" rows="50">

			</textarea>

placeholder：作为文本框的输入提示
autofocus:自动获取焦点
required：提交后的检查，必须填写
list：是将下拉框和文本框进行结合

HTML5新增常用元素

文档结构元素

article：表示一遍独立的文章
- 内部用header来表示标题
- 内部用footer表示脚注
- 内部用section表示段落/文章
- 内部用article表示回复的文章
section：文章的段落
nav：导航栏
aside：附属信息
header：文章头部信息
footer：文章脚注信息
figure：表示一块独立的图片区域，可以包含多image图片
figcation：图片区域的标题