11月2日学习内容整理：HTML

之前我们所学的socket应用在CS架构中，也就是两个程序之间的

还有一种BS架构，B就是浏览器，浏览器作为客户端和python所写的服务端交互，本质上都是socket

 

 

一、html的概念

HTML是超文本标记语言，也叫标签语言，用于网页设计，每一种标签都有特定的渲染效果（把网页内容显示出我们想要的形式），要注意的是html的标签只是直接的效果（比如加粗制表等），像页面布局字体颜色一类的是css（比如居中等），制作动态效果的是Js，浏览器就是这种标签语言的解释器，就像pycharm是python的解释器，所以标签语言也有自己统一的语法规则，这样不同的浏览器才能渲染成相同的效果但要注意的是不同的浏览器也可能会有不同的解释，这就是兼容性

html不是编程语言，因为它逻辑性非常弱，我们在写标签时也不需要依据什么样的逻辑

 

 

二、html的总体格式

打开一个html文件，文件中自带的标签如下，这就是我们写html时要依据的总体格式

其中：

  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题，在浏览器标题栏显示

  •  

  • <body></body>之间的文本是可见的网页主体内容，也就是我们平常浏览的网页内容

 

 

三、HTML的标签格式

1、闭合标签和自闭合标签

》》》形式：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>     闭合，标签名和属性名之间用空格隔开
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />　　　　　　　　　  自闭合比如img，不需要最后后面会说到　

2、注意项：

》》》html是有尖括号包围的关键词，例如<head>

》》》html标签不区分大小写

》》》标签可以嵌套，但不能交叉嵌套，嵌套规则后面会说到

》》》html标签通常是成对出现的，<head></head>像这样，也有例外比如img这种自闭合标签

》》》标签可以有若干个属性，但也可以没有属性

》》》标签分为两部分：<head>开始标签和</head>结束标签，这两个标签之间的部分我们称为标签体

 

 

四、标签分类

1、块级标签（block）：指显示出的内容独占一行的标签

2、内敛标签（inline）：指显示的内容不占一行，只占自己所显示内容的宽度的标签，也就是随着显示内容的增长而增长

 

五、标签嵌套规则

》》》块级标签可以嵌套内联和块级标签

》》》内联标签只能嵌套内联标签

 

 

六、常用标签

1、<！DOCTYPE>标签：

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。


document.compatMode：

  1. BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

 

2、<head>内的常用标签

（1）meta

》》》介绍

<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部，不包含任何内容
<meta>提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能

》》》name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

———>>设置搜索关键字：意思是用户用所设置的关键搜索就可以搜得到

<meta name="keywords" content="meta总结,html meta,meta属性">

———>>设置搜索时显示出来的简介内容

<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

查看京东网站源码对应所示

》》》http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

<meta http-equiv="content-Type" charset=UTF8">  用于指定头标签中显示内容的编码

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 

（2）其它标签

<title>oldboy</title>   指定标题

<link rel="icon" href="http://www.jd.com/favicon.ico">     将京东网站的图标作为自己网页标题的图标

<link rel="stylesheet" href="css.css">    引入css文件

<script src="hello.js"></script>        引入javascript文件

 

3、<body>中常用的标签

（1）基本标签

》》块级标签<h1>  最多可以取到h6，依次代表不同级别的标题，数越大级别越低，会越来越小和细，而且会自动换行，就是下面的效果

———>>改背景颜色style属性：<h1 style="background-color: green">王浩林</h1>   这个在下面介绍的标签中都可以酌情使用，不是只能在<h>标签中使用

     

 

》》》注意没有任何标签标记的内容，浏览器只会默认空一格且不换行，除非内容特别多窗口中一行放不下

   

》》块级标签<br>   换行

        

》》》块级标签<p>内容</p>  段落标签，包裹的内容会自动换行，并且上下内容之间有空白

    

》》》内联标签<b> 和  <strong>    加粗

》》》块级标签<hr>   加一条水平线

》》》内联标签<em>  变斜体

》》》内联标签<strike>  给标记的内容本身的中间位置加一条线（中位线）

》》》内联标签2<sub>3</sub>    3是2的右下角标

》》》内联标签3<sup>2</sup>    2是3的右上角标

》》》特殊字符：加1个空格&nbsp;     &lt    &gt    &quot    &copy    &reg;

        

 

（2）最重要的2个标签

》》》块级标签<div>     没有任何渲染效果，但是优点就是可控性非常强，利用css或者Js可以对其加任意的效果并且不会受影响

》》》内敛标签<span>   和<div>是一样的，两者区别就是一个块级一个内联

老师博客：：：

 

 

（3）图形标签<img>：用来在网页中插入图片

》》属性：

<img src="路径"  alt="本该是个美女"  title="美女"  width="200" height="200">

src: 要显示图片的路径，这个路径可以是文件中，也可以是网上某个图片的显示网址

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

左图是鼠标移动到图片自动显示title的内容，右图是改变路径图片没有显示成功时显示alt的内容

        

 

（4）超链接标签<a>：超链接标签是指一个网页到另一个目标的连接关系，意思就是从一个网页跳转到其它网页或者是图片、邮箱文件等，还有可能跳转到相同网页上的某个位置

》》》跳转到其它页面

<a href="路径">跳转</a>     在页面上点击【跳转】就会在当前窗口打开路径所指向的页面

<a href="http://www.baidu.com"  target="_blank">跳转</a>   加入target属性就会在新窗口打开所指向的页面（这里是百度页面）

》》》页内跳转（抛锚）

<div id ="d1">哈哈</div>    为哈哈这个标题指定ID

<a href="#d1">跳转</a>     href属性中的路径用#来表示这个id，就会跳转到当前页面的【哈哈】标题位置处

 老师博客：：：：

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

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

URL
'''

<a href="" target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

'''

 

 

（5）表格标签<table>

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

》》》基本结构

<table border="1">    border属性就是给表格加边框
    <tr>   块级标签tr代表一行，可以写很多个tr代表很多个行，没有限制
        <th>标题</th>    内联标签th也是代表一行中的一个列，但是会显示成标题形式，就是加粗
        <th>标题</th>
    </tr>
    <tr>
        <td>内容</td>    内联标签td代表一行中的一个列，也就是一个单元格
        <td>内容</td>    多个td就代表一行中多个列
    </tr>
</table>


》》》table标签属性
——》border 给表格加边框
——》cellspacing = "2px"  调整边框和边框的距离
——》cellpadding = "2px"  调整边框和文本的距离
——》width: 像素 百分比.（最好通过css来设置长宽）
》》》td标签属性：合并单元格
——》rowspan = "3"  单元格占3行，当某一个单元格占了多个行后，等到下一行写的时候因为上一行已经设置了
合并，所以下一行就不用写对应的内容了
——》colspan = "3"  单元格占3列




 


 


 


 






            

            
posted @ 
2017-11-02 16:55 
九二零 
阅读(79) 
评论(0) 
编辑 
收藏 
举报