html学习笔记_html块元素不独占一行-CSDN博客

本文链接：https://blog.csdn.net/m0_65092564/article/details/132109794

html笔记

html基础

html字符编码

在head标签中使用meta标签的charset属性

建议使用utf-8字符集，不容易出错

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        帅哥在此！
    </body>
</html>

设置语言

在head标签的lang属性中设置

<html lang="en">

在这里插入图片描述

排版标签

<!-- 自成一段 -->
<p>段落标签</p>
<h1>一级标题</h1>
...
<h6>六级标题</h6>

在这里插入图片描述

块级元素和行内元素

块级元素：独占一行
行内元素：不独占一行
使用规则：
- 块级元素内可以写块级元素和行内元素（除了一些特殊规则）
- 行内元素内只能写行内元素

常用文本标签

<em>斜体</em>
<strong>粗体</strong>
<span>容器</span>

在这里插入图片描述

不常用文本标签

在这里插入图片描述

图片标签

1、使用方法

标签名：img
语义：图片
常用属性：
- src：图片存放的路径
- alt：图片描述，可用于搜索引擎，当图片由于某种错误显示不出来时则会显示该描述
- width：图片宽度
- height：高度

超链接标签

标签介绍

在这里插入图片描述

用法

1、可用来跳转到指定页面

    <!-- 跳转到其他页面，并在新页面打开 -->
    <a href="/2_基本html/resource/小姐姐.gif" target="_blank">跳转到其他页面</a>

2、跳转到指定锚点

需要先设置锚点

使用标签中的id属性

跳转到本页面的锚点

    <!-- 跳转到本页的锚点 -->
    <a href="#test">测试跳转到test</a><br>

跳转到其他页面的锚点

    <!-- 跳转到其他页面的锚点 -->
    <a href="/2_基本html/demo.html#test">跳转到demo的test</a><br>

列表

1、无序列表

    <!-- 无序列表 -->
    <h2>我想去的几个城市</h2>
    <ul>
        <li>成都</li>
        <li>上海</li>
        <li>西安</li>
        <li>武汉</li>
    </ul>

2、有序列表

    <!-- 有序列表 -->
    <h2>我想去的顺序</h2>
    <ol>
        <li>成都</li>
        <li>上海</li>
        <li>西安</li>
        <li>武汉</li>
    </ol>

3、自定义列表

    <!-- 自定义列表 -->
    <dl>
        <!-- dt：定义术语 -->
        <dt>做好笔记</dt>
        <!-- dd：定义描述 -->
        <dd>笔记是我们以后复习的一个抓手</dd>
        <dd>笔记可以是电子版，也可以是纸质版</dd>
        <dt>多加练习</dt>
        <dd>只有敲出来的代码，才是自己的</dd>
        <dt>别怕出错</dt>
        <dd>错很正常，改正后并记住，就是经验</dd>
	</dl>

表格

基本结构

一个完整的表格由标题，表格头部，表格主体，表格脚注四部分组成

在这里插入图片描述

常用属性

标签名	语义	常用属性及用处
table	表格	width：设置表格宽度。 height：设置表格最小高度，最终的高度可能比设置的大 border：设置边框高度 cellspacing：设置单元格间距
thead	表头部分	height：设置高度 align：设置单元格中文字的对齐方式 1.left：左对齐 2.right 3.center valign：设置单元格的垂直对齐方式 1.top 2.middle 3.bottom
tbody	表格主体	与thead基本相同
tr	每一行	与thead基本相同
tfoot	表格脚注	与thead基本相同
td	普通单元格	width：设置宽度 height：设置高度 align：设置对齐 valign：垂直对齐 rowspan：指定跨的行数 colspan：指定跨的列数
th	表头单元格	与td相同

表单

标签	语义	属性
form	表单	action：用于指定表单提交的地址 target：设置表单提交后如何打开页面 method：表单提交的方法
input	输入框	type：输入框的类型，用于指定是哪种输入框，例如text，password，radio等，后面会介绍 name：指定提交数据的名称
button	按钮	type：指定按钮类型 name：同上

常用表单控件

1、text:文本输入框

常用属性：

name：数据名称
value：默认值
maxlength：最大输入长度·

<input type="password">

2、password：密码输入框

<input type="password">

常用属性：同文本输入框

3、radio：单选框

<input type="radio">

常用属性：

name
value
checked：默认选中

4、checkbox：复选框

<input type="checkbox">

属性：

checked：默认选中
name、value

5、hidden：隐藏域

<input type="hidden">

属性：

name、value

6、submit：提交

第一种提交方式

<input type="submit" value="提交">

属性：

value：设置按钮的值
一般不设置name属性

第二种提交方式

<button type="submit"></button>

button不要设置name属性

7、rest：重置按钮

<input type="reset">

属性：同submit

8、select和option：下拉框

<select name="from">
    <option value="shanghai">上海</option>
    <option value="guangdong">广东</option>
</select>

select属性：

name：指定数据名

option属性：

value：指定提交的数据值，如果没设置则默认为option标签中的文字

9、button：按钮

<input type="button" value="按钮">
<button type="button">按钮</button>

10、textarea标签：文本域

<textarea name="文本" value="默认值">文本内容</textarea>

属性：

rows：指定显示行数
cols：指定显示列数

禁用表单控件

给标签设置disabled

<input type="text" disabled>

label标签

label标签可以与表单控件相关联，当点击label标签时，与之对应的表单控件就会获取焦点

关联方式

让label标签中的for属性的值设置为相关联的控件的id值
把表单控件写在label标签内

iframe标签

标签名	功能	属性
iframe	在网页中嵌入其他页面，比如其他网页或者图片，如果显示不了则会进行下载	src：其他页面的地址 name：框架名称，可以配合超链接或者iframe的target属性进行匹配使用 width：设置宽度 height：设置高度 frameborder：是否显示边框，只有1或者0两个值

实例

    <!-- 显示一个网页 -->
    <iframe src="http://www.taobao.com" width="600" height="300"></iframe>   
    <!-- 显示一个广告 -->
    <iframe src="https://saxn.sina.com.cn/click?type=bottom&t=UERQUzAwMDAwMDAyODU3Mg%3D%3D&url=https%3A%2F%2Ffinance.sina.com.cn%2Fmobile%2Fcomfinanceweb.shtml%3Fsource%3DPDPS000000028572&sign=a8d0f7cc13fdec0c&am=%7Bclkx%3A121%2Cclky%3A124%7D" width="200" height="200"></iframe>
    <!-- 显示不了的就下载 -->
    <!-- <iframe src="/2_基本html/resource/内部资源.zip"></iframe> -->
    <!-- 与超链接配合使用 -->
    <a href="http://www.taobao.com" target="container">超链接</a>
    <iframe name="container" ></iframe>

全局属性

常用的全局属性

属性名	含义
id	给标签指定一个唯一标识，所有标签的id值是不能重复的
class	给标签指定类名，可以与css，JavaScript配合使用，class值可以相同
style	给表签设置css样式
dir	内容的方向，值：ltr、rtl
title	给标签设置一个文字提示，一般多用于超链接和图片
lang	指定标签语言

meta元信息

在这里插入图片描述

HTML5

一、新增语义化标签

1、新增布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等。	双
section	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。	双
aside	表示侧边栏	双
main	文档的主要内容，几乎不用。	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合（ W3C 将其删除）	双

关于 article 和 section ：

artical 里面可以有多个 section 。
section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。
article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。

2、新增状态标签

1、meter标签

语义：定义已知范围内的标量测量。也被称为 gauge （尺度），双标签，例如：电量、磁盘用量等。
属性：

属性名描述
high 规定高值
low 规定低值
max 最大值
最小值
规定最优值
规定当前值

属性名	描述
high	规定高值
low	规定低值
max	最大值
	最小值
	规定最优值
	规定当前值

2、progress标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。
属性：

属性作用
max 规定目标值
value 规定当前值

属性	作用
max	规定目标值
value	规定当前值

3、新增列表标签

标签名	语义
datalist	用于搜索框的关键字提示
details	用于展示问题和答案，或对专有名词进行解释
summary	写在 details 的里面，用于指定问题或专有名词

	<form action="#">
        <input type="text" list="mydata">
        <input type="submit" value="搜索">
    </form>
    <datalist id="mydata">
        <option value="马冬梅">马冬梅</option>
        <option value="周杰伦">周杰伦</option>
    </datalist>
    <hr>
    <details>
        <summary>有啥问题？</summary>
        <p>没有问题</p>
    </details>

4、新增文本标签

1、文本注音

标签名	语义
ruby	包裹需要注音的文字
rt	写注音， rt 标签写在 ruby 的里面

<ruby>
	<span>你好</span>
	<rt>ni hao</rt>
</ruby>

在这里插入图片描述

2 文本标记

标签名	语义
mark	标记

二、新增表单功能

1、表单控件新增属性

属性名	功能
placeholder	提示文字（注意：不是默认值， value 是默认值），适用于文字输入类的表单控件。
required	表示该输入项必填，适用于除按钮外其他表单控件。
autofocus	自动获取焦点，适用于所有表单控件。
autocomplete	自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用。
pattern	填写正则表达式，适用于文本输入类表单控件。注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合。

2、input 新增属性值

属性名	功能
email	邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url	url 类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number	数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search	搜索类型的输入框，表单提交时不会验证格式
tel	电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range	范围选择框，默认值为 50 ，表单提交时不会验证格式。
color	颜色选择框，默认值为黑色，表单提交时不会验证格式。
date	日期选择框，默认值为空，表单提交时不会验证格式。
month	月份选择框，默认值为空，表单提交时不会验证格式。
week	周选择框，默认值为空，表单提交时不会验证格式。
time	时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local	日期+时间选择框，默认值为空，表单提交时不会验证格式。

3、form表单新增属性

novalidate：如果使用了这个属性，则表单提交时不会验证

四、新增多媒体标签

1、视频标签video

属性	值	作用
src	url地址	指定视频地址
width	像素值	设置视频播放器的显示的宽度
height
controls		显示视频的控制，比如播放，画中画按钮
muted		打开的时候默认经静音
autoplay		打开时自动播放
loop		循环播放
poster	地址	视频封面
preload	auto / metadata / none	视频预加载，如果使用 autoplay ，则忽略该属性。 none : 不预加载视频。 metadata : 仅预先获取视频的元数据（例如长度）。 auto : 可以下载整个视频文件，即使用户不希望使用它

2、视频标签audio

属性	值	作用
src
controls		显示播放等控制音频的按钮
autoplay		自动播放
muted
loop
preload	auto / metadata / none

基本与视频标签video一致

五、新增全局属性

属性名	功能
contenteditable	选择元素是否可以被编辑
draggable	表示元素是否可以被拖动，true或false，选择true表示可以被拖动，元素被拖动不会改变位置
hidden
spellcheck	是否开启拼写检查
contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示。
data-*	规定元素的上下文菜单，在用户鼠标右键点击元素时显示。

六、HTML5兼容性处理

添加元信息，让浏览器处于最优的渲染模式

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->