HTML基础

321 阅读4分钟

2021年6月5日

1.空格与空行

对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格。

始终为属性值加引号

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

2.<p>标签

<p>标签为段落标签,会自动在标签段落内容的前后增加空行
如果想在不产生新段落的情况下换行,可以使用<br>标签
例: <p>第一天<br>第二天<br>第三天</p>

使用<br>标签换行 使用<p>标签换行

第一天
第二天
第三天

第一天

第二天

第三天

3.<span>标签

<span> 元素是内联元素,可用作文本的容器。
<span> 元素没有特定的含义,当与 CSS 一同使用时,可用于为部分文本设置样式属性。

4.<label>标签

<label> 标签的 for 属性应当与相关元素的 id 属性相同
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

5.<pre>标签

预格式文本保留了空格和换行,非常适合显示计算机代码:

<pre>
for i = 1 to 10
     print i
next i
</pre>

输出:

for i = 1 to 10
     print i
next i

6.<abbr> <acronym>的区别 (abbreviation)

abbr是缩写的意思,而acronym则是首字母缩写
例:<abbr title="August">Aug</abbr>
输出:Aug(将鼠标移至缩略词语上)

<acronym title="HyperText Markup Language">HTML</acronym>
输出:HTML(acronym已弃用?)

7.<blockquote> <q> 长引用与短引用

长引用会插入换行和外边距,短引用则不会
例:

这是长的引用:
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

效果:
这是长的引用:

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

例:

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

效果:

这是短的引用: 使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。

8.<del> <ins>标签 (delete   insert)

<label>My favorite color is <del>blue</del> <ins>red</ins>!</label>
输出:My favorite color is red blue!

2021年6月6日

HTML链接

在当前页面链接到指定位置

<a id="jumpto65">2021年6月5日</a> 
<a href="#jumpto65">跳转至6月5日</a><br>

跳转至6月5日

HTML头部

可以添加在<head>标签中的元素标签有: <title> <style> <script> <link> <meta> <base>

<base>标签

<base> 标签为页面上的所有链接规定默认地址或默认目标(target):

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

距离

cellPadding 单元格内容与其边框之间的空白距离 废弃
cellspacing 单元格之间的距离 废弃
margin 为给定元素设置所有四个方向的外边距属性(margin-top,margin-right,margin-bottom,和 margin-left)

<div>元素

<div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的常见用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。