前端“复读”-- HTML基础_html不富html不副html不服html不付html不傅-优快云博客

本文链接：https://blog.youkuaiyun.com/typhoonpython/article/details/116939255

HTML基础

HTML标题

HTML的标题是通过<h1> - <h5>等标签定义的。
双标签。

HTML段落

段落是<p>标签。
双标签

HTML链接

链接是<a>标签。内置herf属性，用于设置链接，点击时跳转指定的网址。
双标签。

HTML图像

图像通过<img>标签定义
通过src属性设置图片路径进行访问。

HTML元素

HTML元素指的是从开始标签到结束标签的所有代码。

HTML元素语法

HTML元素以开始标签起始，以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素有空内容
空元素在开始标签中进行关闭
大多数HTML元素拥有属性

嵌套的HTML元素

大多数HTML元素可以进行嵌套，HTML文档由嵌套的HTML元素构成

示例

<p>This is my first paragraph.</p>
<!--p标签之间的内容为嵌套内容-->

<body>
<p>This is my first paragraph.</p>
</body>
<!--body定义了HTML的主体，主体内部嵌套了p标签-->

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
<!--html元素定义了整个HTML文档，元素内容是body-->

注：对于双标签一定不要忘记结束标签。

空的HTML元素

没有内容的HTML元素称之为空元素。空元素在标签内部进行关闭。
用于换行定义的<br>就是一个空元素。需要在内部进行关闭，像这样： <br />

注：HTML标签对于大小写不敏感，但是推荐使用小写标签，在未来的版本中会强制使用小写

HTML属性

HTML属性就是为元素提供一些附加信息。

特点

属性总是以名称/值对的形式出现，比如： name = “value”
属性总是在HTML元素的开始标签中规定。

属性实例

以a标签为例：

<a href="http://www.w3school.com.cn">This is a link</a>
<!--href属性指定链接的实例地址-->

<h1 align="center">
<!--align属性使标题居中显示-->

<body bgcolor="yellow">
<!--bgcolor属性用于设置背景色-->

注：属性和属性值对于大小写不敏感，同样推荐使用小写。属性值始终要添加引号。

HTML标题

在HTML文档中标题很重要。

HTML标题

浏览器会自动的在标题的前后添加空行
默认情况下，HTML会自动的在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

HTML水平线

<hr />标签在HTML页面中用于创建水平线。
hr员孙可以用于分割内容。

HTML段落

在HTML中段落是使用<p>标签定义的。
浏览器会自动在段落的前后添加空行。（p标签是块级元素）

注：使用空的段落标记<p></p>去插入一个空行不是一个好习惯，用<br/>去替代它；千万不要忘记结束标签！！！

HTML折行

如果希望在不产生一个新段落的情况下进行换行，使用<br />标签。

HTML样式

style属性用于改变HTML元素样式。style属性提供了一种改变所有HTML元素样式的通用方法。

示例：

<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>

<p style="font-family:times;color:green">
This text is in Times and green</p>

注：不推荐对于样式的修改使用style属性去修改，当样式很多的时候你的代码将会变得非常难读，建议引入外部CSS样式。

HTML格式化

HTML提供了很多格式化输出的元素，比如粗体斜体字。

标签	描述
<b>	定义粗体文字
<big>	定义大号字
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML CSS

当浏览器读到一个样式表的时候，就会按照这个样式表对文档进行格式化。

插入样式表的三种方式

外部样式表

当样式被应用到很多界面的时候，外部样式表将会是一个很理想的选择。你可以通过改变一个文件实现对多个界面的修改，很nice.

示例：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!--外部样式的引入使用的是link标签-->

内部样式表

当单个文件需要做样式修改的时候，可以使用内部样式，可在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>
<!--内联样式就是将样式属性写到标签内部-->

HTML链接

HTML使用超链接与网络上的一个文档进行链接。

HTML链接语法

示例：

<a href="url">Link text</a>
<!--href属性规定了链接的地址-->

target属性

使用target属性可以定义被链接的文档在何处显示
示例：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<!--此属性表示可以在新的标签页打开-->

name属性

name属性规定了锚，可以使用name属性创建HTML中的书签，书签不会以任何特殊方式显示，他对读者是不可见的。
使用命名锚时，我们可以创建直接跳转该命名锚的链接，这样使用者就无需不停的滚动界面来寻找他们所需要的信息了。

示例：

<!--首先在HTML文档中对锚进行命名-->
<a name="tips">基本的注意事项 - 有用的提示</a>
<!--在同一个文档中创建该锚的链接-->
<a href="#tips">有用的提示</a>
<!--可以在其他界面中指向该锚的链接；使用#加上锚名放到URL末端就可以跳转了。-->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

注：url的末尾一定要添加正斜杠闭合，否则会产生两次请求。

示例：

<!--正例-->
href="http://www.w3school.com.cn/html/"
<!--反例-->
href="http://www.w3school.com.cn/html"

HTML表格

表格由<table>标签来定义
行使用<tr>表示
列使用<td>表示

示例：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格和边框属性

边框属性是border，通过对border的设置实现边框样式，以及是否显示边框。

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头

表头使用<th>标签进行定义

示例：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格中的空单元格

有的浏览器对于空的单元格不友好，当出现一个空的单元格的时候，边框可能不会显示。此时我们可以在该空单元格处添加一个占位符   这样边框就可以正常显示了。

HTML框架

使用框架我们可以在同一浏览器窗口中显示不止一个页面。

框架结构标签

框架结构标签<frameset>定义如何将窗口分割为框架。
每个frameset定义了一系列的行或列。
rows/columns的值规定了每行或者每列占据屏幕的面积。

示例：

<html>

<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>

</html>
<!--定义了一个三列的垂直框架-->

框架标签

Frame标签定义了放置在每个框架中的HTML文档。

示例：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

w3school学习小结，有错多多指正交流。