HTML5

buerjiajiajia

于 2024-02-24 15:04:18 发布

阅读量1.2k

点赞数 14

文章标签： html 前端

本文链接：https://blog.csdn.net/lxylxy001/article/details/136241000

版权

1.head内部标签

title 定义网页的标题
meta 定义网页的基本信息!!
style 定义css样式
link 链接外bo义脚本语言

2.body内部标签

h1-h6 标题
p 段落
br 换行
hr 水平线
div 分割(块元素)
span 区域(行内元素)

3.文本格式化标签

strong 加粗
em 斜体(强调)
cite 斜体(应用)
sup 上标（上去）
sub 下标 (下去)

4.一般标签(<body></body>)

5.自闭合标签(<br/>)

6.块元素

块元素特点:独占一行,排斥与其他元素位于同一行,包括块元素和行内元素
块元素内部可以容纳其他块元素或行内元素
常见块元素:h1-h6 p hr div等

7.行内元素

可以与其他行内元素位于同一行
行内元素内部可以容纳其他行内元素，但不能容纳块元素。
常见的行内元素有 strong em span

8.标签的语意

div 分割(块元素)
span 区域(行内元素)
p 段落
ol 有序列表(type属性值 1 a A i l)
ul 无序列表(disc 实心圆 circle 空心圆 square 实心正方形）
li 列表项
dl(定义列表) dt(定义语术) dd(定义描述)
h1-h6 标题1~标题6
hr 水平线
a 超链接
strong 强调(加粗）
em 强调(斜体)
上标
下标
br 换行
fieldset legend
caption 标题
thead 表头
tbody 表身
tfoot 表脚
th 表头单元格
td 表身单元格

9.表格

table 表格
tr(table row) 行
td(table data cell) 表格单元格单元格
thead 表头
tbody 表身
tfoot 表脚
th 表头单元格
<table> 重试错误原因

<caption>表格标题</caption>



<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>



<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tbody>



<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tfoot>

</table> 重试错误原因重试错误原因重试错误原因重试错误原因重试错误原因重试错误原因重试错误原因重试错误原因重试错误原因重试错误原因

12.图像标签:<img src="图片的地址" alt="图片描述"(给浏览器看) title="图片描述"(给用户看)> src和alt属性是必不可少的

13.图片格式

JPG:可以很好处理大面积色调的图像,如相片,网页一般的图片
PNG:图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。
GIF:图片图像效果很差,但是可以制作动画

14.链接: <a href="链接地址" target="目标窗口的打开方式">

_self: 默认方式即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层打开链接

锚点链接:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h3>绿叶学习网问卷调查</h3>
</head>
<body>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>锚点链接</title>

</head>

<body>

    <div>

        <a href="#music">推荐音乐</a><br />

        <a href="#movie">推荐电影</a><br />

        <a href="#article">推荐文章</a><br />

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="music">

        <h3>推荐音乐</h3>

        <ul>

            <li>林俊杰-被风吹过的下图</li>

            <li>曲婉婷-在我的歌声里</li>

            <li>许嵩-灰色头像</li>

        </ul>

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="movie">

        <h3>推荐电影</h3>

        <ul>

            <li>蜘蛛侠系列</li>

            <li>钢铁侠系统</li>

            <li>复仇者联盟</li>

        </ul>

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="article">

        <h3>推荐文章</h3>

        <ul>

            <li>朱自清-荷塘月色</li>

            <li>余光中-乡愁</li>

            <li>鲁迅-阿Q正传</li>

        </ul>

    </div>

</body>

</html>
</body>
</html>

15.表单

input: <input type="表单类型" value="默认文字" size="文本框长度" maxlength="最多输入字符数"> type:text 单行文本框 password 密码文本框 button 按钮 reset 重置按钮 image 图像形式的提交按钮 radio 单选按钮 checkbox 复选框 hidden 隐藏字段 file 文件上传
textarea标签表单 :多行文本框 <textarea rows="行数" clos="列数">多行文本框内容</textarea>
select 和 option :<select multiple="multiple" size="可见列表项的数目">
<option value="选项值" selected="selected"> 选项显示的内容</option
.......
</select>

    性别:
<input type="radio" name="gender" value="male" id="male">
<label for="male">男性</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">女性</label>

name属性用于将这两个单选项按钮分组,确保用户只能选择其中一个

value属性分别表示两个选项的值,当用户选择其中一个时,该选项的值会被提交到表单中

id 用于关联lable 标签 ,以便用户点击标签时也能选中 label标签!!!

16.多媒体（插入音频,视频,flash）

网页插入音频,视频,flash使用embed标签 <embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed> 地址可以相对地址也可以是绝对地址 width和height单位是px
为某个网页设置背景音乐 ,使用的是bgsound标签 <bgsound src="背景音乐的地址"/> loop="2",表示重复2次 loop="infinite" 表示无限次循环播放 loop='-1'也表示无限次循环播放

17.浮动框架iframe

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>
设置浮动框架是否显示滚动条scrolling 该属性取值 auto:默认值整个表格在浏览器页面中左对齐 yes 总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置也预留 no在任何情况下都不显示滚动条。

18.XHTML 在XHTML中,所有标签必须闭合如<p> </p> <div> </div> <br/> 标签属性必须用引号除了表单元素之外用id代替name <div name="wrapper"></div>——> <div id="wrapper"></div>

19. id和class (id和class都用来选择元素)以便进行css操作和javascript操作对于大结构用id 小的用class

id :id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次
class:class属性我们可以为同一个页面的相同元素或不同元素设置相同的class,然后使得相同他们具有相同的css样式当要为两个或两个以上的元素定义相同的样式建议使用class 属性这样可以减少重复的代码

20.浏览器标题栏小图标

<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>

21.alt属性和title属性 alt是用于图片描述是给搜索引擎看的，并且当图片无法显示时,页面会显示alt中的内容。 <img src="图片描述(给搜索引擎看)" title="图片描述(给用户看)"> 对于img我们一定要添加alt属性

<figure>
 
    <img src="" alt=""/>
 
    <figcaption></figcaption>
 
</figure>

22. figure元素用于包含图片和图注 figcaption元素用于表示图注文字

23.表格标签

table 表格 caption标题 thead 表头 tbody 表身 tfoot 表尾 tr 行 th 表头单元格 td 表格单元格

24.表单语义化

label:用于显示在输入控件旁边的说明性文字也就是将某个表单元素和某段说明文字关联起来。 <label for="">说明性文字</label> for关联的是id
fieldset（加框）和legend（用来为filedset元素添加标题描述该组元素的内容或目的 lengend元素应该作为fieldset元素的第一个子元素并且只能有一个lengend元素）
<br/>换行符 br只适用于p标签内换行
del标签内容会显示删除的样式一杠穿过内容 ins标签会在内容底部显示一

25.多媒体音频标签

audio 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放但播放是有限的
参数:autoplay 在音频就绪后马上播放 controls 向用户显示控件比如播放按钮 loop 每当音频结束时重新开始播放 src 要播放的音频的url
video视频标签 <video src="./media/video.mp4" controls="controls"></video>
参数:autoplay 视频就绪就播放 contrlos向用户显示播放控价 width 设置播放器宽度 height 设置播放器高度 loop 循环播放 preload 是否预加载如果有了autoplay就忽略该属性 src 地址 poster 加载等待的画面 muted静音播放

buerjiajiajia

关注

14
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML5

女性</label><label for="male">男性表头单元格1</th><td>标准单元格1</td><td>标准单元格2</td><td>标准单元格1</td><td>标准单元格2</td><td>标准单元格1</td><td>标准单元格2</td><th>表头单元格2
复制链接

扫一扫