HTML——基础知识点总结-阿里云开发者社区

HTML——基础知识点总结

2023-09-06 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML——基础知识点总结

一.HTML简介

1.HTML

HTML(HyperText Markup Language),超文本标记语言，使用各种标记来表示文档的结构以及标识超链接的信息。

2.HTML文档

HTML文档包含了标签及文本内容，并且 html 文档也叫做 web 页面。

二.HTML基本结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 菜鸟教程（runoob.com）</title>
<body>
</body>
</html>

<！DOCTYPE html>声明为HTML文档

<html>是HTML页面的根元素

<head>包含了文档的元数据

<title>显示在浏览器标题栏的标题

<body>是网页的主体，网页内容的主要展示部分

注意：

1.标记的使用一般要成对出现，要包含开始标记和结束标记

2.标记可以嵌套使用，但不可以交叉使用

3.多个属性之间使用空格分割，不同的标记属性可能相同也可能不同

4.属性中使用的标记中，只能对本标的内容产生影响

三 .HTML

1.标题标签

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

标题标记会使字体加粗显示，带有自动换行

1-6级中，1级标题最大

2.段落标签

 <p>这是一个段落。</p>
 <p>这是另一个段落。</p>

段落标签把内容分段展示，自动换行

3.换行标签

<br/>是单标记，不需要结束标记

4.链接标签

<a></a>超链接标记

属性：herf设置超链接的访问地址

5.图像标签

<img>是单标签，没有结束标记

属性：src设置图片的路径

width 和 height设置图片的宽和高

6.格式化标签

文本格式化包含加粗字体，斜体文本，电脑自动输出，下标和上标

<b>加粗字体</b>
<big>放大字体</b>
<em>斜体字体</em>
<i>斜体字体</i>
<small>缩小字体</small>
<sub>下标</sub>
<sup>上标</sup>
<del>删除字</del>
<ins>插入字</ins>

7.注释标签

<!--注释-->

8.表格标签

<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

9.列表标签

<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

10.和

<div>元素是块级元素，它可用于组合其他HTML元素的容器，另一个常见用途是文档布局

<span>元素是内联元素，可用作文本的容器，没有特定的含义

11.表单标签

表单元素是允许用户在表单内输入内容

比如：

文本域 (Textareas)
单选按钮(Radio buttons)
复选框（Checkboxs）
下拉列表
提交按钮(Submit Button)

<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldset>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮

12.脚本标签

<script>定义了客户端脚本
<noscript>定义了不支持脚本浏览器输出的文本

13.value属性

value属性使用在提交，重置，自定义按钮中

input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的
当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本
当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值

按钮中用的value 指的是按钮上要显示的文本比如“确定”“删除”等
复选框用的value 指的是这个复选框的值
单选框用的value 和复选框一样
下拉菜单用的value 是列表中每个子项的值
隐藏域用的value 是框里面显示的内容

14.name属性

name 属性规定 input 元素的名称

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的，没有 name 属性就无法得到表单元素提交给服务端的值性

四.网页作业源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>征婚啦！(runoob.com)</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>生日</td>
<td>  
<select>
<option>--请选择年--</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<optio>1998</option>
</select>
<select>
  <option>--请选择月--</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
<select>
<select>
  <option>--请选择日--</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
  <td>
  <input type="text" name=" ">
</td>
</tr>
<tr>
<td>婚姻状况</td>
  <td>
  <input type="radio" name="marry" value="未婚的">未婚的
  <input type="radio" name="marry" value="已婚的">已婚的
  <input type="radio" name="marry" value="离婚的">离婚的
</td>
</tr>
<tr>
<td>学历</td>
<td>
  <input type="text" name=" ">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
  <input type="checkbox" name="type" value="妩媚的">妩媚的
  <input type="checkbox" name="type" value="可爱的">可爱的
  <input type="checkbox" name="type" value="小鲜肉">小鲜肉
  <input type="checkbox" name="type" value="老腊肉">老腊肉
  <input type="checkbox" name="type" value="都喜欢">都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit"value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<h5>我承诺</h5>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</body>
</html>

HTML——基础知识点总结

一.HTML简介

二.HTML基本结构

三 .HTML

四.网页作业源代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML——基础知识点总结

一.HTML简介

二.HTML基本结构

三 .HTML

四.网页作业源代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景