1. 网页的骨骼:HTML
编写 Web网页的基础三件套是HTML,CSS和JavaScript,这一节先了解HTML
1.1 基本结构
使用HTML编写的代码保存时,后缀名可以取成html,一般来说会包含以下基本结构。
<!DOCTYPE html>
<html> // html 标签
<head></head> //网页头部标签
<body></body> // 主体
</html>
第一行代码声明了以下使用HTML5语法
1.2常用标签
1.单标签和双标签
HTML 标签主要分为单标签和双标签两类。
单标签只有开始标签。
例1. 指定网页使用UTF-8字符集
<meta charset=”UTF-8”/>
双标签既有开始标签又有结束标签,所以可以在其中包裹一些标签的内容。
例2. 定义html网页的标题
<title>我爱HTML</title>
meta和title 标签需要放入head之中。
1. 内容标签
内容标签都需要放入body中
1.h1-h6 分别表示一级标题至六级标题,标题文字会依次减少
<h1>我是一号标题<h1>
<h2>我是二号标题<h2>
<h6>我是六号标题<h6>
2.p表示正文中的段落
<p>这里是段落内容 </p>
2. a表示超链接,提供Web网页之间的跳转,或者从网页的一部分跳转到另一部分。在a标签中需要指定href属性,即跳转的目标链接,target = “_blank”表示单击链接后在新标签页中打开目标链接,以下代码即生成一个跳转到百度的超链接。
<a href="http://www.baidu.com"> 百度</a>
Img用于生成图片,src属性指定图片源文件的地址,可以使用相对路径调用本地图片,或者使用互联网上能访问到的图片链接。Width和height属性分别指定图片的宽度和高度,单位是像素,如果仅提供其中一个的值,则保持图片原始比例并计算另一个的值。
<imgsrc="test.jpg"width="200">
1.3块即标签和内联标签
块级标签单独占据一行,其后面的标签会在下一行出现,而多个内联标签会显示在同一行中,直到总宽度超过了浏览器宽度才换行。
可以在HTML标签之间或者p等标签内容中添加br,用于添加空白行或者换行。
<p>这是一段<br>换行的段落</p>
div和span分别属于块级标签和内联标签,都可以用作其他HTML标签或页面文本的容器。它们本身没有具体的语义,仅作为其他内容的容器,从而将Web页面更加结构化地组织起来。我们在设计网页时,都会将页面划分为多个区域,如导航栏,侧边栏,第一部分,第二部分,第三部分,底栏等。
<div>
div里面可以包含其他HTML标签或者文本内容
<p>这个div是页面的第一块内容</p>
</div>
<div>
<p>这个div是页面的第二块内容</p>
<div>
<span> span是内联标签,后面的文本不换行</span>
<span>div里面还可以嵌套其他div<\span>
<p>div的使用可以让页面内容更加结构化,有层次</p>
</div>
</div>
table 属于块级标签,使用table标签可以定义表格,用tr表示表格中的每一行,用td表示每一行中的单元格,用th表示表头行中的单元格。
<table>
<tr>
<th>语言</th>
<th>难度</th>
<th>功能</th>
</tr>
<tr>
<td>Python</td>
<td>简单</td>
<td>强大</td>
</tr>
<tr>
<td>R</td>
<td>简单</td>
<td>强大</td>
</tr>
</table>
ul和ol属于块级标签,使用ul和ol定义列表,分别对应无序列表和有序列表,用于展示多个并列项,每一项用li定义
<ul>
无序列表
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<ol>
有序列表
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ol>
1.4下拉控件
<select name=""id="">
<optionvalue="北京">北京</option>
<optionvalue="上海">上海</option>
<optionvalue="广州">广州</option>
<optionvalue="深圳">深圳</option>
</select>
1.5 标签的属性
很多HTML标签都有对应的属性,即写在标签开始部分中的属性名和属性值,如 a的 href,img的src等。
1.5.1 id
Id属性可以给标签取一个id,id值应当在整个页面中独一无二,使用id可以有针对性地操作某一个标签,如控制样式,绑定事件等。另外,如果将a的href设置为#加上某一个标签的id,则单击链接后,页面将跳转到对应标签所在位置。
1.5.2 class
Class 属性可以给标签取一个class,同一个class值可以应用于多个标签,从而使用class同时操作多个标签,如控制它们的样式,为它们绑定事件等。
1.5.3 name
那么属性和class类似,只是基于name控制相应的标签没有class那么方便,可以将id,class,name理解成一个人的身份证号,姓,名等
1.5.4 style
Style 属性可以为标签添加内联样式,即使用CSS的一种方法,等我们了解CSS之后再详细讨论,这里提供一个简单的示例
<p style =”color:red;”> 这是一段有颜值的内容</p>