HTML基础知识整理

最新推荐文章于 2021-01-12 16:40:32 发布

程序员小周

最新推荐文章于 2021-01-12 16:40:32 发布

阅读量911

点赞数

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

本文链接：https://blog.csdn.net/qq_18663357/article/details/52299700

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

空HTML元素的关闭：
从< br >到< /br >

HTML对标签大小写不敏感，但是一般推荐小写

HTML属性：

属性例子 1:
< h1 align=”center”> 拥有关于对齐方式的附加信息。

属性例子 2:
< body bgcolor=”yellow”> 拥有关于背景颜色的附加信息。

属性例子 3:
< table border=”1”> 拥有关于表格边框的附加信息。

始终为属性值加引号：

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name=’Bill “HelloWorld” Gates’

< hr />用于创建水平线

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

<!-- This is a comment -->

预格式文本：
< pre>< /pre>标签可以保证内容中的空格保留

缩写和首字母缩写：

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

块引用：
长引用是< blockquote>< /blockquote>
短引用是< q>< /q>

删除字和引用字效果：
分别是< del>和< ins>

用于联系信息的 HTML < address>

HTML < address> 元素定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

样式使用三种方法：
外部样式表（通过link引入）
内部样式表（head标签里写style）
内联样式表（直接对元素写style=”“）

如何链接到一个页面的不同位置：

<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

图像的alt属性以及title属性
alt属性的内容是当图片不可见时显示，title属性是鼠标移到图标上时显示

表格：

<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

表格的表头：

<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>

表格中的空单元格：

<td>&nbsp;</td>

可以保证这个空单元格不显示，如果没有占位符 &n bsp;
那么这个单元格就会显示

表格标题：

<caption>我的标题</caption>

横跨两列的单元格：

 <tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>

单元格边距：

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

单元格间距：

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

在表格单元中排列内容：

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

无序列表：ul->li
有序列表：ol->li

使用 HTML5 的网站布局：
HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

框架frame
垂直框架


<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

水平框架

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：

<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

</body>

HTML的js脚本文件问题
如果浏览器压根没法识别 < script> 标签，那么 < script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 < script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

HTML头部元素
所有链接一个目标
使用 base 标签使页面中的所有标签在新窗口中打开。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />

<base target="_blank" />
</head>

<body>

<p>
<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。
</p>

<p>
<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。
</p>

</body>
</html>

重定向用户
把用户重定向到新的网址。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

</body>
</html>

HTML < meta> 元素
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：

meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

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

name 和 content 属性的作用是描述页面的内容。

HTML表单元素：

method为get时，表单提交时数据会暴露
method为post时，表单提交时链接数据隐藏

Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

HTML表单输入类型：
text、password、submit、radio、checkbox、button、number、date、color、month、week、time、datetime、email、search、tel、url

HTML表单属性：
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

HTML表单输入限制：
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。