HTML（笔记）

最新推荐文章于 2024-05-31 09:45:22 发布

早起不洗头

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量140

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_46362614/article/details/127950353

版权

<h1></h1> 标题1~6代表标题字体的大小

<p></p>段落

<b></b>文本

<br/>可以空行和折行

<pre></pre>可以保留文本的格式（适用于代码显示）

<code></code><kbd></kbd><tt></tt><samp></samp><var>/var> 这些都是标签格式

<address></address>地址

<abbr title="etcetera">etc.</abbr>缩写例：etc

<acronym title="World Wide Web">WWW</acronym>首字母缩写例：WWW

<bdo dir="rtl">
Here is some Hebrew text
</bdo>从右边往左输出

<blockquote></blockquote>长引用<q></q>短引用使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

<head></head> HTML中的样式设置

target="_top"跳出框架打开网页（原网页被替换） target="_blank"打开一个新的网页

%20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

align="bottom"图片下对齐 align="middle"图片中对齐 align="top"图片上对齐 align ="left"图片左浮动 align ="right" 图片右浮动

<img>定义图像

<map>定义图像地图

<area>定义图像地图中的可点击区域

表格的标签

<table></table>表格 <table border=“1”>表格加边框 (border=“1” 其中的数字可以改越大越粗）

<th></th>表头（表格的列名）

<caption></caption> （表格标题）

<tr></tr>定义行 &nbsp；空展位符

<th colspan="2">电话</th> 电话这个表头横跨两列单元格

<th rowspan="2">电话</th> 电话这个表头横跨两行单元格

<table border="1" cellpadding="10"> cellpadding单元格格边距（内容到边框的距离）

<table border="1" cellspacing="10">cellspacing单元格见距（单元格之间的距离）

<table border="1" bgcolor="red">表格的背景颜色

<table border="1" background="/i/eg_bg_07.gif">表格的背景图片

<td bgcolor="red">First</td> 单元的背景颜色

<td background="/i/eg_bg_07.gif"> Second</td>单元的背景图片

<th align="left">排列左边</th> <th align="right"> 排列右边</th> 通过align属性排列单元格内容

通过 frame属性来控制围绕单元格的边框

<table frame="box">全部包围

<table frame="above">最上面一条边框

<table frame="below">最下面一条边框

<table frame="hsides">上下各一条边框

<table frame="vsides">左右各一条边框

列表

<ul></ul>无序列表

<ol></ol>有序列表

<li></li>列表的一行

<ol start="50">从第50开始排序

定义列表

<dl></dl>标签开始

<dt></dt>自定义列表的项

<dd></dd自定义列表的定义

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">

HTML <span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

注释：id 名称对大小写敏感！

注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

本章总结

id 属性用于为 HTML 元素指定唯一的 id
id 属性的值在 HTML 文档中必须是唯一的
CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
id 属性的值区分大小写
id 属性还可用于创建 HTML 书签
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

iframe 用于在网页内显示网页，还可以设置长宽高

Iframe - 删除边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

早起不洗头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML（笔记）

id属性用于为 HTML 元素指定唯一的 idid属性的值在 HTML 文档中必须是唯一的CSS 和 JavaScript 可使用id属性来选取元素或设置特定元素的样式id属性的值区分大小写id属性还可用于创建 HTML 书签JavaScript 可以使用方法访问拥有特定 id 的元素iframe 用于在网页内显示网页，还可以设置长宽高。
复制链接

扫一扫