HTML系统学习（基础）

最新推荐文章于 2022-11-06 18:18:45 发布

会变强的小魔女

最新推荐文章于 2022-11-06 18:18:45 发布

阅读量560

点赞数

文章标签： html

本文链接：https://blog.csdn.net/CSDN_09/article/details/104426565

版权

学习内容来自w3school
重来一遍，从基础开始，冲呀~

HTML 基础

元素

< body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 < body>，以及一个结束标签 < /body>
< html> 元素定义了整个 HTML 文档。
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。比如，< br> 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 属性

HTML 标签可以拥有属性。属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。
例如：< h1 align=“center”> 拥有关于对齐方式（居中）的附加信息。
始终为属性值加引号

HTML 标题

通过 < h1> - < h6> 等标签进行定义的，标题字体加粗且大小由大到小
仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。
搜索引擎使用标题为您的网页的结构和内容编制索引。

HTML 水平线
< hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

HTML 段落

浏览器会自动地在段落的前后添加空行。（< p> 是块级元素）

HTML 折行
如果希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签：

输出-有用的提示
无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

HTML 样式

style 属性用于改变 HTML 元素的样式。

实例 - 背景颜色

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

实例 - 字体、颜色和尺寸

<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

实例 - 文本对齐

<h1 style="text-align:center">This is a heading</h1>

HTML 链接

超文本的基本特征就是可以超链接文档；你可以指向其他位置，该位置可以在当前的文档中、局域网中的其他文档，也可以在因特网上的任何位置的文档中。

超链接（hyper text），或者按照标准叫法称为锚（anchor），是使用 < a> 标签标记的。
有两种使用 < a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

target属性
实例：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

target 属性设置为 “_blank”，该链接会在新窗口中打开。

name属性

name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。
使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
可以使用 id 属性来替代 name 属性，命名锚同样有效。

例：点击“查看 chapter4”跳转到如下图右所示章节，类似于目录
在这里插入图片描述提示
命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。

HTML 图像

语法：< img src=“url” />

替换文本属性（Alt）
在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。
< img src=“boat.gif” alt=“Big Boat”>

例子：
1、图像背景，如果图像小于页面，图像会进行重复

<body background="/i/eg_background.jpg">

2、设置对齐方式的图像
在这里插入图片描述 3、可以将图像作为一个链接
4、创建带有可供点击区域的图像地图，每个区域都是一个超级链接

5、显示图标各个位置坐标,使用 form +input

HTML 表格

表格由 < table> 标签来定义。每个表格均有若干行（< tr> 标签），每行被分割为若干单元格（< td> 标签）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
在这里插入图片描述表头
< th >标签

<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>

更多实例：

没有边框的表格
垂直的表头
空单元格： “& nbsp;”
带标题的单元格`

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>`

横跨两列的单元格：

<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>

在这里插入图片描述
横跨两行的单元格：
< th rowspan=“2”>电话< /th>

表格内的标签
在表格内再显示段落、表格、列表
单元格边距(Cell padding)
单元格内容与其边框之间的空白，类似内边距
单元格间距(Cell spacing)
增加单元格之间的距离，类似外边距
向表格添加背景颜色或背景图像
<table border="1" bgcolor="red">
向表格单元添加背景颜色或者背景图像
向一个或者更多表格单元添加背景：<td bgcolor="red">First</td>
在表格单元中排列内容

 <th align="right">一月</th>

框架(frame)属性

HTML 列表

无序列表
< ul>标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk
有序列表
有序列表也是一列项目，列表项目使用数字进行标记。

更多实例：

不同类型的无序列表<ul type="square"> 即列表图标为方块
不同类型的有序列表<ol type="A"> 字母列表
嵌套列表

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

定义列表

HTML 表单

< form>元素定义 HTML 表单: 用于搜集不同类型的用户输入。
HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
在这里插入图片描述

< input>元素，最重要的表单元素。根据不同的 type属性

method属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：<form action="action_page.php" method="GET">

GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，GET 最适合少量数据的提交。浏览器会设定容量限制。
POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

name属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：
在这里插入图片描述

< fieldset> 元素
组合表单中的相关数据，< legend> 元素为 < fieldset> 元素定义标题。

Form 属性
HTML 元素，已设置所有可能的属性，其列表如下：
在这里插入图片描述

HTML 表单元素

< input> 元素
< select> 元素（下拉列表）

< option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项。
< textarea> 元素
定义多行输入字段（文本域）
< button> 元素：定义可点击的按钮<button type="button" onclick="alert('Hello World!')">点击我!</button>

在这里插入图片描述

< datalist> 元素： < input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。

HTML 输入类型

text
password
submit
radio 单选按钮
checkbox 复选框
button
number
color
range
month
week
time
datetime
search

HTML 输入属性

value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。不会被提交。
size 输入字段的尺寸（以字符计）
maxlength 输入字段允许的最大长度
autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
novalidate 规定在提交表单时不对表单数据进行验证。
autofocus 属性:布尔属性。如果设置，则规定当页面加载时 < input> 元素应该自动获得焦点
min 和 max 属性规定 < input> 元素的最小值和最大值。
适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
multiple 属性是布尔属性。
如果设置，则规定允许用户在 < input> 元素中输入一个以上的值。适用于输入类型：email 和 file。
pattern 属性
pattern 属性规定用于检查 < input> 元素值的正则表达式。适用于以下输入类型：text、search、url、tel、email、and password。
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。
没有写全…

会变强的小魔女

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML系统学习（基础）

学习内容来自w3school重来一遍，从基础开始，冲呀~HTML 基础元素< body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 < body>，以及一个结束标签 < /body>< html> 元素定义了整个 HTML 文档。空的 HTML 元素没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的...
复制链接

扫一扫