前言
一、HTML和CSS概述
- 1.W3C
- 2.HTML
- 3.CSS
- - CSS的作用
二、HTML术语
- 1.HTML注释
- 2.HTML元素
- - ⑴元素的组成部分
  - ⑵属性
- 3.层次关系
- - ⑴嵌套
  - ⑵若A直接包含B,C
  - ⑶若A直接或间接包含B
- 4.文档结构
- - ⑴文档声明
  - ⑵文档头head
  - ⑶文档体body
- 5.语义化标签
- 6.路径
- - ⑴绝对路径
  - ⑵相对路径
- 7.超链接
- - ⑴作用
  - ⑵书写格式
三、文本
- 1.段落
- - 快捷键
- 2.引用
- - 小段引用
  - 大段引用
  - 参考文献引用
  - 缩写词引用
- 3.加粗
- 4.强调
四、无语义元素
五、实体字符

前言

大家好！我是rAAAAAAAAy，您也可以叫我小雷。我以前从未接触过前端开发这个领域，后经朋友介绍，突然发现对web前端产生了兴趣，我决定学习它。
到今天为止已学习了一周时间，对前端这个领域有了初步了了解，兴趣也渐渐高涨了起来。听说CSDN是中国软件开发者的聚集地，我打算将我的学习过程和理解写在这里，与各位前辈分享交流，如有错误，请您指正。
下面我们开始吧！
XX
XX
XX
XX
XX
XX

一、HTML和CSS概述

1.W3C

全称World Wide Web Consortium万维网联盟
它是发布Web技术标准及实施指南的最权威、最具影响力的国际机构

2.HTML

超文本标记语言：定义文档的内容结构
（结构：标题图片正文段落等）

3.CSS

层叠样式表：调整html文档的样式外观
（外观：位置大小色彩等）

CSS的作用

页面表现的基础（默认设置）
可以控制布局（位置）
控制元素的渲染

二、HTML术语

1.HTML注释

书写格式：

html注释主要用于描述代码功能
为开发者、维护者、浏览器、搜索引擎（蜘蛛人）所看
浏览器解析html代码时会忽略注释内容

2.HTML元素

⑴元素的组成部分

一个html文档靠大量元素组成
标记名、属性和元素内容共同决定了一个元素的显示内容和行为。
例：h元素

一级标题权重大于二级标题

⑵属性

例：

a：标签名，超链接
href=“http://www.baidu.com” 属性：表示元素的额外信息
href：属性名
3.空元素：没有“元素内容”和“结束标记”
例：

3.层次关系

⑴嵌套

元素内容中可包含其他元素，形成嵌套。
两个元素之间不能相互嵌套

⑵若A直接包含B,C

A和B或C为父子关系
A为B的父元素，B为A的子元素，B、C互为兄弟关系

⑶若A直接或间接包含B

祖先和后代关系：A是B的祖先，B是A的后代

4.文档结构

⑴文档声明

用于通知浏览器，目前的文档正使用哪一个HTML版本
它出现在第一行

⑵文档头head

描述页面的附加信息（不会显示到页面）
meta标识页面的其他元数据（页面相关的附加信息）
herf属性名
charset=“UTF-8”指示浏览器用字符编码集UFT-8解析页面
title标识文档标题

⑶文档体body

放置网页中所有可见内容
例：块

div块，划分区域，没有任何的语义，用于页面布局

5.语义化标签

1.header顶部/头部
2.nav导航
3.article用于表示文章或其他可独立页面存在的内容
4.section：用于表示一个整体的一部分主题
5.aside：用于表示跟周围主题相关的附加信息
6.footer：底部/尾部

6.路径

⑴绝对路径

网站部署到服务器，网站中的所有资源通过一个地址(路径)访问
书写格式：协议://域名/目录
使用场景：访问站外资源时，只能使用绝对路径
访问站内资源时，两种皆可
例：
绝对路径：http://www.baidu.com/zhidao
站内访问（省略协议域名）： /zhidao

⑵相对路径

相对路径是相对于当前资源的位置，只能用于访问站内资源
书写格式：./路径
一个点表示当前目录，两个点表示上一级目录，…/…/上上级目录

7.超链接

⑴作用

跳转（跳转页面）、锚点（当前页面跳转）、功能链接

⑵书写格式

①跳转

②锚点

步骤：
第一步，添加a；
第二步，添加跳转标签；
第三步，跳转标签添加属性值（id）；
第四步，a添加href的值，前面+#。
跳转当前页面左上角且保证上下内容足够
③功能链接

发送邮件or拨打电话

三、文本

1.段落

注意事项：
p不能套段落、区域标签、标题
a标签不能相互嵌套

快捷键

例：

2.引用

小段引用

适用场景：引用名人名言（自带引号）

大段引用

适用场景：引用文章段落（左缩进2字符）

参考文献引用

（标签自带斜体）

缩写词引用

3.加粗

strong（阅读浏览器加重读音）
b(像素问题，不推荐）

4.强调

em（阅读浏览器加重读音）
i

四、无语义元素

1.div一块区域
2.span小段文本
3.br换行（换行距离问题，不推荐！）
4.pre直接展示源代码格式内容(适用于公式)
5.hr分割线（有尺寸问题，不推荐！）

五、实体字符

1.空白折叠：多个空格或多个回车只会显示一个空格
2.空格

3.大于

4.小于

5.版权

6.&符号

Web前端学习总结第一周相关推荐

Web前端学习第五周
Web前端学习第五周 strong和b.em和i strong 和 em 都是表示强调的标签,表现形态为文本加粗和斜体. b 和 i 标签同样也表示文本加粗和斜体. 区别在于,strong和em 是具 ...
【web前端开发】第一周初识HTML
1.HTML5发展历程 HTML的出现由来已久,1993年HTML首次以因特网的形式发布.随着HTML的发展,W3C(World Wide Web Consortium,万维网联盟)掌握了对HTML规 ...
Web前端学习第六周
一百一十二.b标签和i标签 strong和em都表示强调的标签,表现形态为文本加粗和斜体.b和i标签同样也表示文本加粗和斜体. 区别在于,strong和em是具备语义化的,而b和i是不具备语义化的. ...
web前端学习，第二周
二十一.嵌套列表 1.1 列表之间可以互相嵌套,形成多层级的列表代码: <ul><li> 辽宁省<ul><li>沈阳</li><li ...
零基础web前端学习路线
很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取. 前端开发入门学习有:HTML.CSS.JavaScript(简称JS)这三个部分.所以在学习之前我们需 ...
web前端学习-html(北京科技大学）
web前端学习(北京科技大学) 第一章 html week1 一.知识点清单 ***第一周知识点集锦*** #基本结构 <html><head><title>标题x ...
Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...

Web前端学习总结第一周

目录

前言