html标签学习

基础知识

软件架构分类：CS（客户端-服务端）、BS（浏览器-服务端）；浏览器是特殊的客户端

在浏览器的网址栏内输入网址，简单来说发生了四件事：

浏览器向服务端发送请求
服务端接收请求
服务端返回响应内容
浏览器接收响应，并将响应内容按照一定规则渲染在页面上

浏览器要个多个不同的服务端打交道，因此需要浏览器和服务端遵循一定的规则，这个规则就是HTTP协议。

HTTP协议

超文本传输协议（也叫超文本转移协议），用来规定服务端和浏览器之间交互数据的格式。如果是BS软件，就必须准许HTTP协议，否则只能是自己写客户端的app。

HTTP四大特性

基于响应请求
基于TCP/IP协议作用在应用层的协议
无状态，（为了保存状态，后来出现了cookie\session\token技术）
无\短链接；一次请求一次响应，之后就断开连接，没有关系；（后来出现长链接，双方建立连接后默认不断开：websocket）

请求数据格式

# 请求首行\r\n请求头\r\n\r\n请求体\r\n

请求首行：标识HTTP协议版本，当前请求方式
请求头：一大堆k, v键值对
请求体：并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据

# 请求方式
get请求：向服务端要数据		
post请求：向服务端提交数据

# 补充；
url：统一资源定位单位，即所谓的网址

响应数据格式

# 响应首行\r\n响应头\r\n\r\n响应体\r\n

响应首行：标识HTTP协议版本，响应状态码
响应头：一大堆k, v键值对
响应体：返回给浏览器展示给用户的数据

# 响应状态码：一串表示复杂状态或者描述信息的数字
1xx：服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx：服务端成功响应了你想要的数据(200 OK请求成功)
3xx：重定向(301,302)
4xx：请求错误（404，资源不存在；403，没有访问权限）
5xx：服务器内部存错（500）

HTML

HTML是超文本标记语言缩写，我们在浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)。

HTML就是编写网页的一套标准。

# HTML的注释
<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>

HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

HTML标签

HTML标签分类

方式1：双标签 or 单标签（自闭合标签）

双标签：<h1></h1>、<a></a> 等
单标签：<img/> 等

方式2：块级标签 or 行内标签

块级标签：h1~h6	p div 等;
行内标签：i  u s b span 等

# 块级标签独占一行；行内标签自身文本多大就占多大
# 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
# 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
# 3 p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
# 4 行内标签不能嵌套块儿级标签 可以嵌套行内标签

head内常用标签

<title></title> # 网页标题 
<style></style> # 内部用来书写css代码  
<script></script>  # 内部用来书写js代码
<script src="myjs.js"></script> # 还可以引入外部js文件  
<link rel="stylesheet" href="mycss.css">  # 引入外部css文件

<meta charset="UTF-8">  # 指定页面字符编码
<meta name="keywords" content="">  # 书写网页检索内容的关键词
<meta name="description" content="">  # 书写网页的描述性信息

body内常用标签

基本标签

<h1>我是h1</h1>  标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br>  换行
<hr>  水平分割线

特殊符号：HTML特殊字符编码对照表

&nbsp;  空格
&gt;    大于号
&lt;    小于号
&amp;   &
&yen;   ¥
&copy;	©
&reg;  ®注册商标

常用标签

div  块儿级标签
span  行内标签
页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可
而普通的文本先用span标签

img图片标签

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

参数：
src，图片路径（本地|网络）,还可以是url,将自动向该url发get请求获取数据
alt，当图片加载不出来的时候 给图片的描述性信息
title，当鼠标悬浮到图片上之后 自动展示的提示信息
height|width，宽高，单位是px，修改一个，等比例缩放；修改两个，图片可能失真

a标签：链接标签

<a href="" target=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
参数
href
	-1.放url，用户点击就会跳转到该url页面
	-2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	 _self 默认a标签是在当前页面完成跳转 
     _blank 你也可以修改为新建页面跳转			

# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<a href="#d1">回到顶部</a>

标签的两个重要属性

# id值， 标识唯一身份，一个html页面内id值不允许重复
# class值， 标识一类标签

# 补充：标签既可以有默认的属性，也可以自定义新属性
<p id="first-one" class="orange" username="xliu" password="none"></p>

列表标签

# 无序列表、有序列表、标题列表

# 无序列表
<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>

# 有序列表
<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

# 标题列表
<dl>
    <dt>标题1</dt>
    	<dd>内容1</dd>
    <dt>标题2</dt>
    	<dd>内容2</dd>
    <dt>标题3</dt>
    	<dd>内容3</dd>
</dl>

table表格标签

<table>
    <thead> # 表头(标题栏)
        <tr>  # 一个tr就表示一行
            <th>caption</th>  标题
        </tr>
    </thead>  
    <tbody> # 表单(数据栏)
        <tr>
            <td>text</td> 文本
        </tr>
    </tbody>	 
</table>

参数
    <table border="1">  # 加外边宽
    <td colspan="2"></td>  # 水平方向合并
    <td rowspan="2"></td>   # 垂直方向合并

posted @ 2020-05-11 15:18 the3times 阅读(136) 评论(0) 编辑收藏举报

刷新页面返回顶部

the3times