导图社区 HTML总结
- 45
- 3
- 0
- 举报
HTML总结
HTML知识总结，内容包括语义化标签、无语义标签、内容标签、文本标签、功能标签的相关知识，大家一起学起来吧。
编辑于2023-03-01 10:02:13 广东- html
- 相似推荐
- 大纲
HTML总结
语义化标签
标题标签
段落标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <p>-------前端已死，有事烧纸------- 你是不是有很多事情放不下， 做人最重要的是开心嘛， 可是没钱你怎么开心？ </p> </body> </html>
换行标签
子主题
无语义标签
div(块元素)块级元素在浏览器显示时，通常会以新行来开始（和结束）
span(行内元素)内联元素在显示时通常不会以新行开始
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据和HTML <span> 元素是内联元素，可用作文本的容器<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
内容标签
img(图片标签)
<img>
必要属性
src
显示制定的图片
alter
规定图片的替代文本
可选属性
height
width
height和width一般只一个，另外一个会等比例缩放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <img src="../图片/R-C (1).gif" alt="图片没有了" width="500"> </body> </html>
a(超链接标签)
<a href=""></a>
href:规定链接指定的页面url
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <a href="www.baidu.com">我不是百度，你点我试试</a> </body> </html>
target:规定在何处打开链接
_self本页面打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <a href="http://www.bing.com" target="_self">我不是百度，你点我试试</a> </body> </html>
_blank新开页面打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <a href="http://www.bing.com" target="_blank">我不是百度，你点我试试</a> </body> </html>
注释标签
快捷键 ctrl+/
特殊字符
空格( )
大于号(>)
小于号(<)
文本标签
文本格式标签
<b>---bold定义粗体文本
<em>---emphasize定义着重文字
<i>---italic定义斜体字
<sup>---superscript定义上标字
<sub>---subscript定义下标字
文本输出标签
<kbd>---keyboard定义键盘码
<code>---定义计算机代码
<pre>---定义预格式文本
<pre>标签的定义及使用说明： 1、该标签可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，并且文本会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码。 2、该元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。 3、标签中的特殊符号被转换为符号实体，比如 "<" 代表 "<"，">" 代表 ">"。 4、可以导致段落断开的标签（比如<h1>、<p> 和 <address> 标签）尽量不要包含在 <pre> 所定义的块里，我试过现在的浏览器（Google、IE和火狐），虽然可以把段落结束标签解释为简单地换行，但是在代码编辑器里会报错 "Invalid location of tag (h1)."
引用标签
<q>---quote定义短的引用语
<blockquote>定义长的引用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <sup>这个文本是sup标签的效果,-------前端已死，有事烧纸-------</sup> <br> <b>这个文本是加粗的b标签的效果,-------前端已死，有事烧纸-------</b> <br> <strong>这个文本是加粗的strong标签的效果,-------前端已死，有事烧纸-------</strong> <br> <em>这个文本是em标签的效果,-------前端已死，有事烧纸-------</em> <br> <i>这个文本是i标签的效果,-------前端已死，有事烧纸-------</i> <br> <pre>这个文本是pre标签的效果,-------前端已死，有事烧纸-------</pre> <br> <p>我要引用的是q---quote定义短的引用语标签的: <q>-------前端已死，有事烧纸-------</q> </p> <p>我要引用的是blockquote定义长的引用标签的: <blockquote>-------前端已死，有事烧纸-------</blockquote> </p> <sub>这个文本是sub标签的效果,-------前端已死，有事烧纸-------</sub> <br> </body> </html>
功能标签
表格标签(数据展示)
表格基本用法
tr定义表格的行 （注意：tr可以设置高度 不能设置宽度）每一个 <tr> </tr> 就是表格一行。 表格的每一行被分为一个个单元格。tr是table row的缩写 （表格中的一行）
td定义表格单元格 （注意：td可以设置宽度 不能设置高度）表示真正的数据内容,td是table data cell的缩写 （表格中的一个单元格）
th定义表格的表头，一般是表头中的内容会被加黑；(用于表格标题),th是table header cell的缩写 （表格中的表头）
thead ---------表格的页眉
tbody ---------表格的主体
tfoot ---------定义表格的页脚
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <table> <thead> <tr> <th>标题</th> <th>价格</th> <th>数目</th> </tr> </thead> <tbody> <tr> <td>苹果</td> <td>5</td> <td>10</td> </tr> <tr> <td>橘子</td> <td>2</td> <td>1</td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td>""</td> <td>""</td> </tr> </tfoot> </table> </body> </html>
表格属性
align对齐方式
border规定表格边框的宽度
cellpadding单元格内边距
cellspacing单元格间距
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <table border="1" align="center" cellspacing="1" cellpadding="10" > <thead> <tr> <th>标题</th> <th>价格</th> <th>数目</th> </tr> </thead> <tbody bgcolor="#fff" > <tr> <td>苹果</td> <td>5</td> <td>10</td> </tr> <tr> <td>橘子</td> <td>2</td> <td>1</td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td>""</td> <td>""</td> </tr> </tfoot> </table> </body> </html>
列表标签(布局)
有序
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 列表项使用数字来标记。
ol是ordered lists的缩写（有序列表）li是list item的缩写 （列表项目）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <ol> <li>菠萝</li> <li>西瓜</li> <li>橘子</li> <li>香蕉</li> </ol> </body> </html>
无序
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 <ul> 标签
ul是unordered lists的缩写 (无序列表)li是list item的缩写 （列表项目）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <ul> <li>菠萝</li> <li>西瓜</li> <li>橘子</li> <li>香蕉</li> </ul> </body> </html>
自定义
自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
dl是definition lists的英文缩写 (自定义列表),dt是definition term的缩写 (自定义列表组),dd是definition description的缩写（自定义列表描述）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <dl> <dt>菠萝</dt> <dd>-------菠萝吃多了容易烂嘴-------</dd> <dt>西瓜</dt> <dd>-------西瓜好吃，但是有点小贵-------</dd> <dt>橘子</dt> <dd>-------橘子吃多了容易上火-------</dd> <dt>香蕉</dt> <dd>-------香蕉吃多了容易拉肚子-------</dd> </dl> </body> </html>
form表单(获取用户信息)表单控件
input type属性的值
<input type="text">---单行输入字段
<input type="submit">---定义提交按钮当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。 action 属性会对接收到的用户输入数据进行相关的处理:以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值： post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。 get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
<input type="checkbox">定义了复选框
<input type="password">密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代
<input type="radio"> 标签定义了表单的单选框选项
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <form name="test" action="https://www.runoob.com/?page=1" method="get"> <b><i>这是input type is text测试</i></b> <input type="text" name="input type is text"><b><i>这是input type is text测试</i></b><br> <b><i>这是input type is password测试</i></b><input type="password" name="pwd"><b><i>这是input type is password测试</i></b><br> <b><i>这是input type is radio测试</i></b><input type="radio" name="radio"> <b><i>这是input type is radio测试</i></b><br> <b><i>这是input type is checkbox测试</i></b><input type="checkbox" name="cb"> <b><i>这是input type is checkbox测试</i></b><br> <b><i>这是input type is submit测试</i></b><input type="submit" name="submit" value="提交"><b><i>这是input type is submit测试</i></b> </form> </body> </html>
label,定义了 <input> 元素的标签，一般为输入标题
select ,定义了下拉选项列表
option,定义下拉列表中的选项
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>测试</title> </head> <body> <form name="test" > <b><i>这是input type is text测试</i></b> <input type="text" name="input type is text"><b><i>这是input type is text测试</i></b><br> <b><i>这是input type is password测试</i></b><input type="password" name="pwd"><b><i>这是input type is password测试</i></b><br> <b><i>这是input type is radio测试</i></b><input type="radio" name="radio"> <b><i>这是input type is radio测试</i></b><br> <b><i>这是input type is checkbox测试</i></b><input type="checkbox" name="cb"> <b><i>这是input type is checkbox测试</i></b><br> <b><i>这是input type is submit测试</i></b><input type="submit" name="submit" value=""><b><i>这是input type is submit测试</i></b><br> <select> <option value="香蕉">香蕉</option> <option value="橘子">橘子</option> <option value="菠萝">菠萝</option> <option value="苹果">苹果</option> </select> <br> <label>这是label测试</label> </form> </body> </html>