HTML

置顶 js胡

已于 2024-01-01 22:36:44 修改

阅读量401

点赞数 7

分类专栏： # HTML 前端文章标签： html html5

于 2023-12-27 18:22:56 首次发布

本文链接：https://blog.csdn.net/hulitong0621/article/details/135251496

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

HTML5 语义化标签

header,section,footer,aside,nav,main,article,figure所有的这些元素都是块级元素.。所有的标签都支持HTML5新属性

标签	描述
header	头部
nav	导航
aside	侧边栏
main	主要内容区域
footer	底部
menu	菜单
article	文章
section	区块
meter	定义度量衡
dialog	对话框
time	时间
figure	用于定义一个可附加标题的内容元素；figcaption 用于为figure元素添加标题和描述信息

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>文档标题</title>
	</head>
 
	<body>
	
		// 头部
		<header>
		
			// 导航
			<nav>
				<a href="#">首页</a>
				<a href="#">技术</a>
				<a href="#">生活</a>
			</nav>
		</header>
		
		//侧边栏
		<aside>
		
		   // 菜单
			<menu>
			</menu>
			
		</aside>
		
		// 主要内容区域
		<main>
			<section class="section-page">
				<article>
					<h2>welcome to csdn</h2>
					<p>csdn占据了我大部分时间</p>
				</article>
			</section>
			
			<section class="section-page">
				<figure>
					<img src="#" alt="img" />
					<figcaption>
						caption and descriptions
					</figcaption>
				</figure>
			</section>
		</main>
		
		// 底部页脚
		<footer>
		</footer>
	</body>
 
</html>

HTML音频标签（嵌入标签）

其实<img />也是嵌入标签

标签名	描述
video	定义视频（video 或者 movie）
audio	定义音频内容
source	定义多媒体资源 <video> 和 <audio>
track	为 <video> 和 <audio> 元素之类的媒介规定外部文本轨道
embed	用于嵌入多媒体内容，如音频或者视频
iframe	嵌入网页或者另一个网页中的内容
object	用于嵌入Flash、java等

<video 
	controls 
	autoplay="true" 
	loop 
	muted 
	preload="auto" 
	width="400" 
	height="200"
>
    <source type="video/webm" src="./public/flower.webm" />
</video>

HTML5 新元素

除了开头的语义化标签，以下的部分标签也是HTML5新标签

标签名	描述
canvas	绘图
datalist	选项列表,与input配合使用,用于描述文档或文档某个部分的细节
keygen	表单的密钥对生成器字段
output	不同类型的输出
ruby	定义 ruby 注释（中文注音或字符）。
rt	定义字符（中文注音或字符）的解释或发音。
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
command	定义命令按钮，比如单选按钮、复选框或按钮
summary	标签包含 details 元素的标题

HTML 常用的普通标签

在日常开发中，最常用的页面布局元素主要使用以下几个标签：

标签名	描述
div	普通块级元素容器
p	普通段落块级元素容器
h1–h6	标题块级容器
span	普通内联元素容器
i	内联元素容器-斜体文本，起强调作用
em	内联元素容器-加粗文本，起强调作用
img	内联块级元素容器-插入图片

HTML 全局属性

属性名称	描述
class	类
id	id唯一
title	标题
data-*	自定义属性
dir	用于指示元素文本的方向性
style	样式
accesskey	绑定快捷键
autocapitalize	用于控制输入的文本是否自动大写 value值为枚举类型：on/sentences，off/none
autofocus	自动聚焦
contenteditable	内容可编辑
draggable	拖拽
translate	翻译
tabindex	允许开发人员使 HTML 元素可聚焦，允许或阻止它们按顺序聚焦
spellcheck	定义是否可以检查元素是否存在拼写错误
slot	槽；与该元素的name值匹配
popover
lang	定义元素的语言
enterkeyhint
exportparts
hidden
inert
is

块级元素、内联元素(行内元素)、行内块级元素

1.块级元素 block-element

块级元素有以下几点特征：

每一个块级元素会单独占一行；第二个块级元素会换行，另起一行。
每一个块级元素都有width,height,padding,margin等属性

元素	描述
div
p
ul	列表
ol	列表
li
h1–h6
table	表格
caption
thead
tbody
tfooter
th
td
dd
hr
dl
dt
dd

2.行内元素(内联元素) inline-element

行内元素有以下几个特征：

会与相邻的元素并列在一行，直到占满换行
内联元素的宽、高设置无效，默认宽高是元素自身的宽高
所有的行内元素padding可以设置、margin属性只能设置水平方向的

元素名	描述
a	跳转链接
b	粗体，吸引对文字的注意
cite	来标记书籍或其他出版物的标题
span	常用内联容器
label	表单标签
i	斜体
img	图片
input	表单输入框
sup	上标元素
sub	下标元素
small	將使文本的字体变小一号
mark	来标记关键词或短语
button	按钮
em	来强调重点
kbd	定义键盘文本
strong	加粗，来表明文本具有重要意义
textarea	多行文本输入框
select	项目选择
strike	画中线

3.行内块级元素 inline-block-element

特点：综合了块级元素和行内元素的特点

和相邻行内块级元素在同一行。
可以设置宽、高、行高、内外边距。
默认宽、高为其内容的宽、高。

<br/> //换行
 
<hr> //分隔线
 
<input> //文本框等
 
<img> //图片
 
<td> //单元格

Form 表单

1.表单元素

form标签，当method的属性值为post时，enctype值可选择为：

application/x-www-form-urlencoded：未指定属性时的默认值。
multipart/form-data：当表单包含 type=file 的元素时使用此值。
text/plain：出现于 HTML5，用于调试。这个值可被、或元素上的 formenctype 属性覆盖。

表单元素	类型(type)-attribute-value	描述
form	method=" post/get" action=“” enctype=“”	表单
label	for=“input_id”	标签名
select	option	下拉菜单
textarea		多行文本
input	button	按钮
input	checkbox	多选
input	color	颜色
input	date	日期
input	datatime-local	本地日期时间
input	email	邮件
input	file	文件
input	hidden	隐藏文本框
input	image	图片
input	month	月份
input	number	数字
input	password	密码
input	radio	单选
input	range	滑块控件
input	reset	重置
input	search	搜索
input	submit	提交
input	tel	电话
input	text	文本
input	time	时间
input	url	路径
input	week	周

<form 
	method="post" 
	action="https://www.baidu.com" 
	enctype="multipart/form-data" 
	id=“formExample”
>

	<label for="username" >用户名：</label>
	<input name="username" type="text" id="username"  />

	<input type="password" name="password"  placeholder="请输入密码"  />
	<input type="emial" name="email" maxlength="16" placeholder="最大长度为16个字节"  />
	<input type="tel" name="phone" required placeholder="电话号码不能为空"  />
	<input type="number" name="age"  placeholder="请输入年龄"  />
	
	// 搜索框
	<input type="search" name="key" placeholder="请输入关键词搜索..."  />
	
	// 颜色选择
	<input type="color" />
	
	<input type="image" />
	
	// 上传文件
	<input type="file" size="300" />
	
    // 日期、时间、月、周
	<input type="date" />
	<input type="datetime" />
	<input type="datetime-local" />
	<input type="week" />
	<input type="month" />
	
	// 多选
	<input type="checkbox" name="book" value="1" />
	<input type="checkbox" name="book" value="2" />
	<input type="checkbox" name="book" value="3" />
	// 单选
	<input type="radio" name="sex" value="1"  />
	<input type="radio" name="sex" value="2"  />
	
	<select>
       <option value="0>全部</option>
       <option value="1">技术部</option>
       <option value="2">财务部</option>
       <option value="3">水厂</option>
       <option value="4">配送事业部</option>
       <option value="5">销售部</option>
    </select>
    
	<textarea name="desc" id="" cols="30" rows="10">描述...</textarea>
	
	<input type="reset"  value="重置" />
	<input type="submit" value="提交"  />
</form>

2.表单属性 input-attribute

属性	属性值	描述
accept
autocomplete		自动完成
capture
crossorigin
dirname
disabled		禁用
elementtiming
for
max		最大
maxlength		最大长度
min		最小
minlength		最小长度
multiple
pattern
placeholder		输入框提示显示
readonly		只读
rel
required		必填，不能为空
size		大小
step		步骤

Table 表格

表格标签

元素	描述
table	表格
caption	表格标题
thead	表格头部
tbody	表格内容
tfooter	表格页脚
col	定义用于表格列的属性
colgroup	定义表格列的组
tr	tr 是 table row 的缩写，表示表格的一行
th	th 是 table header的缩写，表示表格的表头单元格
td	td 是 table data 的缩写，表示表格的数据单元格

<table>
  <caption>学生登记表</caption>
  <thead>
    <tr>
          <th>id</th>
          <th>姓名</th>
          <th>性别</th>
          <th>班级</th>
          <th>联系方式</th>
          <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>001</td>
       <td>张三</td>
       <td>男</td>
       <td>五年级二班</td>
       <td>13304714678</td>
       <td>内蒙古呼和浩特市赛罕区公务员小区5号楼2单元3120</td>
     </tr>
     
     <tr>
       <td>002</td>
       <td>李梅丽</td>
       <td>女</td>
       <td>五年级二班</td>
       <td>13804718970</td>
       <td>内蒙古呼和浩特市赛罕区公务员小区5号楼3单元2301</td>
      </tr>
      
    </tbody>
    
    <tfoot>
    	学生统计表附属表
    </tfoot>
 </table>

table表格属性

border:0、1
width

List 列表

1.列表标签

标签名	type-value（值）	描述
ul	type=“circle/disc/square”	无序列表
ol	reversed,start,type	有序列表
li		条目
dl		自定义列表
dt		元素仅能作为 <dl> 的子元素出现
dd		列表选项，该元素需要出现在 <dt> 元素和 <dd> 元素之后，并且在一个元素里

<ol>标签type属性值：

a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1表示数字编号（默认）编号类型适用于整个列表，除非在 <ol> 元素的 <li> 元素中使用不同的 type 属性。

// 无序列表
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

// 有序列表
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>

// 自定义列表
<dl>
	<dt>黄河</dt>
	<dd>黄河1</dd>
	<dd>黄河2</dd>
	<dd>黄河3</dd>
	<dd>黄河4</dd>
</dl>

2.列表属性

图片标签

图片标签	描述
img	插入图片
map	定义图像地图
area	定义图像地图中的可点击区域

图片属性：

src
alt
width
height

<img src="" alt="" width="" height=""  />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

HTML5 文档结构

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>文档标题</title>
	</head>
 
	<body>
		文档内容......
	</body>
 
</html>

js胡

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录