10.10(day49)初识前端，html基础

html介绍

web服务的本质：

浏览器发请求--->http协议--->服务端接收请求--->服务端返回响应--->服务端吧html文件内容发给浏览器--->浏览器渲染页面

PS:当用python写一个socket服务端时，可以在浏览器输入IP地址:端口号访问

html:

超文本标记语言，是一种用来创建网页的标记语言

本质是浏览器可识别的规则，根据浏览器的规则写网页，浏览器根据规则渲染写的网页

拓展名：html或htm(htm早期电脑只支持3个字符的后缀名，现在很少了)

它不是编程语言，主要使用标签来描述网页

基本结构

<!DOCTYPE html>   声明为html5文档

<html lang="en">   开始与结束标记，包含头部(head)主体(body)
    
<head>   定义开头内容，不会再浏览器窗口显示
    
    <meta charset="UTF-8">   编码格式
    
    <title>Title</title>   网页标题，在浏览器标题栏显示
    
</head>
    
<body>   网页的主体内容

</body>

html标签

标签格式

由尖括号加关键字组成如

成对出现的是双标签：如

,第一个为开始，第二个为结束

单独出现的是单标签：如

标签里面有若干属性，也可以不带属性

标签语法

双标签一般为：

<标签名属性名="属性值" ，，，>内容</标签名>

单标签一般为；

<标签名属性名="属性值" ，，，/>

属性：

id:定义标签唯一id,html文档树中唯一

class:为html元素定义一个或多个类名(classname)

style:定义元素的行内样式

注释

pycharm中的html文件使用ctrl+/可以快捷添加注释

常用标签

head内常用标签

<title></title>   定义网页标题
<style></style>   定义内部样式表
<srcipt></srcipt>   定义js代码或引入外部js文件
<link/>   引入外部样式表文件或网站图标
<meta/>   定义网页元信息

meta标签

提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键字

位于文档头部，不包含任何内容，提供的信息是用户不可见的

两个属性

http-equiv:content-Type 指定文档编码类型

refresh 两秒后跳转到对应的网址

x-ua-compatible 以最高级模式渲染文档

name：主要用来描述网页，属性值有content，用来便于搜索引擎查找信息和分类信息

body内常用标签

<b></b>   加粗
<i></i>   斜体
<u></u>   下划线
<s></s>   删除
<p></p>   段落标签
<h1></h1>---<h6></h6>   标题标签
<br>   换行
<hr>   分割线

特殊符号

空格	&nbsp;
>	&gt;
<	&lt;
&	&amp;
¥	&yen;
版权	&copy;
注册	&reg;

div与span标签

div用来定义块级元素，span用来定义行内元素，并无实际意义

块级元素与行内元素：
块级元素，另起一行渲染的元素，行内元素则不需要另起一行

这两个元素是专门为定义CSS样式而生的

二者的嵌套

块级元素可以包含行内元素或某些块级元素，但是行内元素不能包含块级元素

p标签不能包含块级元素和p标签

img标签；

src:图片路径

alt:图片未加载成功时的显示

title:鼠标显示时提示的信息

a标签

超链接标签

href:绝对url 指向另一个站点

相对url 指向当前站点中确切的路径

锚url 指向页面中的锚herf='#top'

target:_blank在新窗口打开目标网页

_self: 在当前窗口打开目标网页

列表

无序列表

<!--无序列表标签-->
<!--disc实心圆点，默认值
circle空心圆圈
square实心方块
none无样式
-->
<ul class="a" type="none">
    <li></li>
</ul>

有序列表

<!--有序列表标签-->
<!--type:1数字列表，默认值
A大写字母，a小写字母
I大写罗马，i小写罗马,start=""写数字，表示从当前顺序的第几个开始
-->
<ol type="A" start="">
  <li></li>
</ol>

标题

<!--标题列表-->
<dl>
    <dt></dt>
    <dd></dd>
</dl>

表格

<!--表格标签-->
<table border="1" cellpadding="20" cellspacing="20">
    <thead>
    <tr>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2"></td>
    </tr>
    </tbody>
</table>

border:表格边框

cellpadding:内边距

cellspacing:外边距

像素百分比

rowspan:单元格竖跨多少行

colspan:单元格横跨多少列