Html5总结-CSDN博客

本文链接：https://blog.csdn.net/wyl614548134/article/details/140873260

前端学习

html决定页面的结构css决定页面的样式js决定页面的行为

Html5

1.文本格式化标签（熟记）
你在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记
在这里插入图片描述
2.标签属性
例如：

<hr width="400">
1.属性采用的是“键值对”的形式，key = "value" 格式。
2.属性不分先后顺序！
3.任何属性都有默认值，忽略该属性则取默认值。

3.图像标签img
在这里插入图片描述
4.链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
这里的a是单词anchor的缩写，意思是铁锚，锚。
1. href:用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
href全称Hypertext Reference.
提醒一下：
如果还不想添加url地址，可以使用" # "来代替一下。
这里的链接不仅仅可以添加网址还可以添加图片，影像之类的。
2. target:制定链接页面的打开方式，有两种取值，self和blank。
blank也可以写成" _blank "(固定写法)。
例如下面的百度链接就是用以下语句写的：
<a href="http://www.baidu.com" target="blank">百度链接</a>

5.锚点定位

通过锚点链接可以快速的定位到目标内容。
很好理解在a标签中加入了id的属性：
例如：
<a href="#biaoqian">定位到数字1那里去</a>
<a id="biaoqian">数字1</a>
这里很简单两个命令，就是通过href属性然后定位到了id的属性，很好理解。

6.特殊字符
在这里插入图片描述
7. base标签

base可以设置整体的链接的打开状态。
规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。


规定页面上所有链接的默认 URL 和默认目标：
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
 
<body>
<img src="logo.png" width="24" height="39" alt="Stickman">
<a href="http://www.runoob.com">runoob.com</a>
</body>

8.div span标签

定义和用法
<div> 标签定义 HTML 文档中的分割或部分（分区或小节，division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
任何类型的内容都可以放在 <div> 标签内！<div> 标签可用作 HTML 元素的容器，然后使用 CSS 设置样式或使用 JavaScript 进行操作。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。通过使用 class 或 id 属性，可以轻松地对 <div> 标签设置样式。
注意：默认情况下，浏览器总是在 <div> 元素前后放置一个换行符。
用法
<div> 是块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

9.无序列表ul
ul> 元素表示无序的项目列表，通常渲染为项目符号列表。
在这里插入图片描述
10.有序列表ol

<body>

        你们喜欢看的电影：

        <ol>
            <li>速8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol>

</body>

在这里插入图片描述
11.自定义列表

<dl>
	<dt>...</dt>
	<dd>...</dd>
	<dd>...</dd>
	...
	<dt>...</dt>
	<dd>...</dd>
	<dd>...</dd>
</dl>
这里dd标签是来解释dt标签的。
例如：
	<dl>
	<dt>北京</dt>
	<dd>昌平</dd>
	<dd>通州</dd>
	<dd>顺义</dd>
	</dl>
结果如下：
北京
	昌平
	通州
	顺义

12.font标签

<font> 规定文本的字体、字体尺寸、字体颜色。

13.table中的caption标签

在这里插入图片描述
14.select 和 option 标签

15.input属性type="radio"用法和 label的for属性

单选按钮(单选框)：就是讲input的type属性赋值为radio。

首先，我们点击label标签中的内容，从而让input单选按钮被选中。

这就用到label中的for属性，来指向input的id值！

此外，必要时候，我们声明的name属性必须相同。

在这里插入图片描述
16.表单域

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

在这里插入图片描述
17.input输入表单元素

<input type="属性值" />

type 属性的属性值及其描述如下：
在这里插入图片描述
18.label标签
label 标签为 input 元素定义标注（标签）
标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />