HTML基础整理（第一部分）

来源：互联网发布：c语言中整型变量编辑：程序博客网时间：2024/05/16 06:19

基础整理

什么是项目？

-项目就是吧、由不同的文件和文件夹组成的为一个共同的目标而结成的文件夹
*文件夹：进行文件分类

文件：图片文档 HTML文件 css文档视频音频….

公司中如何开展项目

1、服务本公司

第一步：提出需求

第二步：成立项目组 项目经理/产品经理、设计师、前端、后台、测试

项目经理：把控流程

产品经理：提需求提供原型图

测试：提出bug(漏洞、错误)

第三步:开发

第四部：测试

第五步：修改上线（初上）

第六步：正式上线

2、服务甲方

第一步：甲方招标一方应标
第二步：需求细化
第三步：成立项目组 项目经理/产品经理、设计师、后台、测试
- 实施：环境部署将软件安装到服务器
第四步：开发
第五步：测试
第六步：修改上线（初上）
第七部：正式上线

HTTP简介

1、什么叫做页面？

页面就是HTML文件，可以展示一定的内容，承载一定的功能。

2、什么叫做网站？

是由多个页面组成，为单一功能服务的独立网站

3、什么叫做站群？

是由多个网站组成，服务共同公司主体，每一个网站都有自己独立的功能
- 超文本传输协议（HTTP）：设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
- http 的全称是 “Hyper Transfer Protocol”
- http 是www 范围内的规则 www 万维网
工作步骤分为四步:
- 建立连接: 输入域名或点击某个链接
- 发送请求
  响应请求
  关闭连接: 服务端已经将html等信息展示在用户浏览器上之后
  产品: 只要有价值的劳动产品
  防篡改: 如果外网服务器一旦受到攻击，防篡改立刻相应，在0.03s内迅速将外网服务器内容重置一遍
  负载均衡: 服务器为了分解客户端的访问压力，将访问链接分配给不同的web服务器
  网页的组成: html css js …

HTML CSS整理

HTMl简介

什么是HTML？

超文本标记的语言，是使用标签来进行内容的标记，每一个标签都有自己特殊的意义。
文本：普通的文字
超文本是由尖括号和特定的文本组成，
- 超文本不会显示在页面
- HTML文件运行的环境是浏览器

HTML标签

HTML标签是由尖括号包围的关键词，比如 :<html>
HTML标签通常都是成对出现的，比如<b>和</b>
*标签中第一个是开始标签，第二个是结束标签

标签语义化

合适标签做合适的事儿，例如文章标签使用p标签，标题标签使用h1-h6.
标签语义化为浏览器和搜索引擎服务

如何在工作中使用标签语义化

1、根据模块的语义来正确的选择我标签，减少毫无意义的标签
2、选择标签的时候有权重的侧重点，不要所有的位置都选择重要的标签，例如：一个页面不是专题页面h1标签智慧存在一个
* 权重大的标签 ：<title></title> <meta/> <h1></h1> <em></em> <strong></strong>

3、减少标签的嵌套
* 专题页：
* 临时标题：时间限制一般不超过一个月就会下架
* 普通标题：针对某一项目，始终出现的页面

标签语义化的优点

代码结构清晰，利于阅读，在没有css样式的时候，浏览器也可以尽量正常的显示。
利于搜索引擎的抓取，SEO的优化
利于团队的维护
提高工作效率，提高加载速度。

HTML常见元素及分类

HTML元素的分类

1、埃及元素（行内元素）：独占一行

标签名描述 div 无意义标签用来结构的划分 ul 无序列表 ol 有序列表 li 列表项 dl 定义列表 dt 定义名称 dd 定义描述 p 段落 hr 分割线 form 表单项
- 注意：
- ul和ol元素中的第一层嵌套的元素只能是li标签
- dl中第一层嵌套的元素只能是dt和dd
- p标签中不能嵌套自己活着其他块状元素

2、行内元素（内嵌元素）：在一行显示

行内元素基本上都是进行文字控制的元素，不会进行结构的划分

标签名描述 span 无意义标签 b 文字加粗 strong 文字加粗语气强调 i 文本斜体 em 文本斜体语气强调 br 强制换行 sub 下标 sup 上标 font 字体已经弃用 s 中划线已经弃用 strike 中划线 del 删除线 u 下划线 img 引入图片 input 表单框

标签属性alt和title的区别

alt应用在img标签中，如果图片加载出现问题，alt中的文字就会显示在该图片的位置上。
title任何元素都可以使用，鼠标放在这个元素上的时候，就会出现一个跟随鼠标的文本框，title中的文字就会出现在这个文本框中

HTML结构

HTML的结构


* html的注释里面的内容用户看不到编辑人员使用

<!DOCTYPE html>
* HTML5 的文档声明
* 1、文档声明不是HTML标签
* 2、文档声明必须卸载HTML所有标签和内容之前
* 3、浏览器从上到下读取代码，根据文档声明来判断应该使用HTML版本机的规则来读取这个HTML文件

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html4的文档声明….
- 文档声明高版本永远会乡下兼容
- HTML5的文档声明下的文件可以继续使用HTML4的标签和标签属性
- HTML4的文档声明下的文件不支持HTML5的所有标签和标签属性。
<html></html>
- 1、整个文件的根元素 root element
- 2、块级元素
- 3、告知整个浏览器页面开始
<head></head>
- 1、定义文档头部是所有头部元素的容器
- 2、其中的元素可以引用脚本、只是浏览器在哪里找到样式表，提供元素信息等等
- 3、描述文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等等，绝大多数文档头部包括的数据都不会真正作为内容显示给读者
<meta charset="UTF-8">
meta 文件的元信息
charset 编码格式
UTF-8 国际通用编码
GBK gb2312 中国编码

<meta name="keywords" content="关键词, 关键词, 关键词" />
* keywords 关键词每一个关键词（字）用逗号隔开

<meta name="description" content="网页描述" />
* description 网页描述
这些内容都是给浏览和搜索引擎看的

<link href="url" rel="stylesheet" type="text/css" />

引入一个css外部文件

<script src="url" type="text/javascript"></script>

引入一个js外部文件

<body></body>
* 1、放置html所有展示给用户的内容
2、可以嵌套所有的标签

css简介

什么是css？

css是指层叠样式表（Cascading Style Sheets）
1、样式定义如何显示HTML元素
2、样式通常存储在样式表中
3、外部样式可以极大提高工作效率
4、外部样式通常存储在css文件中

css基本语法

css规则有两个主要部分构成，选择器，以及一条或者多套声明（css属性）
选择器：通常是您需要改变的样式的HTML元素。
声明：就是css属性，声明由一个属性和一个值组成。

css的引入方式

1、行内式

*`将css代码直接写在元素的开始标签内，通过style这个标签属性引入。

<p style="width:100px;height:100px;">

2、内嵌式

将css代码写在<style></style>元素中，这个元素一般放在<head></head>元素中

<head>     <style type='text/css'>          p{width:100px;height:100px;}     </style></head><body>     <p></p></body>

3、外联式

html文件和css文件都是独立的文件，通过link标签将css文件引入到html文件内

<head>    <link rel='stylesheet' type='text/css' href='url'/></head>

rel=’stylesheet’ 指定html和所引入href指定文件之间的关系，如果不写本语句不生效
href=’url’ 指定引入文件路径

4、导入式

html文件和css文件都是独立的文件，通过@import这条语句引入到html文件中
@import既不是标签也不是css属性 @import必须写在css样式表中 @import必须写在所有样式之前

<head>    <style type='text/css'>        @import"url"    </style></head>

`外联式和导入式的差别`

1、link是HTML标签，@import是css提供的方式，要写在css文件或者style标签中。
2、当页面被加载的时候，link引用的css文件同时会被加载，而@import引入的css文件会等页面全部下载完成后再加载
3、用JavaScript去控制DOM改变css样式的时候，只能使用link标签，因为import是不能被DOM控制的。

css属性的继承

css的继承分为两种

1、默认继承
- 和文字有关的css属性都是可以默认继承的
2、自定义继承
- inherit继承父集元素某个属性的属性值
- 盒子模型：盒子位置层级有关的属性是不能继承的

阅读全文

0 0