HTML入门笔记

最新推荐文章于 2021-08-04 20:35:11 发布

小泥鳅ʚɞ

最新推荐文章于 2021-08-04 20:35:11 发布

阅读量60

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/Niko_01/article/details/115350933

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

1. 什么是HTML

基本概念

HTML是HyperText Markup Language(超文本标记语言)的简写，不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造页面。

2. 搭建HTML的编写与运行环境

1）B/S架构（浏览器/服务器模式）

2）HTTP(超文本传输协议）

    HTTP协议采用了请求/响应模型。
   请求/响应模式：
   请求
      请求头 - 浏览器缓存机制:  XHR（disk cache）、设置token[令牌]实现登录
      请求行 - 请求方式 [post\get]、请求地址
      请求体 - 携带给服务器的数据
  响应
     响应头 - 暂无
     响应行 - 状态码 200 401 404...
     响应体 - 服务器返回给浏览器的数据/结果

3）URL (统一资源定位符)

同源策略

协议 + 域名/ip + 端口

协议：//ip:port/path 例如：http://192.168.1.101:80/test/index.html

http://47.93.255.92:8080
https://baidu.com:80
https://baidu.com:8099

跨域拦截

 1、协议相同，端口相同，但是域名不同（ip）
   https://baidu.com:80
   https://baidu2.com:80
 2、协议不同，其他相同
   http：//baidu.com:80
   https://baidu.com:80
 3、端口号不同，其他相同
   https://baidu.com:8099
   https://baidu.com:80

3. 掌握HTML的语法

1)结构

<!-- 制定浏览器以哪个版本解释html文件 -->
<!DOCTYPE html>
<!-- html 页面的根结点 -->
<html lang="en">
<head>
    <!-- 设置编码格式 UTF-8 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 支持SEO的检索？ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 当前文件在浏览器打开时的选项卡的标题 -->
    <title>first page</title>
</head>
<body>
    <!-- 页面内容，浏览器视口中的内容 -->
    <p>This is my page</p>
</body>
</html>

   <html>：HTML的根元素，用来包含HTML文档的所有元素
   <head>：包含在头部的内容不会被显示在页面中，这里通常包含页面的编码，作者，页面的描述信息，JavaScript的导入，CSS的导入等信息。
   <meta charset="utf-8">：用来声明当前文档的编码方式为utf-8
   <title>：用来声明当前文档的标题，标题将会出现在浏览器的选项卡中
   <body>：所有想要显示在浏览器中的元素都被包含在该元素中。页面内所有格式化的标签和内容

2)标签

一个HTML元素是由一个开始标签，一个结束标签，以及内容。
标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。

<p>My cat is <strong>very</strong> grumpy.</p>

在这里插入图片描述

3)属性

定义：属性是由属性名和属性值组成，属性名与属性值之间使用等于号分割，属性与属性之间使用空格分开，属性值使用双引号括起来。

核心属性
大多数元素都可以使用的属性
id 唯一标识
class 标识一类元素
style 样式
title 描述信息

4)分类

块级元素：

      (1)独占一行空间，默认宽度占满当前屏幕/父元素
      (2)可以设置宽高
      (3)可以嵌套其他标签【块级、行内】
      例如： div  h1~h5标签 ul li 列表标签

行内元素：

       (1)可以与其他元素共享一行空间
       (2)不可以设置宽高
       (3)不可以嵌套其他块级元素
       例如：span a i b

空元素：

只包含单个标签，通常用于在文档中插入部分内容
如： <div><img src="my.jpg" alt=""></div>

4. 掌握常见的HTML标签

1. 段落

<p>I am a paragraph, oh yes I am.</p>

2. 标题

<h1>一级标题</h1>
<h5>五级标题</h5>

3. 其他文本类型标签

<strong>意为强调，内容更为有用		
<b>		加粗	
<em>	意为强调，突出文章重点，倾斜效果	
<i>		斜体		
<u>		下划线
<sup>   上标
<sub>	下标

4. 列表：

  有序列表ol 
  无序列表ul 
  列表dl ：

5. 超链接

<a href="http://www.baidu.com" target="_blank">百度一下</a>

href 表示跳转的目的地，取值如下:
1)目标元素的ID值
用于锚点跳转 href="#目标元素的ID值"
2)URL
URL使用path来定位文件，path又分为相对路径和绝对路径
3)email

<a href="mailto:liuyr@briup.com">联系我们</a>

target 规定在何处打开链接文档

1） _self (默认，在当前选项卡打开新页面)
2） _blank(在新选项卡打开新页面)

6.图片

<img src= "images/phone.jpg" alt= "图片找不到了…" width= "200px" >

src 表示图片的URL地址
alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容
width 设置图片的宽度
height 设置图片的高度

7.表格

align：表格应该如何在文档中对齐，可以取值：left,center,right
border：设定表格边框特性，取整数为值，单位为px
cellpadding：设定内容与单元格之间的距离
cellspacing:设定单元格与单元格之间的距离
width:设定表格的宽度
bgcolor:设定表格的背景色
caption:<caption>表示表格的标题信息
thead:<thead>表示表头，包含了以及
tbody:<tbody>表示表格的表体，包含了很多
tfoot:<table>表示表脚，包含了对表的总结信息
tr:<tr> 表示表格的行，可以包含,元素
td/th:<td>表示表格用来包含数据的单元格。常用于表头单元格，th单元格内的内容有居中加粗的效果。

属性
colspan 跨列数
rowspan 跨行数

HTML5新特性新增标签

header

在这里插入图片描述

nav

在这里插入图片描述

article
section
aside
<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
footer
<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。
address
<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
figure& figcaption