HTML5笔记
|
62
|
0
|
Dayearg

887 字
|
7 分钟

本文大多数内容（几乎所有）都来自于W3school，只是做了大幅度的删减，可以让后端程序员掌握一些HTML的基础，当然这个东西我自己都不会，凑合着看，看不明白，请认准W3school。

常用的标签

以下列出常见的属性，完整属性参考：完整的 HTML 参考手册。

属性值描述
classclassname规定元素的类名（classname）
idid规定元素的唯一 id
stylestyle_definition规定元素的行内样式（inline style）
titletext规定元素的额外信息（可在工具提示中显示）
常用的HTML属性

标题

标题通过 <h1> – <h6>来定义。

  • 浏览器会自动地在标题的前后添加空行。
  • 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

水平线

<hr /> 标签在 HTML 页面中创建水平线。

<p>段落1</p>
<hr />   <!-- 推荐使用闭合标签 -->
<p>段落2</p>

段落

使用<p>标签，参考以上实例

换行

需要换行，但不需要产生一个新段落时，可以使用 <br />标签

<p>同一段落的第一行<br />同一段落的第二行</p>
  • 所有连续的换行和空格，均会被处理成同一个，所以连续使用也无法改变页面结构

style样式

利用CSS来改变元素的样式，本部分内容将会介绍一些简单的CSS知识。

格式化

本部分在W3school中有较为详细的阐述和例子，学习本部分内容，请移步：W3school-HTML 文本格式化

引用

本部分在W3school中有较为详细的阐述和例子，学习本部分内容，请移步：W3school-HTML引用

样式

样式分为外部样式，内部样式和内联样式。

可通过在head部分<link>标签来指定外部样式表，适用于单个CSS文件，处理多个页面。

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

通过在head部分使用<style> 标签定义内部样式表，适合单个文件使用特别样式。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

通过内联的方式在元素内指定样式属性。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

链接

<a href="url">Link text</a>

表格/列表

此部分在实际应用中，经常使用一些UI组件库进行代替，所以不过多阐述，还是推荐参考W3school的文档。

表格

列表

块/类

<div> 和 <span>均用于HTML元素的分块，并无实际含义，可以借助这些标签灵活的设置CSS样式

HTML的类与面向对象的编程语言类并没有任何联系，可以用于快捷的设置CSS样式，方便CSS代码的复用。通常与<div>一并使用。

下面给出W3school上的一段示例代码

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

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

你可以在这里查看效果。

id

这个部分非常重要，推荐仔细阅读W3school相关文档。

另外还需要研究HTML的表单，SVG的图片插入等等，稍等一段时间再更新。