个人HTML学习笔记

最新推荐文章于 2023-04-17 17:45:34 发布

古大帅哥

最新推荐文章于 2023-04-17 17:45:34 发布

阅读量302

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_38333529/article/details/80851155

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

浏览器内核
Web标准
图像标签
表格标签
链接标签
锚点定位
列表
fieldset
input

浏览器内核

谷歌的ChrominumBlink(Chrome)、微软的Trident(IE)、火狐的Gecko(firfox)、苹果的Webkit(Safari)、Presto(Opera)

Web标准

结构	网页结构、元素，如html、xml
样式	网页的外观，如css等
行为	网页的模型定义及交互的编写，如DOM、ECMAScript

图像标签

语法

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

属性	属性值	描述
src	URL	图片位置
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的文本内容
width	像素	设置图片的宽度（设置一个height也会等比例调整）
height	像素	设置图片高度
boder	像素	设置图片边框的宽度

表格标签

语法

<table>
		<thead>
			<tr>
			<th>..</th>
			<th>..</th>
			...
			</tr>
		</thead>
		<tbody>
				<tr>
				<td>..</td>
		<td>..</td>
		..
		</tr>
		..
		</tbody>
	</table>

注：表格只有行(tr>跟单元格(td)，没有列,th是表头，算是加粗居中的td，thead、tbody只是为了划分表格的部分，可以省略

属性	描述
boder	设置表格边框（默认0）
cellspacing	设置单元格之间边框的间隔(默认2)
cellpadding	设置单元格内容与边框的间隔(默认1)
align	表格在网页中的的水平对齐方式left、right、center
width	宽
height	高

链接标签

用法

<a href="url" target="目标窗口弹出的方式">链接显示名称</a>

target属性

属性值	描述
_blank	新窗口打开目标页面
_self(默认)	当前窗口打开目标页面

注：可以统一在头部用bash标签统一标准,如:

<head><bash target="_blank"/></head>

锚点定位

—html
跳转到该页面的某个特定位置
用法

<a href="#id">...</a>
....
<h3 id="id">跳转到这里</h3>

列表

无序列表

<ul>
	<li>项目1</li>
	<li>项目2</li>
</ul>

有序列表

<ol>
	<li>项目1</li>
	<li>项目2</li>
</ol>

自定义列表

<dl>
	<dt>名字</dt>
	<dd>解释1</dd>
	<dd>解释2</dd>
	...
</dl>

datalist

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

	选择明星：<input type="text" list="star">
	<datalist id="star">
		<option>刘德华</option>
		<option>张学友</option>
		<option>黎明</option>
		<option>郭富城</option>
	</datalist>

fieldset

fieldset标签用于从逻辑上将表单中的元素组合起来。

标签会在相关表单元素周围绘制边框。标签为 fieldset 元素定义标题。

<fieldset>
		<legend>登陆</legend>
		用户名:<input type="text" /><br>
		密码：<input type="password"/>
	</fieldset>

input

input类型

类型 (type)	描述
email	邮件格式
tel	电话格式，移动端弹出数字键盘
url	网站格式
number	只能输入数字
search	右边自带重置小叉
color	颜色
time	–：-- 格式
date	弹出日历
datetime	许多浏览器不支持
month	–年--月
week	–年第–周
range	拖动滑条

用例

	<form>
		email:<input type="email" label="email">
		time:<input type="time" label="time"><br>
		date:<input type="date" label="date"><br>
		datetime:<input type="datetime" label="datetime"><br>
		month::<input type="month" label="month"><br>
		week:<input type="week" label="week"><br>
		<input type="submit">
	</form>

input属性

属性	描述
placeholder	占位符，提示預期輸入的
autofocus	自动获取焦点
multiple	多文件上传
autocomplete	自动记录，填充
required	必填项
accesskey	定义获取元素焦点快捷键，alt+字母

用例

	用户名：<input type="text" name="name" placeholder="请输入用户名" autofocus=""><br>
		密码：<input type="password" accesskey="s"><br>
		<input type="file" multiple><br>

#多媒体标签

embed audio video

embed

可以直接引用网上优酷等视频链接，点击分享可以直接复制粘贴html代码过来用

<embed src='http://player.youku.com/player.php/sid/XMjg4MTgyMTUyOA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

audio

音频格式 ogg mp3 wav

<audio controls autoplay loop="2" >
	<source src="2.ogg" >
	<source src="1.mp3" >
	你的浏览器不支持播放音乐
</audio>

loop=-"1"无限循环

video

video 用法与audio基本类似
视频格式 ogg mp4 webM

未完待续…

古大帅哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
个人HTML学习笔记

浏览器内核Web标准图像标签表格标签链接标签锚点定位列表浏览器内核ChrominumBlink(Chrome)、Trident(IE)、Gecko(firfox)、Webkit(Safari)、Presto(Opera)Web标准结构　　　　网页结构、元素，如html、xml 样式网页的外观，css等行为网页的模型定义及交...
复制链接

扫一扫