html总结

weixin_45819310

已于 2022-07-18 18:17:59 修改

阅读量277

点赞数

分类专栏： html 文章标签： html 前端

于 2022-07-18 17:55:10 首次发布

本文链接：https://blog.csdn.net/weixin_45819310/article/details/125856825

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标题

标题（Heading）通过 h1 - h6 标签进行定义

<h1>标题1</h1>
<h2>标题2</h2>
    .
    .
    .
<h6>标题6</h6>

html水平线

在HTML中

用于创建水平线，分割内容

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

标题标签

标签	描述
html	定义html文档
body	定义文档主体
h1-h6	定义html标题
hr	定义水平线

段落

通过

定义

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

html拆行

在不产生新段落下换新行，使用br

<p>这个<br>段落<br>厌世脸分行的效果</p>

由于
元素是一个空的HTML元素，使用关闭标签没意义，所以没有结束标签。

段落标签

标签	描述
p	段落
br	插入单个拆行（换行）

文本格式化

使用b标签(“bold”)输出粗体，i标签(“italic”)输出斜体

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>

常标签 strong 替换加粗标签 b 来使用, em 替换 i标签使用。

使用b 与i 定义粗体或斜体文本，而strong 或者 em意味着你要突出显示。

文本格式化标签

标签	描述
b	粗体
em	着重文字
i	斜体
small	小号字
strong	加重语气
sub	下标
sup	上标
ins	插入
del	删除

链接

html链接语法

<a href="url">链接文本</a>

a标签链接target属性

<a href="https://www.runoob.com" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

_blank 在新窗口中打开网页;

链接id属性

id 属性可用于创建一个HTML文档书签。

<!-- 在HTML文档中插入ID -->
<a id="tips">提示部分</a>
<!-- 在HTML文档中创建一个链接到"提示部分(id="tips"） -->
<a href="#tips">访问提示部分</a>

头部

head标签

所有的头部标签元素，可以添加在头部区域的元素标签为: title, style, meta, link, script, noscript 和 base。

base标签

base标签是HTML文档中所有链接标签的默认链接。

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

link标签

标签定义了文档与外部资源之间的关系，通常用于链接到样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

style标签

标签style定义了html文档的样式文件引用地址

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

meta标签

标签meta提供元数据，不会显示在页面上

meta元素通常用于指定网页的描述、关键词、文件的最后修改时间，作者，和其他元数据。

实例

定义搜索引擎关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

定义网页描述内容

<meta name="description" content="免费 Web & 编程 教程">

head元素标签

标签	描述
head	文档信息
title	文档标题
base	页面链接标签的默认链接地址
link	文档和外部资源之间的关系
meta	HTML文档中的元数据
script	客户端的脚本文件
style	HTML文档的样式文件

样式 - CSS

CSS用于渲染HTML元素标签的样式

实例

更改h1标题和段落颜色

<style type="text/css">
h1 {
    color:red;
    }
p {
    color:blue;
    }
</style>

没有下划线的链接

<a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>

链接到外部样式表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>
</html>

内联样式

在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。如，段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

背景颜色

定义了元素的背景颜色属性，如：页面背景、标题背景、段落背景等

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

字体属性

使用 font-family 字体，color 颜色，font-size 字体大小，定义字体属性

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

文本对齐方式

使用text-align指定文本的对齐方式

<h1 style="text-align:center;">居中对齐</h1>
<p>段落</p>

样式表

当单个文件需要特别样式时，就可以使用内部样式表。在head 部分通过 style标签定义内部样式表

<head>
<style type="text/css">
body {
    background-color:yellow;
    }
p {
    color:blue;
    }
</style>
</head>

当样式需要被应用到很多页面的时候，可以使用外部样式，通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML样式标签

标签	描述
style	文本样式
link	资源引用地址

图像

图像标签和源属性

图像由定义

<img src="url" alt="some_text">

Alt属性

定义一串预备的可替换文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

<img src="boat.gif" alt="Big Boat">

title属性

鼠标悬停在图片上时，出现的提示性文字

<img src="images/pic.jpg" alt="图片" title="这是一张图片">

图像的高度和宽度

指定图像的高度和宽度

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

实例

文字中插入图像

<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

图像的位置

<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 图片在文本的左边
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 图片在文本的右边

图像超链接

<p>有边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32"></a></p>

<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32"></a></p>

带有可供点击区域的图像地图

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

图像标签

标签	描述
img	图像
map	图像地图
area	图像地图中可点击区域

表格

html表格

使用table定义表格，定义单元格的内容，如：文本、图片、列表等

表格和边框

设置表格的边框和内容

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

表格表头

使用th定义表格表头

<table border="1">
    <tr>
    	<th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
    	<td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
</table>

实例

没有边框的表格

<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

带标题的表格

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

跨行或跨列的表格单元格

跨列：在th标签中使用colspan跨行：在th标签中使用rowspan

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

单元格边距

使用cellpadding 创建单元格内容与其边框之间的空白

<table border="1" cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

单元格间距

使用cellspacing增加单元格之间的距离

<table border="1" cellspacing="5">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

表格标签

标签	描述
table	表格
th	表头
tr	行
td	单元格内容
caption	表格标题
colgroup	表格列的组
col	表格列的属性

列表

无序列表

使用ul标签，列表项目使用粗体圆点标记

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

有序列表

=使用ol标签，列表项目使用数字进行标记

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

自定义列表

使用dl，每个自定义的列表项目使用dt，每个自定义列表项的描述使用dd

<dl>
    <dt>北京</dt>
    <dd>中国的首都</dd>
    <dd>中国的政治中心</dd>
    <dd>中国的文化中心</dd>
</dl>

实例

不同类型的有序列表

<ol>
 <li>Apples</li>
 <li>Bananas</li>
</ol>  

<ol type="A">
 <li>Apples</li>
 <li>Oranges</li>
</ol>

不同类型的无序列表

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

列表标签

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

布局

div元素

html中布局通常使用div标签，每一个div标签独占一行，是一个块元素。

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>

表格布局

html中布局可以使用div或table

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>

表单

使用form标签，用户在表单中输入内容,如：文本域(textarea)、下拉列表、单选框(radio-buttons)等。

文本域(Text Fields)

文本域通过或标签来设定

<form>
    First name:<input type="text name" name="firstname"><br> 单行输入
    
    <textarea rows="10" cols="30">Question</textarea>  多行输入
</form>

单选按钮(Radio Buttons)

标签input type="radio"定义表单单选按钮

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

复选框(Checkboxes)

标签input type="checkbox"定义复选框，从给定的选项中可以选择一个或多个

<form>
    <input type="checkbox" name="vehicle" value="car">Car<br>
    <input type="checkbox" name="veicle" value="bus">Bus<br>
    <input type="checkbox" name="vehicle" value="taxi">Taxi
</form>

提交按钮

标签input type="submit"定义提交按钮

<form name="input" action="form_action.php" method="get">
    Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

实例

下拉列表

下拉列表使用select

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

带边框的表单

边框使用fieldset,标签legend定义fieldset标题

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

input 输入的类型

颜色选择
<input type="color"><br>
日期选择
<input type="date"><br>
datetime-local
<input type="datetime-local"><br>
month
<input type="month"><br>
week
<input type="week"><br>
时间选择（几点几分）
<input type="time"><br>
range
<input type="range"><br>
文件上传
<label for="upfile">文件上传</label>
<input type="file" id="upfile">

其它标签

ruby 注释 rt注释标题，类似在汉字上标注拼音

<ruby>
	你好<rt>ni hao</rt>
    阿西吧<rt>叹气</rt>
</ruby>

datalist 可选列表，看上去是一个输入框，当鼠标放在可选列表上时会出现一个向下的下拉菜单箭头

<datalist id="gender_list">
	<option>男</option>
    <option>女</option>
    <option>其它</option>
</datalist>

details 折叠信息 summary 信息标题 open显示隐藏信息（details和open放在一个标签内使用）

<details open="">
	<summary>电脑配置</summary>
	<p>内存: 16G</p>
    <p>双卡双待</p>
</details>

figure 注释、标记，一般用于图片 figcaption 元素标题

<figure>
	<figcaption>这是一个图片</figcaption>
	<img src="img/1.jpg" alt="" />
</figure>

在文本框中输入时显示的提示性文字，在input标签中使用placeholder属性

<input type="name" placeholder="请输入名字">

字符实体

左尖括号和右尖括号（<>） &lt；&gt；

空格 &nbsp；