html(结构)

本文详细介绍了HTML中的实体、元数据设置、语义化标签的使用,包括标题、段落、引用、超链接、图片、内联框架、音视频、表格以及表单的相关属性和用法。重点讲解了语义化标签如<header>, <main>, <footer>, <nav>, <article>, <section>等的作用,以及如何利用它们进行网页布局。此外,还提到了图片的格式选择和音视频的控制属性。
摘要由CSDN通过智能技术生成

html中的实体(转义字符)
&nbsp; 空格
&lt; 小于号
&gt; 大于号

3.meta主要用于设置网页中的一些元数据,元数据不是给用户看
name 指定的数据的名称
content 指定的数据的内容
charset 指定网页的字符集
keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
description 用于指定网站的描述 网站的描述会显示在搜索引擎的搜索的结果中
将页面重定向到另一个网站

4.语义化标签
h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1h3,h4h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素(block element)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup

p标签表示页面中的一个段落,p也是一个块元素
em标签用于表示语音语调的一个加重(斜体),在页面中不会独占一行的元素称为行内元素(inline element)
strong表示强调,重要内容(加重)
blockquote 表示一个长引用
q表示一个短引用
br标签表示页面中的换行

6.语义化标签
布局标签(结构化语义标签)
<main></main>表示网页的主体部分(一个页面中只会有一个main)
<footer></footer>表示网页的底部
<nav></nav>表示网页中的导航
<aside></aside>和主体相关的其他内容(侧边栏)
<article></article>表示一个独立的文章
<section></section>表示一个独立的区块,上边的标签都不能表示时使用section
<div></div>块元素 没有任何的语义,就用来表示一个区块,目前来讲,div还是主要的布局元素
<span></span>行内元素,没有任何的语义,一般用于再网页中选中文字

7.列表
1、有序列表ol
2、无序列表ul
3、定义列表dl dt

8.超链接
a 标签来定义超链接
href 指定跳转的目标路径
9.相对路径
相对路径都会使用.或…开头
./
`…/‘

10.超链接
target属性,用来指定超链接打开的位置
可选值:
_blank 在一个新的页面中打开超链接
_self 默认值 在当前页面中打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
<a href="07.列表.html" target="_self">超链接</a>

可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
<a href="#bottom">去底部</a>//css
<a id="bottom" href="#">回到顶部</a>//html
可以跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值
id属性(唯一不重复的)
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性
<p id="p3">在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。一九二四年九月十五日。</p>
<a href="#p3">去第三个自然段</a>
在开发中可以将#作为超链接的路径的占位符使用
<a href="#">这是一个新的超链接</a>
可以使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生
<a href="javascript:;">这是一个新的超链接</a>

11.图片标签
图片标签用于向当前页面中引入一个外部图片
img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录
在这里插入图片描述

width 图片的宽度 (单位是像素)
height 图片的高度,宽度和高度中如果只修改了一个,则另一个会等比例缩放
一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大
但是在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
jpeg(jpg)
- 支持的颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少,支持简单透明,支持动图
- 颜色单一的图片,动图
png
- 支持的颜色丰富,支持复杂透明,不支持动图
- 颜色丰富,复杂透明图片(专为网页而生)
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点,而且文件还特别的小
- 缺点:兼容性不好
base64
- 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的
效果不一样,用效果好的 -->

12.内联框架
内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
在这里插入图片描述

13.音视频
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
在这里插入图片描述

使用video标签来向网页中引入一个视频,使用方式和audio基本上是一样的
在这里插入图片描述

表格

table标签创建表格
tr一行
td单元格
rowspan 纵向的合并单元格
rowspan 纵向的合并单元格

长表格

头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格

表格的样式

border-spacing: 指定边框之间的距离
border-collapse: collapse; 设置边框的合并

表单

使用form标签来创建一个表单,action 表单要提交的服务器的地址
type属性可选值
文本框text
密码框password
单选按钮radio
多选框checkbox
下拉列表select>option*3
提交按钮submit

autocomplete=“off” 关闭自动补全
readonly 将表单项设置为只读,数据会提交
disabled 将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获取焦点

实体

&实体的名字
&nbsp; 空格
&lt; 小于号
&gt; 大于号

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值