摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。
前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念
是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 )
这些标签以<标签名称>的形式出现，用于标记文本内容的含义
浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来
(2) 基本结构HTML5元素的内容一般以起始标签<元素名>开始，以结束标签终止
网页标题
......
主体内容
DOCTYPE是Document Type的简写，含义为文档类型。
HTML5文档基础结构中第一行就是HTML5的DOCTYPE声明
Html文件开始标签和结束的标签——文档的根标签
指定html文档的一些属性，例如页面标题，字符集和关键字等-
字符集声明（网页编码声明）
关键词声明
页面描述声明
可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各类样式信息
Eg：
标签用于连接外部资源和当前HTML5文档，它只出现在首部标签 中，通常用于连接外部样式表
Eg：
此标签为可选，取决于当前页面是否需要使用脚本内容，比如JavaScript。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在标签中
显示在页面上的内容都写在body里面
(3) 基本规范HTML5使用标签为文档进行注释 （多行或者单行）
早期的HTML规范中，标签的大小写是不敏感的，可能存在大写标签的情况
万维网联盟（W3C）明确规定了在新版本HTML5中必须使用小写格式，包括元素标签本身和其中可能出现的属性均需要遵守此规范
一些标签，没有结束标签 ，在标签内结束
比如 换行
（一般来说加上/更加标准）
XML规范中，所有的标签都必须有结束标签
在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号（<）和大于符号（>）是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体（Character Entities）
html的操作思想 （理解即可）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容 器的属性值，就可以实现容器内数据样式的变化
(4) 常用标签
属性：
size: 文字的大小 取值范围 1-7,超出了7，默认还是7
face: 文字
color: 文字颜色 （两种表示方式）
英文单词：red green blue black white yellow
使用十六进制数表示 #ffffff : RGB
2. 标题标签、段落标签、换行标签、水平线标签和特殊字符
A：标题标签
.......
B：段落标签
p元素有多种属性，比较常用的是对齐方式align属性
一段居中的文字
一段居右的文字
C：换行标签
换行标签
用于在当前位置产生一个换行，相当于一次回车键所 产生的效果。该标签多带带使用，无结束标签 建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动省略
标签每次只能换一行，如需多次换行，必须写多个
标签
D：水平线标签
代码
属性
align属性值：left（左对齐）、center（居中）、right（右对齐）
width：表示宽度，可以使用百分数，也可以用像素表示
size：表示高度，其值是数字 取值范围 1-7
color：代表颜色，默认黑色
noshade：代表不显示阴影，默认情况是显示阴影
D：特殊字符**
< < > > 空格 & &
A. 字体标签 B. 斜体字标签 C. 粗体字标签 和 D. 上标标签、下标标签 和 E. 修订标签和 F. 预格式化标签4. 列表标签
- 无序列表项1
- 无序列表项2
- 有序列表项1
- 有序列表项2
| TYPE取值 | 设置的符号样式 |
|---|---|
| 1 | 以数字进行排列 ，系统默认 |
| a | 以小写字母排列 |
| A | 以大写字母排列 |
| i | 以小写的罗马数字排列 |
| I | 以大写的罗马数字排列 |
| disc | 圆点符号，系统默认 |
| circle | 空心原点 |
| square | 空心方块 |
语法结构为：
在输入项里面需要有一个name属性
普通输入项：
密码输入项：
单选输入项：
复选输入项：
文件输入项 （后面上传时候用到）
下拉输入项 （不是在input标签里面的）
- 默认选择
selected="selected"
文本：
隐藏项（不会显示在页面上，但是存在于html代码里面）：
提交按钮：
使用图片提交：
重置按钮： 回到输入项的初始状态：
普通按钮：
A.标签 标签可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。 该标签是一个块级元素（block level element），浏览器会自动在和所标记的 区域前后自动放置一个换行符。每个标签可有一个独立的id号。 同样属于块级元素的还有段落标签、表格标签
、标题标签
-
等。 B. 标签 标签通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。 该标签是一个内联元素（inline element），与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。 (二) 层叠样式表
多个样式可以作用在同一个html元素上，使得页面效果更加好，CSS将网页内容和显示样式进行分离，降低耦合度，提高了开发效率
(1) CSS和html结合的方式内联样式
在每个html标签上面都有一个属性 style，把css和html结合在一起
内部样式
使用html的一个标签实现
补充样式
style标签里面 使用语句（在某些浏览器下不起作用）
外部样式
使用头标签 link，引入外部css文件，第一步 ，创建一个css文件
一般使用第四种方式
优先级（一般情况）
由上到下，由外到内。优先级由低到高。
后加载的优先级高
(2) CSS的基本选择器含义：要对哪个标签里面的数据进行操作
(1) 标签选择器
使用标签名作为选择器的名称
div { background-color:gray; clolr:white; }(2) class选择器（div.ideal）
每个html标签都有一个属性 class
test.ideal { background-color:orange; }(3) id选择器 (div#ideal)
每个html标签上面有一个属性 id
test#ideal { background-color:#333300; }优先级：style > id选择器 > class选择器 > 标签选择器
(3) CSS的扩展选择器(1) 关联选择器（调用加空格）
设置div标签里面p标签的样式，嵌套标签里面的样式 div p { background-color:orange; }test
(2) 组合选择器
(4) CSS的盒子模型aaabbb
把div和p标签设置成相同的样式，把不同的标签设置成相同的样式 div,p { background-color:orange; }在进行布局前需要把数据封装到一块一块的区域内（div）
(1) 边框
border: 2px solid blue; border：统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right(2) 内边距
padding:20px; 使用padding统一设置 也可以分别设置 上下左右四个内边距(3) 外边距
margin: 20px; 可以使用margin统一设置 也可以分别设置 上下左右四个外边距(4) float：浮动
left：文本流向对象的右边 right：文本流向对象的左边(5) 布局定位
position： 属性值 absolute ： 将对象从文档流中拖出 可以是top、bottom等属性进行定位 relative ： 不会把对象从文档流中拖出 可以使用top、bottom等属性进行定位结尾：如果内容中有什么不足，或者错误的地方，欢迎大家给我留言提出意见, 蟹蟹大家 ！^_^
如果能帮到你的话，那就来关注我吧！（系列文章均会在公众号第一时间更新）
在这里的我们素不相识，却都在为了自己的梦而努力 ❤一个坚持推送原创Java技术的公众号：理想二旬不止
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116232.html
相关文章
一个后端开发者的前端语言基础：HTML5 & CSS
摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。 前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现，用于标记文本内容的含义 浏览器通过元素标签解析文本内容并...
一个后端开发者的前端语言基础：HTML5 & CSS
摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )这些标签以<标签名称>的形式出现，用于标记文本内容的含义浏览器通过元素标...
库&插件&框架&工具
摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...
库&插件&框架&工具
摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...
前端资源系列（4）-前端学习资源分享&前端面试资源汇总
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
发表评论
0条评论
DevWiki
男|高级讲师
TA的文章
阅读更多
C++重温笔记(四): 继承和派生
阅读 1628·2021-10-14 09:43
这10款实用硬盘性能检测软件 适合HDD和SSD硬盘坏点健康检查
阅读 5510·2021-09-07 10:21
css-secrets (css揭秘) 知识点目录，值得深入学习！
阅读 1277·2019-08-30 15:56
小技巧|CSS如何实现文字两端对齐
阅读 2126·2019-08-30 15:53
一个后端开发者的前端语言基础：HTML5 & CSS
阅读 1234·2019-08-30 15:44
2019前端秋季社招面试经历总结（三年经验）
阅读 2011·2019-08-30 15:44
CSS: 给表格的第一列和最后一列不同的样式
阅读 1321·2019-08-29 17:24
前端方便面
阅读 754·2019-08-29 15:19
最新活动
阅读需要支付1元查看
