html相关内容以及标签的使用方法

不念不忘少年蓝@ 2021-09-15 02:00 414阅读 0赞

html超文本标签语言

首先说一下浏览器的内核

![70][]

五大主流内核

Trident（ie内核）     ie

Gecko (friefox)            火狐浏览器

chrome (blink)                谷歌浏览器

webkit    (safari）           苹果浏览器   
  
opera   （blink）            欧朋浏览器

![70 1][]

代码标签：

<p></p>段落标签

<br>换行标签

<h></h>作为标题使用，并且依据重要性递减

<hr />水平线标签

页面布局的两个盒子

<div></div>缩写 分割

<span></span>跨度 范围

无序列表

<ul>

</ul>

![70 2][]

有序列表 ol

<ol>

</ol>

自定义列表

<dl>

</dl>

后面的语意更加强烈，推荐后面的

<b></b>    <strong></strong>  加粗

<i></i>       <em></em>倾斜

<s></s>          <del></del>加删除

<u></u>                <ins></ins>加下划线

图片标签

基本图像的插入方式

<img    src=“图像url”/>

带有alt的图像       alt  替换文本

<img   src=“图像url”alt=“”/>

带有title的图像

<img   src=“图像url”title=“”/>

带有宽度高度

<img   src=“图像url”title=“” width=“” height=“”/>

带有边框的图像border

<img   src=“图像url”title=“” width=“” height=“”border=“”/>

border    设置表格的边框

cellspacing   设置单元格与单元格边框之间的空白间距

cellpadding   设置单元格内容与单元格边框之间的空白间距

width  设置表格宽度

height  设置表格高度

align  设置表格在网页的水平对齐方式

align=“ ”             居左  left   居中 center   居右right

<table>  表格标签

<tr> </tr>  用于定义表格中的行   只能嵌套td标签

<td></td>单元格标签 必须在<tr>标签中  一对<tr>可以包含多个<td>标 签   可以容纳所有的元素

</table>

表头标签        将表格中的第一行或者第一列，其文本加粗居中

表头<thead></thead>

主体部分<tbody></tbody>

表格的标题标签<caption></caption>

合并单元格   跨行合并   rowpan=“”       跨列合并colspan=“”

链接标签                                     目标窗口的弹出方式

<a    href=“跳转目标”target=“\_blank”>文本或图像</a>

target=“\_self”

特定的网页当前窗口打开

瞄点定位

<a  href=“\#名”>名称</a>

使用相应的id名标跳转目标的位置

base标签

<base  target=“\_blank”/>

![70 3][]

textarea表单控件  文本域

下拉菜单

</select>

![70 4][]

![70 5][]![70 6][]

html5常用的新标签

![70 7][]

![70 8][]

![70 9][]

![70 10][]

<ahref="http://www.runoob.com/"target="\_blank"></a>你可以定义被链接的文档在何处显示

target=""\_blank" 链接将在新窗口打开

无边框的图片链接:

居中对齐

style="text-align:center;

**iframe语法:**

该URL指向不同的网页。

<iframesrc="demo\_iframe.htm"width="200"height="200"></iframe>

frameborder 属性用于定义iframe表示是否显示边框

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe\_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

## 与 HTML 相比最重要的区别： ##

### 文档结构 ###

*  XHTML DOCTYPE 是强制性的
 *  <html> 中的 XML namespace 属性是强制性的
 *  <html>、<head>、<title> 以及 <body> 也是强制性的

### 元素语法 ###

*  XHTML 元素必须正确嵌套
 *  XHTML 元素必须始终关闭
 *  XHTML 元素必须小写
 *  XHTML 文档必须有一个根元素

### 属性语法 ###

*  XHTML 属性必须使用小写
 *  XHTML 属性值必须用引号包围
 *  XHTML 属性最小化也是禁止的

[70]: /images/20210813/a85ba1be51844172a955d44ecf053125.png
[70 1]: /images/20210813/c97fa3d6afc34206b2d0d43a88cf02e8.png
[70 2]: /images/20210813/fd9ab67f7f9144629d2ec57e47f40417.png
[70 3]: /images/20210813/c00c8576e12b4e518c36a9b04056af46.png
[70 4]: /images/20210813/3e46b1e1bded40028dece31166ff5935.png
[70 5]: https://img-blog.csdn.net/20180324110821519?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: /images/20210813/22696a705b5648d8bc2c43e9251f3dda.png
[70 7]: /images/20210813/51245b6b80734b2689bce156d7a22812.png
[70 8]: /images/20210813/4ba554d93ad9445dad49b3b44ec95de3.png
[70 9]: /images/20210813/d039b119f28c42068790b3f1e336e251.png
[70 10]: /images/20210813/af0a918eb29648c99e0cbf9169c39764.png