html--基础知识

时间 2019-11-30

标签 html 基础知识栏目 HTML 繁體版

原文原文链接

HTML介绍

Web服务本质:是一个socket 连接发送消息的过程，浏览器输入网址发生了什么：
浏览器给服务端发送请求-->服务端接收请求并返回响应-->服务端把html文件内容发送给浏览器-->浏览器展现页面css

编程三部分组成：是一个使用（展现）数据，存储数据，处理数据发过程html

HTML是什么？编程

超文本标记语言（Hypertext Markup Language, HTML）是一种用于建立网页的标记语言。是一个标准，规定你们怎么写网页
本质是浏览器可识别的规则
网页文件的扩展名：.html或.htm

学习HTML：学习写标签的过程

1、标签分类：

单标签和双标标签,
内联（行内）标签：a,img,u,s,i,b,span，默认浏览器宽度，可修改
块级标签：h1-h6,div,p,hr，不可设置宽度
注：
标签规则:
1. 行内标签不能嵌套块级标签
2. p标签不能嵌套块级标签
3.块级元素能够包含内联元素或某些块级元素

2、HTML文档结构：

<!DOCTYPE html>   声明文件类型
<html lang="zh-CN">     文档开始标记   字体类型：中文
<head>  文档开头 内容不会在浏览器的文档窗口显示
  <meta charset="UTF-8">   编码类型
  <title>css样式优先级</title>  网页标题
</head>   尾
<body>  网页主体 开始
····填写内容
</body>  网页主体结尾
</html>     文档结尾标记

注：有些浏览器会设置 GBK 为默认编码，则你须要设置为 <meta charset="gbk">

HTML标签格式：尖括号、大部分红对出现、也有单独出现

3、标签的语法：

<标签名 属性1='属性值' 属性2='属性值'>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
注：
几个很重要的属性：
id 定义标签惟一id，
class 给元素定义多个类名（css样式名）
style 规定元素的行内样式（CSS样式）

HTML注释：<!--注释内容-->

4、HTML经常使用标签

1.head内经常使用标签：

<title></title>  定义网页标题
<style></sstyle> 定义内部样式表
<script></script>  定义js代码或者印日外部js文件
<link></link>  引入外部样式表文件<meta></meta> 定义网页元数据

2. meta标签

http-equiv属性：至关于HTTP文件头做用，向浏览器传出一些有用的信息，内涵属性content，content  中的内容是真正参数变量值
<!--2秒跳转到指定网址-->
<meta http-equiv='refresh' content='2;URL=https://www.oldboyedu.com'>   
name属性: 主要用于描述网页,content属性，content中的内容主要是便于搜索引擎机器人查找信息和分类信息。

3. body内经常使用标签
3.1 基本标签（块级标签和内联标签）

<u>下划线</u>
<b>加粗</b>
<i>斜体</i>
<s>删除</s>
<p>段落标签</p>

<!--字体愈来愈小-->
<h1><h1>
<h2><h2>
<h3><h3>
<h4><h4>
<h5><h5>
<h6><h6>

换行
<br>
水平线
<hr>

3.2 特殊字符

特殊字符
内容  对应代码
空格 &nbsp
>    &gt
<    &lt
&    &map
¥    &yen
®    &reg   注册
©    &copy  版权
应用：
<div>2&gt1,3&lt2,海&nbsp&nbsp燕,商标&copy，注册&reg,&yen&amp</div>

3.3 div标签和span标签

相同点：均主要经过css样式为其赋予不一样的表现
区别：
div定义块级元素
span 定义内联元素

3.4img标签（图片）

<img src='图片路径'，alt='图片加载失败给的提示' title='鼠标悬浮时提示信息' width='宽'，high='长'（宽高两个属性只用一个会自动等比缩放） >
eg:

<img src="psb.jpg" alt="加载失败" tilte="brother" width="100">

　3.5 a标签超连接标签浏览器

可连接内容：图片，网址，相同网页的不一样位置，地址，应用程序
<a href='网址' target='_blank'(跳转不一样的页面打开，不写默认当前页面打开)>点我</a>
eg:

<a href="psb.jpg" target="_blank" >点我</a>

5、url 网页地址 统一资源定位器

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

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

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

6、列表socket

6.1 无序列表学习

<ul type="disc">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

6.2 有序列表

<ol type="1" start="2">
  <li>aaa</li>
  <li>bbb</li>
</ol>

6.3 标题列表

<d1>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

7、.表格二维数据空间字体

7.1 表格的基本结构：ui

<!--列表-->
<table border="10" cellpadding="10" cellspacing="10">
<thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
</thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>zzy</td>
        <td rowspan="2">美食</td>
    </tr>
        <tr>
        <td>2</td>
        <td>zxc</td>

    </tr>
        </tr>
        <tr>
        <td >3</td>
        <td colspan="2">ly</td>

    </tr>
    </tbody>
</table>

7.2 表格属性:搜索引擎

表格属性:
border: 表格边框. border:边境
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好经过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）