HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33733970/article/details/80278379

知识概述：

1.HTML初识及基本结构

1.1 什么是HTML
1.2 基本结构

2.HTML常用标签

HTML初识及基本结构

web服务本质

CS架构
-

import socket

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('127.0.0.1',8080))
    sock.listen(5)

    while True:
        print("server is starting.....")
        conn, address = sock.accept()

        request = conn.recv(1024)

        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Quincy</h1>","UTF-8"))
        conn.close()

if __name__ == '__main__':

    main()

什么是html

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言,通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。
html文件用编辑器打开显示的是文本，可以用文本的方式编辑它。
如果用浏览器打开，浏览器会按照标签描述内容从上到下将文件渲染成网页。
静态网页的后缀名：.html 或.htm

HTML文档规范

所有标签建议小写
所有属性使用双引号
所有的标签要闭合
img标签添加alt属性（对图片的描述）

html基本结构

<!DOCTYPE html>//声明它是html文件，如果缺失，会以怪异模式解析，默认以低版本渲染
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> 文档声明，指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head>标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，<body>之间的文本是可见的网页主体内容。

HTML常用标签

HTML标题

h1,h2,h3,h4,h5,h6,最大是h1,最小是h6,在网页中使用标题分级还是很重要的。

shortcut:h$*6>{标题$}

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

HTML段落、换行与字符实体

p段落标签
br强制换行标签
 
<````>````<````>

div、span

div行级标签
span行内标签
两者区别：div独占一行，span挨着排列
这两个元素是专门为定义CSS样式而生的

图形image标签

<img src="" alt="" title="" width="" height="">

src: 要显示图片的路径.
alt: 图片没有加载成功时的提示，搜索引擎和盲人读屏软件使用
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

补充：
相对路径：相对于引用文件本身去定位被引用的文件地址
绝对路径：相对于磁盘的位置去定位文件的地址
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

超链接标签(锚标签)a标签

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/beauty/introduce.html

URL地址由4部分组成
第1部分：为协议：http://、https://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：beauty
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

<a href="#"></a> <!--  缺省值# 表示链接到页面顶部   -->
<a href=""></a>
<a href="http://www.jd.com/" title="跳转的京东网站">京东</a>//记得带上http
<a href="http://www.jd.com/" title="跳转的京东网站"><img src="" alt=""></a>
<a href="javascript:;">百度</a>//不跳转什么都不干
<a href="" title="" target="_self">target用法</a>//默认self,_blank重新开一个页面，而不是覆盖

有序列表、无序列表、定义列表

//有序列表，开发中比较少用
<ol>
    <li>小刘</li>
    <li>小马<</li>
    <li>小鹿<</li>
    <li>小强<</li>
</ol>
//无序列表，开发中使用比较多：ol>(li>a)*2
<ol>
    <li><a>小刘</a></li>
    <li><a>小马</a><</li>
    <li><a>小王</a><</li>
    <li><a>老王</a><</li>
</ol>
//定义列表，使用不是很多
<dl>
    <dt>html</dt>//标题
    <dd>标签</dd>//描述
</dl>

table

<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>籍贯</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>青岛</td>
    </tr>
</table>

表格常用属性：

border，为表格添加边框：style=”border-collapse: collapse”
width，表格的宽
height，表格的高
align，水平居中
valign，垂直居中
colspan，设置单元格水平合并
rowspan，设置单元格垂直合并

表单form

<h3>用户注册</h3>
<form action="" method="post">
    <div>
        <label for="username">用户名</label>
        <input type="text" name="username" id="username">
    </div>
    <br>
    <div>
        <label for="passwd">密码</label>
        <input type="password" name="passwd" id="passwd">
    </div>
    <br>
    <div>
        <label>性别</label>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    </div>
    <br>
    <div>
        <label>爱好</label>
        <input type="checkbox" name="favorite" value="basketball">篮球
        <input type="checkbox" name="favorite" checked="checked" value="football">足球
        <input type="checkbox" name="favorite" value="qianball">铅球
    </div>
    <br>
    <div>
        <label>籍贯</label>
        <select name="hometown" multiple>
            <option value="bj" selected>北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
        </select>
    </div>
    <br>
    <div>
        <label>照骗</label>
        <input type="file" name="pic">
    </div>
    <br>
    <div>
        <label for="">个人介绍</label>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>

    <fieldset>
        <legend>登录吧</legend>
        <input type="text" name="">
    </fieldset>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

iframe内嵌框架

<a href="http://www.baidu.com" target="myframe">百度</a>
<a href="http://www.tencent.com" target="myframe">腾讯</a>
<iframe src="http://www.baidu.com" frameborder="0" scrolling="no"
        width="600" height="500" name="myframe"></iframe>
//iframe内部src默认地址