前端开发 01 HTML基础标签-柚子小站

终于又学回到前端开发了。回想起一年多之前开始自学编程的时候，懵懵懂懂的自己把Head First HTML与CSS（第2版）这本书看完，依照书上的例子建了一个简单的网站，开始记录学习编程的过程。也正是在这本书的启发下，我购买了主机和这个域名，建立了这个小站。现在回头看看，这本书讲的东西实在是太基础了，基础到不能算是入门(学到现在想了想，自己亲手来一次前后端连接并处理数据，应该才算是编程入门了吧)，但对那时候的我来说确实是一本很好的入门书。前端的东西是可以直接看到的东西，不像学习程序设计语言时候大部分都要对着黑漆漆的命令行，对于刚学编程的人确实有着极大的吸引力。今非昔比，现在已经武装过了更深入的Python知识和数据库知识，看着柜子里买的那些前端经典书籍，I am back！

W3Schools是一个很好的学习前端的网站,由于前端的内容比较繁杂,因此还需要长时间的使用和自学.

简单的web服务器

前端开发的内容是比较杂乱的，但基础是HTML CSS JavaScript ，除此之外，还需要知道HTTP协议,通过遵循HTTP协议，可以弄一个简单的Web服务器：

import socket

sk = socket.socket()
sk.bind(('127.0.0.1',8888))
sk.listen(5)

while True:

    conn,addr = sk.accept()

    data = conn.recv(1024)
    conn.send(b'Http/1.1 200 OK\r\n\r\n')
    conn.send(b"<h1>Hello S9</h1>")
    conn.close()

用浏览器访问本机的8888端口,可以显示一个Hello S9的页面.这其实发送的字节就是按照HTTP的规范来发送了数据,被浏览器拿到,浏览器是一个HTTP协议和HTML文件的解释器,会按照收到的信息来显示页面.这个程序还可以改进,从文件中读入数据并且发送,甚至可以发送文件,就具备了web浏览器的雏形.实际上,web服务器就是发送一个HTML文件给浏览器进行解释,网上浏览所看到的内容,都是被下载到本地的.

HTML文件的结构

用webstorm或者pycharm新建一个html文件,会发现里边自动填充了内容,这些是符合HTML5规范的HTML结构:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title
    </head>
    <body>

    </body>
</html>

<!DOCTYPE html>表示这是一个符合HTML标准的HTML文档,需要写在HTML文件的开始. <html>标签之内写所有的HTML内容.其中属性lang="en"表示这个网页的主要语言是英文,设置成"zh-CN"表示中文.

<head>之内是HTML文件的头部,用来写一些特殊的标记,脚本和Css链接,网页内容不写在此处.这里的meta标签内的charset表示该页面的编码,一般都用UTF-8.title标签表示这个页面的标题,也就是显示在浏览器上方窗口内的内容.

<body>标签之内的属于HTML的内容,这里的内容会被浏览器解释然后渲染到页面上.

HTML就和学过的XML文件一样,是一种标记语言,HTML叫做超文本标记语言,用于创建网页,Web浏览器就是HTML语言的解释器,对于各种HTML标签进行解释并渲染成页面.不同的浏览器会作出不同的解释和渲染,就带来了浏览器的兼容性问题.HTML文件的扩展名一般是.html,.htm的后缀名现在已较少使用

各种标签

HTML的核心,就是用各种标签环绕要展现的内容,以此来对实际展现的内容做修饰.标签内部还可以设置属性,回想XML文件,其本质和HTML文件是一样的,HTML文件也有类似于XML的树形结构.

HTML的标签HTML标签是由尖括号包围的关键字，如<html>, <div>,成对出现的标签,必须在后一个标签内关闭标签,即前边加上/,比如</div>.还有一种标签叫做自闭合标签,即只有一个就可以发挥作用,需要在结尾的地方加/,比如<img src="1.jpg" />.注意,自闭合标签如果不写末尾的/,大部分浏览器也能够正常显示.但最好按照标准写上

标签在第一个标签或者自闭合标签内可以有属性,写法为属性名 = "内容".每种标签有自己独特的属性,除此之外,还有一些通用的属性如下:

id	定义标签的唯一ID，HTML文档树中唯一,方便定位和引用
class	类名,有相同类名的标签在被Css选择时可以一起选中
style	规定元素的行内样式

对于这几个属性,最好在设计好网页结构后,结合Css设置,这样以后需要修改网页的样式时候,会非常方便

文件头部和<head>类标签
<!DOCTYPE>	不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。现在随着HTML5的发展,今后只有HTML规范,所以只要写<!DOCTYPE html即可>
<title></title>	定义网页标题,网页的标题显示在浏览器的标签上
<style></style>	定义内部样式表,具体会在Css的时候学习
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息,有两个属性http-equiv属性和name属性,有content属性与其对应,主要用来告诉爬虫网页的关键字和内容,以及实现一些特殊功能,详细看下边

Meta标签的一些用法

<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">  <meta http-equiv="content-Type" charset=UTF8">,一般直接写charset即可  <meta http-equiv="x-ua-compatible" content="IE=edge"> name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">

body内的基本元素标签
基本标签	<b></b>	加粗中间的内容,内联标签
	<i></i>	中间的内容斜体显示,内联标签
	<u></u>	下划线显示,内联标签
	<s></s>	中间的内容带有删除线,内联标签
	<p></p>	p是段落标签,之间的内容作为一个段落(默认前后有间距).p是块级标签.
	h1-h6	表示6级标题,如果没有样式,浏览器会按照其默认的字体大小显示,也是块级标签
	<br/>	表示换行,显示为一个空行
	<hr/>	显示一条水平线,常用于分割页面内容,块级标签
块级标签与行内(内联)标签	div标签	div标签标志了一个块级元素,所谓块级元素就是另起一行进行渲染的元素,窗口宽度有多宽,标签默认就占据多长.块级标签才能设置长和宽.div标签主要用来建立页面的格式结构,将页面划分为不同的块区,单纯插入div标签对页面无影响
	span标签	span标签定义了一个行内元素(也叫内联元素),即不会另起一行,而是直接在行内进行渲染的元素,默认内联元素的长度是根据其中内容的长度来的,行内标签不能设置长和宽.div和span都是为应用css样式,而将html的元素和内容进行分类之用.
	标签嵌套	块级元素可以包含块级元素和行内元素,行内元素只能包含行内元素,不能包含块级元素.此外p标签内不能包含块级元素
img标签	标签介绍	img是一个自闭合标签,是内联标签,页面中的文字可以直接写在任意标签内部,会按照所选择标签来展示.而要展示图片,则必须使用img自闭合标签,而且要使用其标签属性
	src属性	指示图片的路径,如果不指示,则图片不会显示
	alt属性	alt属性表示图片未加载成功时,在图片位置显示的文字,用于提示用户该图片的内容
	title属性	title表示鼠标悬浮在图片上方的时候,显示的文字,通常用于显示提示信息
	width 和 height 属性	如果不指定宽和高,外部也没有限制,则一般浏览器会按照原始大小显示图片,如果需要设置显示图片的框体大小,就需要指定高度和宽度.如果只指定一个,浏览器会按照比例自动进行缩放
a标签	标签介绍	a标签是超链接标签,内联标签,页面中所有的元素,被a元素包围之后就成了一个超链接,图片,文字,块区域都可以成为超链接.
	a标签内容	a标签之间的文字会显示为超链接,而链接本身则设置在a标签的属性中
	href 属性	href即超链接的链接,可以为URL地址,当前站点的相对地址,或者为当前页面的id,此时要写成 href = "#idname"
	target 属性	用于控制新打开窗口,设置为"_blank"时候表示在新窗口打开超链接,设置为"self"表示在当前页面打开超链接.默认为在当前窗口打开

列表标签

列表分为有序列表和无序列表,分别用ol和ul标签来表示,里边每一个列表元素,用li标签来表示.此外还有特殊的标题列表,用于表示多层结构,用dl标签,其中的小标题用dt标签,内容用dd标签

默认无序列表之前显示圆点,而有序列表之前是从1开始的数字,可以通过ul和ol的type属性修改样式.

例子如下:

<ol type = "A" start = "100">
    <li>背巾</li>
    <li>天锦</li>
    <li>山洞</li>
    <li>商海</li>
</ol>

<ul type = "circle">
    <li>背巾</li>
    <li>天锦</li>
    <li>山洞</li>
    <li>商海</li>
</ul>

<dl>
    <dt>北京市</dt>
    <dd>海淀区</dd>
    <dd>朝阳区</dd>
    <dt>上海市</dt>
    <dd>静安区</dd>
    <dd>宝山区</dd>
</dl>

可以看到字母会自动以多排字母往下排列

表格标签

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格在HTML里,最外层用table标签,之后内部分为两个部分,thead和tbody部分,thead之间的部分是表头,tbody的部分是表体,也就是数据.在thead之间,用tr来表示一行,行内用th标签表示一列的名称.tbody内部也是用tr表示一行,然后用td表示表格内的数据,其结构如下:

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td>1</td>
    <td>Jenny</td>
    <td>34</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Cony</td>
    <td>4</td>
  </tr>
  </tbody>
</table>

表格的展现主要通过table标签的属性控制.原生表格的属性一般不用,都是通过CSS进行操作,但还是要知道:

table标签的属性
border	指定数字,表示表格边框的宽度,一般设置为1,主要影响外边框
cellpadding	内边距,表格内的内容距离各个格子和边框的距离
cellspacing	外边距,指各个格子之间的距离
width	调整宽度为像素或者百分比,但一般不用,通过css来调样式
colspan,加在td标签上	单元格横跨多少列,相当于横向合并单元格
rowspan,加在td标签上	单元格竖跨多少列,相当于竖向合并,但要把下一行的内容减少相应的数量