HTML和CSS学习笔记第1~6章——基础HTML_css coffee html 只有标签名字-CSDN博客

本文链接：https://blog.csdn.net/BCadillac/article/details/107310722

开始了解HTML

HTML:HyperText Markup Language(超文本标记语言)
CSS:Cascading Style Sheet(级联样式表)

HTML应专注于组织内容
CSS应专注于样式和呈现

<style>标记需要一个type属性，用来告诉浏览器你所使用的样式的种类。CSS的指定为“text/css”。

<style type="text/css">
	//code
</style>

深入理解超文本

<a>

<a href="sample.html">sample</a>

该元素用来创建一个到其他页面的链接，<a>元素中的内容会被作为链接的标题，浏览器会在该标题下添加下划线。

href属性：hypertext reference，通常是网页，但也可以是音频，视频等
title属性:<a>的属性title可以使点击链接时提供更多信息，这对视力障碍、使用屏幕读取器的用户来说尤为重要，因为他们不希望把URL一个个字母都读出来。

<a href="test2.html"
   title="进入test2网页">点击这里访问test2</a>

在这里插入图片描述
target属性:如果添加target="_blank"，浏览器会在新窗口打开链接。
如果是任意名字，例如target="coffee"，则会在新窗口打开链接，但所有对象名为coffee的链接都会在相同的窗口打开。
注：必须有下划线，否则其效果等同于第二种打开方式。

备注：

把<img>放在<a>之间，图像就可以成为链接。

目标锚

使用href属性可以实现跳转到网页的特定位置，这被称为目标锚，倘若目标锚在本页面内，则直接“#id”，如果在其他页面内，则“相对地址#id”，如

<a href="#C4">查看章节 4</a>

<h2><a id="C4">章节 4</a></h2>

每个页面默认都可以通过"#top"回到顶部，例如：

<a href="#top">Back to top</a>

相对路径

在根目录中要访问子目录中的网页时，使href="子目录名/文件名"，倘若当前访问网页处于子目录中，想要访问父目录中的文件或文件夹，则使用href="../文件名"。
倘若上溯的文件夹不止一个，比如两个时，使用href="../../文件名"。
上溯可以一直上溯到根目录，下探则取决于你子目录的深度，理论上可以无限下探，但不推荐这么做，一是使网站过于复杂，二是路径最多允许255。
有些操作系统（如Windows）使用\做分隔符，但我们不能用它代替/。

构建模块

引用：

<q>

<p>
	this is a sample of <q>quote</q>.
</p>

效果：自动给引用文本添加双引号。

在IE6中并不支持显示双引号。建议使用CSS给引用添加视觉样式，例如斜体字。

使用<p>比直接使用双引号的好处： 使网页结构化。当浏览器知道这是个引用后会尽量用最好的方式显示它，例如添加双引号。这使得在特殊场合更有用，例如移动设备或为视觉障碍人士准备的HTML视频浏览器，亦或者像搜索引擎寻找带引用的网页。最重要的，当我们使用CSS时，就可以更方便的改变引用字段的样式。

<blockquote>

给一段文字独立显示。

<p>
    this is a sample of <q>引用</q>.<br />
    this is a normal text.
    <blockquote>
        this is the first text in blockquote.<br />
        this is the second text in blockquote.<br />
        this is a try to put a <q>short quote</q> in blockquote. <!--这里尝试把短引用插入块引用-->
    </blockquote>
    this is a normal text.
</p>

显示效果：
在这里插入图片描述

HTML元素的分类

块元素前后都会自动换行。如<h1>、blockquote>
而内联元素则嵌入文本中。<a>、<q>、<em>（斜体）。
空元素是没有HTML内容的元素，它们没有结束标记，如<br />、<img>。

列表<ol>, <ul>, <dl>

<li>：list item。行。
<ol>：order list，有序列表。
<ul>：unordered list，无序列表。
<dl>：definition list，自定义列表。
下面是个自定义列表样例：

<dl>
    <dt>Burma Shave Signs</dt>
    <dd>Road signs common..</dd>
    <dt>Route 66</dt>
    <dd>Most famous road in the U.S.</dd>
</dl>

效果：
在这里插入图片描述

字符实体

当想在HTML中提到与HTML元素相同的内容使会导致HTML结构混乱。因此我们需要字符实体来正确显示。例如<的是&lt，>是&gt。
同时因为&是字符实体的首字母，因此为防止混乱，我们使用&amp代替&。
记得每个字符实体以;结束，上述例子因显示问题并没有写入。

<pre>

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。详情
相对应的<code>标签。

开始链接

域名

例如在www.starbuzzcoffee.com这个网站名中，www是域中的特定服务器名，starbuzzcoffee.com这部分是域名。
不同用途的域的结尾也不同：.com（商业性的机构或公司）, .org（非营利的组织、团体）, .gov等，同样还有不同国家的域，如，.co.uk，.co.jp之类。
域名使网站拥有独一无二的名字，也使网页与其他网站链接。域名由ICANN控制，以保证每人一次只能使用一个域名。同时，你必须每年为域名使用权交付注册资金。

（此处省略将网页放在Web上的内容）

URL

URL：Uniform Resource Locators，统一资源定位器

例如：在http://www.starbuzzcoffee.com/index.html中，http指明接受资源的协议，随后是网站名，/之后的部分就是从根目录到资源的绝对路径。

HTTP协议

HTTP：HyperText Transfer Protocol，超文本传输协议。是网上传送超文本文件的一致协议。
主机发送HTTP请求，如果服务器找到了该资源，则发送HTTP响应，如果找不到则返回404错误。

绝对路径

问：是否可以直接访问http://www.starbuzzcoffee.com，而不加index.html？
答：可以。一般当Web服务器接收到此类请求后，会尝试在目录中定位默认文件。通常默认文件名为“index.html”、“default.htm”或者“index.php”，如果服务器找到了其中一个文件，它会把此文件返回给浏览器显示。因此为了从根目录默认返回一个文件，尽量起名为以上名字。（但是，同样需要考虑到主机代理商希望你给默认文件起什么名字，这取决于他们服务器的类型）

当服务器接收到没有以“/”结尾的请求且有一个目录是这个名字时，服务器会为你添加一个斜线。也就是http://www.starbuzzcoffee.com会被改成http://www.starbuzzcoffee.com/
这会使得服务器去寻找默认文件，最后他会返回文件，好像你原来输入的是：http://www.starbuzzcoffee.com/index.html

同时，因为以后有可能更换服务器，所以默认文件名可能会有所变化。因此写上http://www.starbuzzcoffee.com更好。

给网页添加图像

JPEG与GIF的区别

在这里插入图片描述
<img>的src属性可以通过URL使用网络上的图片。

alt属性可以提供图片的一段描述，在图片无法正常显示时显示。

在这里插入图片描述
解决方法： 使用图像编辑软件减小尺寸。如果可以的话，尽可能保存为web所用格式，因为它会使用网页安全色保证图片质量，同时减小占用空间。

缩略图

使网页用上缩略图的步骤：

为缩略图创建一个新文件夹
调整原图大小为适合大小保存为副本，并将其放入缩略图文件夹
将<img>的src指向缩略图文件
用<a>和<img>配合使点击缩略图时可以打开原图。
如果想为新打开的图片提供上下文或其他内容，则可为图片创建html文件，并使<a>指向该html文件。

HTML标准与其他

HTML5 doctype

	<!DOCTYPE HTML>

HTML不会再有版本6、7、8。。。因为指定标准的人将HTML5规范变为活标准，他会随着技术的发展不断更新。HTML5会具备向后兼容性，使得之前符合标准的内容会在以后仍能被支持。

检验html文件规范性

http://validator.w3.org/

头部

<title>定义标题
<base>定义页面中所有链接默认的链接目标地址。
例如：

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

设置了图片的相对地址，当图片src属性为"logo.png"时，实际就是"http://www.runoob.com/images/logo.png"
<mata>描述HTML文档的描述，关键词，作者，字符集等。
指定字符集：

	<meta charset="utf-8">

<link>标签定义了文档与外部资源之间的关系,通常用于链接到样式表:

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

<style>标签定义了HTML文档的样式文件引用地址,你也可以直接添加样式来渲染 HTML 文档

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

代码规范

一定要用<!doctype>开头
必须将<html>元素置为最顶层元素或根元素。
只有<head>和<body>能直接放在<html>元素中，其他都应放在<head>和<body>中。
<head>中必须指定正确的字符编码和<title>
元素必须具备必要属性，如<img>必须具备src和alt属性。

书中没提到的

水平线

实现：

<hr />

效果：

<p>这是段落。</p>
<hr />
<p>这是段落。</p>

在这里插入图片描述