HTML学习笔记

一. HTML简介

1. 什么是HTML

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签
HTML使用标记标签来描述网页

2. HTML标签

HTML标签是由尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，比如<b>和</b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3. HTML文档=网页

Web浏览器的作用是读取HTML文档，并以网页的形式去显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

<html>和</html>之间的文本描述网页
<body>和</body>之间的文本是可见的页面内容
<h1>和</h1>之间的文本被显示为标题
<p>和</p>之间的文本被显示为段落

二. 简单的HTML标签

1. 四大元素

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的。

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

HTML 图像是通过 <img> 标签进行定义的。

<img src = "wcschool.jpg" width = "104" height = "141"/>

2. 空的HTML元素

没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。用<br/>表示空行。

三. HTML属性

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

下面的代码中，href属性指定链接的地址，<a>标签定义链接。

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

下面的代码中，align属性指定对齐方式

<h1 align = "center"> message </h1>

下面的代码中，bgcolor属性指定背景颜色的附加信息

<body bgcolor = "yellow"> body </body>

属性值始终被引号包围，如果内容有双引号，则需要用单引号来描述，如

name='Bill "HelloWorld" Gates'

四. HTML样式

style属性：用于改变HTML元素的样式，它提供了一种改变所有HTML元素的样式的通用方法，可以使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。

下面的代码中，background-color 属性为元素定义了背景颜色：

<html>

<body style = "background-color:yellow">
<h2 style = "background-color:red"> heading2 </h2>
<p style = "background-color:green"> paragraph </p>
</body>

</html>

下面的代码中，font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>

<body>
<h2 style = "font-family:verdana"> heading2 </h2>
<p style = "font-family:arial; color:red; font-size:20px"> paragraph </p>
</body>

</html>

下面的代码中，text-align 属性规定了元素中文本的水平对齐方式：

<html>

<body>
<h1 style = "text-align: center"> heading1 </h1>
<p> paragraph </p>
</body>

</html>

使用样式的三种方法：

外部样式表：当样式需要被应用到很多页面的时候，外部样式表是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。

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

内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。

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

五. 分组标签

块元素：在浏览器显示时，通常会以新行来开始（和结束），如<h1>, <p>, <ul>, <table>
内联元素：在显示时不会以新行开始，如<b>, <td>, <a>, <img>
<div>元素：是块级元素，可用于组合其他HTML元素的容器，它没有特定的含义，浏览器会在其前后显示折行。

<body>

<h1>NEWS WEBSITE</h1>
<p>some text.</p>
...

<div class = "news">
<h2>Headline1</h2>
<p>some text...</p>
</div>

<div class = "news">
<h2>Headline2</h2>
<p>some text...</p>
</div>
...

</body>

在上面的HTML代码模拟了新闻网站的结构，每个div把每条新闻的标题和摘要组合在一起，div为文档添加了额外的结构。

由于这些div属于同一类元素，所以可以使用class="news"对这些div进行标识，这么做不仅为div添加了合适的语义，而且便于进一步使用样式对div进行格式化，一举两得。

<span>元素：是内联元素，可以作为文本的容器，也没有特定的含义。用class或id属性来标识<span>元素，这样就可以对<span>标识的元素进行处理。

在HTML中：
<p class = "tip"> <span>提示：</span>... ... ...</p>

在CSS中：
p.tip span {
    font-weight: bold;
    color:#ff9955;
}

六. HTML类

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

<div>使用类：

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

<body>

<div class = "cities">
<h2>London</h2>
<p>About London</p>
<p>Description</p>
</div>

<div class = "cities">
<h2>Paris</h2>
<p>About Paris</p>
<p>Description</p>
</div>

</body>
</html>

<span>使用类：

<!DOCTYPE html>
<html>
<head>
<style>
span.red {
    color:red;
}
</style>
</head>

<body>
<h1>我的<span class = "red">重要</span>标题</h1>
</body>

</html>

七. HTML布局

用CSS控制位置、颜色等布局，其他标签使用CSS填写内容：

<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>

<body>

<div id = "header">
<h2>
City Gallery
</h2>
</div>

<div id = "nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id = "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>
</div>

<div id = "footer">
<p> Copyright ? W3Schools.com</p>
</div>

</body>

</html>

八. 表格

每个表格由<table>开始
每个表格行由<tr>开始
每个表格数据由<td>开始
表格的表头由<th>定义，显示为粗体居中的文本
空单元格 <td>   </td>
标题<caption>
跨行：<th rowspan="2"></th>
控制padding：<table cellpadding = "10">
控制spacing：<table cellspacing = "10">
对齐：<td align = "left">

<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>

<tr>
<td>400</td>
<td>500</td>
<td>600</td>

</table>

九. 列表

无序列表：

<!--- 可以通过改变<ul type = "disc/square/circle">来改变显示 --->
<ul>
<li>a</li>
<li>b</li>
</ul>

有序列表：

<!--- 可以通过改变<ol type = "A/a/I/i">来改变显示 --->
<ol>
<li>a</li>
<li>b</li>
</ol>

十. 响应式设计

以可变尺寸传递网页
对于平板和移动设备是必需的
可以使用现成的CSS框架（如Bootstrap）

十一. HTML脚本

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

十二. 头部元素

<head>：是所有头部元素的容器，可以包含脚本，指示浏览器在何处可以找到样式表，提供元信息等：<title>、<base>、<link>、<meta>、<script>、<style>
<title>：定义文档的标题，如浏览器工具栏中的标题、页面被添加到收藏夹时显示的标题、在搜索引擎结果中的页面标题。
<base>：为页面上的所有链接规定默认地址或者默认目标
<link>：定义文档与外部资源之间的关系，最常用于连接样式表：

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

<style>\：为HTML文档定义样式信息，可以在style元素内规定HTML元素在浏览器中呈现的样式。
<meta>：是关于数据的信息，提供关于HTML文档的元数据（不会显示在页面上，但对于机器是可读的），典型情况下，用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<script>：用于定义客户端脚本，如JavaScript

十三. HTML统一资源定位器

URL：用于定位万维网上面的文档

scheme://host.domain:port/path/filename

scheme：定义因特网服务的类型，最常见的类型是http
host：定义域主机（http的默认主机是www）
domain：定义因特网域名，如baidu.com
:port ：定义主机上的端口号，http默认端口是80
path：定义服务器的路径（如果省略，则文档必须位于网站的根目录中）
filename：定义文档/资源的名称

十四. 表单

<form>元素：HTML表单用于收集用户输入。包含不同类型的input元素、复选框、单选按钮、提交按钮等待。
<input>：最重要的表单元素，有很多形态，根据不同的type属性。如text(定义常规文本输入，默认宽度20字符)，radio（定义单选按钮），submit（定义提交按钮）

<html>
<body>

<form>
First name: <br/>
<input type = "text" name = "firstname"/>
</br>
Last name: <br/>
<input type = "text" name = "lastname"/>
</form>

</body>
</html>

<html>
<body>

<form>
<input type = "radio" name = "sex" value = "male" checked> Male
<br/>
<input type = "radio" name = "sex" value = "female"> Female
</form>

</body>
</html>

<html>
<body>

<form action = "/demo/demo_form.asp">
First name: </br>
<input type = "text" name = "firstname" value = "Mickey"/>
<br/>
Last name: </br>
<input type = "text" name = "lastname" value  = "Mouse"/>
<br/><br/>
<input type = "submit" value = "Submit"/>
</form>

<!--- 如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。--->

</body>
</html>

Action属性定义在提交表单时执行的动作，通常，表单会被提交到web服务器上的网页。

<form action = "action_page.php">

method属性规定在提交表单时所用的HTTP方法（GET或者POST）

<form action = "action_page.php" method = "GET">

name属性：每个输入字段必须设置一个name属性。
组合表单：<fieldset>元素组合表单中的相关数据，<legend>元素为<fieldset>元素定义标题。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

加了<fieldset>之后，整个表单组合成了一个整体。

<select>：下拉列表

<!DOCTYPE html>
<html>
<body>

<form action = "/demo/demo_form.asp">
<select name = "cars">
<option value = "volvo"> Volvo </option>
<option value = "saab"> Saab </option>
<option value = "audi"> Audi </option>
</select>
<br/><br/>
<input type = "submit">
</form>

</body>
</html>

<button>：可点击的按钮

<button type = "button" onclick = "alert('Hello World!')"> Click Me! </button>

最后编辑于：2018.11.02 17:50:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,835评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,598评论 1赞 295
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,569评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,159评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,533评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,710评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,923评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,674评论 0赞 203
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,421评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,622评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,115评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,428评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,114评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,097评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,875评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,753评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,649评论 2赞 271