02 html基础系统学习快速上手

最新推荐文章于 2024-07-06 23:14:34 发布

Gbosh

最新推荐文章于 2024-07-06 23:14:34 发布

阅读量82

点赞数

分类专栏： # html 文章标签： html 学习经验分享

本文链接：https://blog.csdn.net/m0_53297256/article/details/128554329

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标签分类

文章目录

标签分类

文字

文字容器
h1-h6	1-6级标题
p	段落

`<b>`	这个文本是加粗的
`<strong>`	这个文本是加粗的
`<big>`	这个文本字体放大
`<em>`	这个文本是斜体的
`<i>`	这个文本是斜体的
`<small>`	这个文本是缩小的
`<sub>`	这个文本包含_下标
`<sup>`	这个文本包含^上标
`<pre>`	被包围在pre标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
`<code>`	`定义计算机输出。用于表示计算机源代码或者其他机器可以阅读的文本内容。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。`
`<kbd>`	`定义键盘文本。以浏览器的默认monospace字体显示。该标签已废弃，不推荐使用，但是可以通过CSS实现丰富的效果。`
`<tt>`	`定义打字机文本`
`<samp>`	`定义样本文本`
`<var>`	`定义变量。`
`<address>`	定义地址文本
`<abbr>`	表示一个缩写词或者首字母缩略词。
`<acronym>`	标签允许明确地声明一个字符序列，它们构成一个单词的首字母缩写或简略语。标签已从 HTML5 中移除，不应再被使用，Web 开发者应使用标签。
`<bdo>`	指定文本方向。
`<q>`	定义短的引用语,对内容文字自动加引号
`<del>`	~~删除效果~~
`<ins>`	下划线效果
`<u>`	下划线效果
`<cite>`	定义作品的标题
`<blockquote>`	定义一个摘自另一个源的块引用
`<dfn>`	定义项目

布局

div	块容器
span	内联容器
nav	导航栏

块标签：自己占一行。
内联标签：可以多个一行直到超出父容器宽度。

示例：

源代码：

<div>
  这里是第1个区域块
</div>
<div>
  这里是第2个区域块
</div>

显示效果：

这里是第1个区域块

这里是第2个区域块

列表

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

示例：

源代码：

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol> 

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

显示效果：

编号列表：

Apples
Bananas
Lemons
Oranges

大写字母列表：

Apples
Bananas
Lemons
Oranges

小写字母列表：

Apples
Bananas
Lemons
Oranges

圆点列表：

Apples
Bananas
Lemons
Oranges

圆圈列表：

Apples
Bananas
Lemons
Oranges

正方形列表：

Apples
Bananas
Lemons
Oranges

嵌套列表：

Coffee
Tea
Black tea
Green tea
China
Africa

Milk

一个自定义列表：

Coffee
- black hot drink
Milk
- white cold drink

图像

请添加图片描述

示例：

源代码：

<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CTSHlr20lMe042Hh8mBfVgHaEK?w=283&h=180&c=7&r=0&o=5&pid=1.7" alt="这里有一张图片"/>

显示效果：

超链接

用<a>标签来定义超链接。

介绍href和target两个属性。

请添加图片描述

URL是URI的子集。

target值	描述
_blank	在新窗口/选项卡中打开。
_self	在同一框架中打开。（默认）
_parent	在父框架中打开。
_top	在整个窗口中打开。
framename	在指定的 iframe 中打开。

示例：

源代码：

<a href="www.baidu.com">百度</a><br>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="tel:10086" target="_self">百度</a>

<!--  <a href="本地文件路径" target="_self">百度</a>  -->

显示效果：

百度

百度

百度

百度

表格

请添加图片描述

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚
border	边框宽度
cellspacing	表格间距
cellpadding	表格填充

示例：

源代码:

<head>
  <style>
  thead {color:green;}
	tbody {color:blue;}
	tfoot {color:red;}
	</style>
</head>
  <table border="1" cellspacing="5px" cellpadding="10px">
  	<caption>表格标题</caption>
  <tr><th colspan="3">该行表头演示列合并</th></tr>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>页脚第1列</td>
      <td>页脚第2列</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>主体1行1列</td>
      <td>主体1行2列</td>
      <td rowspan="3">该区域显示行合并3行效果，不包括页脚</td>
    </tr>
    <tr>
      <td>主体2行1列</td>
      <td>主体2行2列</td>
    </tr>
  </tbody>
</table>

显示效果：

表格标题
该行表头演示列合并
表头1 表头2 表头3
页脚第1列页脚第2列
主体1行1列主体1行2列该区域显示行合并3行效果，不包括页脚。
主体2行1列主体2行2列

表格标题
该行表头演示列合并
页脚第1列	页脚第2列
主体1行1列	主体1行2列	该区域显示行合并3行效果，不包括页脚。
主体2行1列	主体2行2列

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。

表单

form表单：html和服务器通讯的方式。

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了input元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了fieldset元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮
datalist	指定一个预先定义的输入控件选项列表
keygen	用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。效果是保存输入框中输入过的信息，再次点击该输入框会显示上一次输入过的信息。
output	定义一个计算结果

请添加图片描述

示例：

属性	描述
action	规定当提交表单时，向何处发送表单数据。值为URL
method	规定用于发送 form-data 的 HTTP 方法。
for	规定 label 与哪个表单元素绑定。
reset	重置
placeholder	输入框灰色字体输入提示
radio	单选类型（name值相同为一组）
checkbook	多选框

示例：

源代码：

<form action="http://112.74.72.107:3333/try" method="post" target="_blank">
  <label for="name"></label>
	<fieldset>
		<legend>账户:</legend>
		Username: <input type="text" name="Username" value="" placeholder="Username" id="name"><br>
		password: <input type="text" name="password" value="" placeholder="password" id="name"><br>
	</fieldset>
<button type="button" onclick="alert('你好，世界!')">点我弹出信息提示!</button>
<br>
<textarea rows="10" cols="30" placeholder="在这里输入..." id="name">
</textarea><br>
班级<select>
 <option value="c301">三年级1班</option>
 <option value="c302">三年级2班</option>
 <option value="c303">三年级3班</option>
 <option value="c304">三年级4班</option>
</select><br>
 <label for="male">Male</label>
 <input type="radio" name="sex" id="male" value="male"><br>
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" value="female"><br>
  <button type="submit">提交</button><button type="reset">重置</button><br>
<input list="browsers" name="browser">
	<datalist id="browsers">
	  <option value="第一个输入选项">
	  <option value="第二个输入选项">
	  <option value="第三个输入选项">
	  <option value="第四个输入选项">
	  <option value="第五个输入选项">
	</datalist>
<input type="submit" value="input标签type值为'submit'，value默认值'提交'"><br>
用户名: <input type="text" name="usr_name" id="name">
<keygen name="security">
  <button type="submit">提交</button>
<p>点击"提交"按钮，表单数据将被发送到http://112.74.72.107:3333/try”。</p>
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

显示结果：

（功能标签把上述源码放在html中测试，这里仅展示效果。）

账户: Username:
password:
点我弹出信息提示!

班级三年级1班三年级2班三年级3班三年级4班
Male
Female
提交重置

用户名: 提交
点击"提交"按钮，表单数据将被发送到http://112.74.72.107:3333/try”。
0 100 + =

内联框架

示例：

源代码：

<iframe src="https://blog.csdn.net/m0_53297256" width="200" height="200"  name="iframe" frameborder="5"></iframe>
<p><a href="https://blog.csdn.net/m0_53297256?type=download" target="iframe">点击这里查看我的资源</a></p>

显示效果：

点击这里查看我的资源

功能类标签

请添加图片描述

自定义标签

自定义标签就是用户（开发者）自己定义的标签。自定义标签可以让 JSP 页面中不含有 Java 代码，只含有 HTML 代码和部分标签，就能实现业务逻辑的调用。

用表单实现自己的百度

源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gbosh的百度</title>
  </head>
  <body>
    <form action="http://www.baidu.com/baidu" mehtod="get" target="_blank">
      <input type="text" name="word" spacehold="在这里输入..."/>
      <button type="submit">百度一下 
      </button>
    </form>
  </body>
</html>

字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

如需显示小于号，我们必须这样写：&Lt; 或 < 或 <

使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
实体名称对大小写敏感。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	`<`	`<`
>	大于号	`>`	`>`
`&	和号	`&`	`&`
"	引号	`quot;`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
`&`	`&`
"	引号	`quot;`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷

点个赞再走吧在这里插入图片描述

文章目录

标签分类

Gbosh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02 html基础系统学习快速上手

html基础，系统整理，快速上手。
复制链接

扫一扫

专栏目录

该行表头演示列合并
表头1	表头2	表头3
页脚第1列	页脚第2列
主体1行1列	主体1行2列	该区域显示行合并3行效果，不包括页脚。
主体2行1列	主体2行2列

02 html基础系统学习快速上手

标签分类

文章目录

文字

布局

列表

编号列表：

大写字母列表：

小写字母列表：

圆点列表：

圆圈列表：

正方形列表：

嵌套列表：

一个自定义列表：

图像

超链接

表格

表单

内联框架

功能类标签

自定义标签

用表单实现自己的百度

字符实体

文章目录

“相关推荐”对你有帮助么？