记录一天学不完HTML——第一天

学习教程——W3Vshcool

简介

HTML （超文本标记语言 (Hyper Text Markup Language)）是使用一套标记标签 (markup tag)用来描述网页（HTML文档）的一种语言。
HTML标签：由尖括号包围的关键词，通常是成对出现的，比如和。第一个标签是开始/开放标签，第二个标签是结束/闭合标签。

编辑器

专业：
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
直接用文本编辑器：
Notepad++（PC）
TextEdit（Mac）
使用后缀.html或后缀.htm保存

我用Notepad++

遇到问题1——乱码
在这里插入图片描述

经百度添加了代码

<head><meta http-equiv="content-type" content="text/html;charset=gb2312" /></head>

多方尝试后，把notepad编码设置成使用UTF-8-BOM编码才不乱码（设置成utf-8还是乱的）
他们二者的区别见：博客https://blog.csdn.net/weixin_40449300/article/details/86567129

都说默认带bom，可能我的不带吧？？/疑问

基础

标题

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落

<p>This is a paragraph.</p>

链接

<a href="http://www.w3school.com.cn">This is a link</a>

图像

<img src="w3school.jpg" width="104" height="142" />

元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）。在开始标签中添加斜杠，比如

大多数 HTML 元素可以嵌套。
HTML标签对大小写不敏感（更推荐小写）

属性

HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，在 HTML 元素的开始标签中规定，比如：name=“value”。

属性值应该始终被包括在引号内。双引号是最常用的（单引号也可），在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号

属性参考手册

标题

通过 h1-h6（最大->最小）等标签进行定义的。
（默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后）
搜索引擎使用标题为网页的结构和内容编制索引，所以用标题来呈现文档结构是很重要的。
hr / 标签在 HTML 页面中创建水平线，可用于分隔内容。

右键->查看网页源代码，可以参考别人的网页写法

段落

段落是通过

标签定义的，

在不产生一个新段落的情况下使用
标签进行换行（新行）

<p>This is<br />a para<br />graph with line breaks</p>

源代码中所有连续的空格或空行都会被算作一个空格

样式

style 属性用于改变 HTML 元素的样式
设置多个样式（background-color;font-family;font-size;color;text-align;… …）用分号隔开

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

文本格式化

在这里插入图片描述

例子

<html>
<body>

<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p>
<b>注释：</b>此标签常用于在HTML 文件中写地址。
</p>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>
<p>
<b>注释：</b>code元素不保留多余的空格和换行。
</p>

<pre>
预格式文本保留了      空格
和换行。
标签很适合显示计算机代码：
<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>
</pre>

<p><var>E = m c<sup>2</sup></var></p>
<p>该元素可用来定义数学变量</p>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>
<p>The
<dfn><abbr title="World Health Organization">WHO</abbr></dfn>
was founded in 1948.
</p>
<p>The
<dfn>WHO</dfn> World Health Organization was founded in 1948.
</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

<p>
如果浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text.rtl is right ro left
</bdo>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现（双引号）。
</p>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>分别为删除文本（中间横杠）和下划线文本标签</p>

</body>
</html>

文本样式：基于内容的样式（什么含义，便于统一格式表示）；物理样式（精确控制外观）。

单击浏览器的“查看”菜单，选择“查看源文件”即可查看网站的 HTML 代码。

注释

HTML注释写法：

<!-- This is a comment -->

条件注释：

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

条件注释定义只有 Internet Explorer 执行的 HTML 标签（…some HTML here …）。

HTML-CSS

此处具体可以学习CSS教程（由于我打算一次吧HTML看完，所以下次在看CSS）
所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表.

内部样式表
添加到部分的样式信息对 HTML 进行格式化

<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
a {text-decoration: none}
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>

<a href="https://www.w3school.com.cn/html/html_css.asp">
这是一个没有下划线的链接！
</a>
</body>

</html>

外部样式表
连接到外部样式表：在另一个文件定义样式
在这里插入图片描述

试了一下，rel属性一定要设置，href等于所连接的样式表的地址
我当前网页后加上/html/csstest1.css
看到连接的样式表
在这里插入图片描述
内联样式表
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

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

在这里插入图片描述

链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容可跳转到新的文档或者当前文档中的某个部分。
通过使用标签在 HTML 中创建链接：

通过使用 href 属性 - 创建指向另一个文档的链接

<html>

<body>
<p>
可以使用图像来作链接：
<a href="链接地址">
<img border="0/图像边宽" src="图像地址" />
</a>
</p>

</body>
</html>

通过使用 name 属性 - 创建文档内的书签

<a href="#tips">有用的提示</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="tips">基本的注意事项 - 有用的提示</a>
<p>可以创建指向其它页面锚的链接</p>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

有关链接的一些属性：

<html>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

<p>被锁在框架中了吗？把链接的 target 属性设置为 "_top"跳出框架</p> 
<a href="/index.html"target="_top">请点击这里！</a> 
<!--我还不了解框架？-->

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>

</html>

图像

定义图像的语法是：

<img src="url" />

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。

<img src="boat.gif" alt="Big Boat">

一些示例：

<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p
</body>
</html>

<html>
<body>

<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，可以放大或缩小图像。</p>

</body>
</html>

创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

表格

每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
如果不定义边框属性（border=“0”），表格将不显示边框
表格的表头使用标签进行定义。
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。在空单元格中添加一个空格占位符（），就可以将边框显示出来
跨行或跨列的表格单元格

<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

属性：border；cellpadding/cellspacing（单元格边/间距）；colspan/rowspan（跨列/行）；bgcolor；background；align；frame=“box/above/below/hsides/vsides”；

在这里插入图片描述

列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于

。
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于
1. 标签。（用start属性设置起始计数）
  自定义列表不仅仅是一列项目，而是项目及其注释的组合。
  自定义列表以
  标签开始。每个自定义列表项以
  开始。每个自定义列表项的定义以
  开始。
  属性：无序type=“disc/circle/square”；有序type=“A/a/I/i”

块

HTML

元素
HTML

元素是块级元素，它是可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。

元素的作用是显示表格化的数据。

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

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<html>
<head>
<style>
.cities {
    background-color:pink;
    color:black;
    margin:20px;
    padding:20px;
} 
.gzl{
	background-color:green;
    color:white;
    margin:20px;
    padding:20px;
}
span.red{color:red}
span.yellow{color:yellow}
</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><span class="red">London</span></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>
<div class="gzl">
<h2><span class="yellow">London<span></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> 

</body>
</html>

在这里插入图片描述

布局

在这里插入图片描述

<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<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>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>

</body>

响应式Web设计

RWD （Responsive Web Design）指的是响应式 Web 设计，能够以可变尺寸传递网页，其对于平板和移动设备是必需的。
自己创建
使用Bootstrap
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机。

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
框架结构标签/框架集（frameset）
框架结构标签（frameset）定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
tips
为了避免用户拖动边框来改变它的大小，可以在 frame标签中加入：noresize=“noresize”。

混合框架结构

<html>

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

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

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

</html>

导航框架
导航框架包含一个将第二个框架作为目标的链接列表。

<html>

<frameset cols="120,*">

  <frame src="https://www.w3school.com.cn/example/html/html_contents.html">
  <frame src="https://www.w3school.com.cn/example/html/frame_b.html" name="showframe">

</frameset>

</html>

html_contents.html

<html>
<head></head>
<body>

  <a href = "https://www.w3school.com.cn/example/html/frame_a.html" target="showframe"">Frame a</a>
  <br/>
  <a href = "https://www.w3school.com.cn/example/html/frame_b.html" target="showframe"">Frame a</a>
  <br/>
  <a href = "https://www.w3school.com.cn/example/html/frame_c.html" target="showframe"">Frame a</a>

</body>

</html>

跳转至框架内一个指定的节

<html>

<frameset cols="20%,80%">

 <frame src="/example/html/frame_a.html">
 <frame src="/example/html/link.html#C10">
 <!-->"link.htm"文件内指定的节使用 <a name="C10"> 进行标识<-->

</frameset>

</html>

内联框架

内联框架iframe 用于在网页内显示网页。

<html>

<body>

<iframe src="https://www.w3school.com.cn/i/eg_landscape.jpg" width="200" height="200"frameborder="0"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>


</body>
</html>

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

<html>

<body>

<iframe src="https://www.w3school.com.cn/i/eg_landscape.jpg" width="210" height="200"name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>


</body>
</html>

来源：https://blog.csdn.net/qq_38440725/article/details/102753265

标签

文本分类

html代码

html表格

html语言