一个后端开发者的前端语言基础：HTML5 & CSS
前端语言基础：HTML5 & CSS
(一) HTML5：超文本标记语言
(1) 基本概念
- 是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 )
- 这些标签以<标签名称>的形式出现，用于标记文本内容的含义
- 浏览器经过元素标签解析文本内容并将结果显示在网页上，而元素标签自己并不会被浏览器显示出来
(2) 基本结构
HTML5元素的内容通常以起始标签<元素名>开始，以结束标签</元素名>终止css
<!Doctype html>
<html>
<head>
<title>网页标题</title>
......
</head>
<body>
主体内容
</body>
</html>
DOCTYPE是Document Type的简写，含义为文档类型。html
HTML5文档基础结构中第一行<!DOCTYPE html>就是HTML5的DOCTYPE声明前端
<html> </html> Html文件开始标签和结束的标签——文档的根标签html5
<head> </head> 指定html文档的一些属性，例如页面标题，字符集和关键字等-浏览器
-
<title> </title>网页标题标签，即被收藏以及搜索引擎中搜索出的名称 -
<meta.../>元数据标签，不显示，可是机器可读，经常使用于搜索引擎索引(SEO优化)安全- 字符集声明（网页编码声明）
<meta charset="utf-8"> - 关键词声明
<meta name="keywords" content="Xx,Xx,Xx" /> - 页面描述声明
<meta name="description" content="This is a page about html5" />
- 字符集声明（网页编码声明）
-
<style> </style>服务器- 可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各种样式信息
- Eg：
<style> p{color:read} </style>
-
<link.../>连接标签框架- 标签用于链接外部资源和当前HTML5文档，它只出如今首部标签
<head> </head>中，一般用于链接外部样式表 - Eg：
<head> <link rel="stylesheet" hred="test.css"/> </head>
- 标签用于链接外部资源和当前HTML5文档，它只出如今首部标签
-
<script> </script>ide- 此标签为可选，取决于当前页面是否须要使用脚本内容，好比JavaScript。该标签能够直接引用外部脚本文件，也能够直接将脚本命令写在
<script> </script>标签中 <head> <script src="test.js"></script> </head>
- 此标签为可选，取决于当前页面是否须要使用脚本内容，好比JavaScript。该标签能够直接引用外部脚本文件，也能够直接将脚本命令写在
<body> </body> 显示在页面上的内容都写在body里面oop
(3) 基本规范
- HTML5使用
<!--...-->标签为文档进行注释 （多行或者单行） - 早期的HTML规范中，标签的大小写是不敏感的，可能存在大写标签的状况
万维网联盟（W3C）明确规定了在新版本HTML5中必须使用小写格式，包括元素标签自己和其中可能出现的属性均须要遵照此规范
-
一些标签，没有结束标签 ，在标签内结束
- 好比 换行
<br/>（通常来讲加上/更加标准） - XML规范中，全部的标签都必须有结束标签
- 好比 换行
- 在HTML5文档中存在一些特殊字符没法直接使用。例如小于符号（<）和大于符号（>）是没法直接输出的，由于它们会被误认为是元素标签的组成部分；而连续空格也没法正确显示，会被浏览器缩减为单个空格。存在此类状况的一系列特殊字符在HTML5中称为字符实体（Character Entities）
html的操做思想 （理解便可）
网页中有不少数据，不一样的数据可能须要不一样的显示效果，这个时候须要使用标签把要操做的数据包起来（封装起来），经过修改标签的属性值实现标签内数据样式的变化
一个标签至关于一个容器，想要修改容器内数据的样式，只须要改变容 器的属性值，就能够实现容器内数据样式的变化
(4) 经常使用标签
1. 文字标签：修改文字样式
<font> </font>
属性：
size: 文字的大小 取值范围 1-7,超出了7，默认仍是7
face: <font face="字体名称:">文字</font>
color: 文字颜色 （两种表示方式）
英文单词：red green blue black white yellow
使用十六进制数表示 #ffffff : RGB
2. 标题标签、段落标签、换行标签、水平线标签和特殊字符
A：标题标签
<!-- h1 到 h6 大小依次变小，同时自动换行--> <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
B：段落标签
p元素有多种属性，比较经常使用的是对齐方式align属性
<P align="center">一段居中的文字</P> <P align="right">一段居右的文字</P>
C：换行标签
<br> 换行标签<br>用于在当前位置产生一个换行，至关于一次回车键所 产生的效果。该标签单独使用，无结束标签 建议使用该标签代替回车键，由于回车键所产生的多个连续换行会被浏览器自动省略 <br>标签每次只能换一行，如需屡次换行，必须写多个<br>标签
D：水平线标签
<hr/>
代码
<hr size="5" color="blue"/>
属性
<hr align="对齐方式" width="宽度" size="高度" color="颜色" noshade>
align属性值：left（左对齐）、center（居中）、right（右对齐）
width：表示宽度，可使用百分数，也能够用像素表示
size：表示高度，其值是数字 取值范围 1-7
color：表明颜色，默认黑色
noshade：表明不显示阴影，默认状况是显示阴影
D：特殊字符**
< < > > 空格 & &
3. 文本格式标签
A. 字体标签 <font> B. 斜体字标签 <i> C. 粗体字标签 <b> 和 <strong> D. 上标标签、下标标签 <sup> 和 <sub> E. 修订标签 <del> 和 <ins> F. 预格式化标签 <pre>
4. 列表标签
<!-- 无序列表 -->
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
| TYPE取值 | 设置的符号样式 |
|---|---|
| 1 | 以数字进行排列 ，系统默认 |
| a | 以小写字母排列 |
| A | 以大写字母排列 |
| i | 以小写的罗马数字排列 |
| I | 以大写的罗马数字排列 |
| disc | 圆点符号，系统默认 |
| circle | 空心原点 |
| square | 空心方块 |
<!-- 定义列表 -->
<dl>
<dt>第一个词条
<dd>第一个词条的定义
......
</dt>
</dl>
5. 图像标签
<img src="图片的路径"/> 语法结构为： <img src="url" alt="替代文本" name="名字" width="宽度" height="高度" border="边框” >
src:图片的路径 width： 图片的宽度 height：图片的高度 alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容 有些浏览器下不显示（没有效果）
6. 绝路径和相对路径
| 相对位置 | 输入方法 | 举例 |
|---|---|---|
| 同一目录 | 直接输入连接的文件 | a.html |
| 连接上一目录 | 先输出 “../” 再输入文件名 | ../b.html |
| 连接下一目录 | 输入目录和文件名，之间以 “/" 分隔 | test/c.html |
7. 超连接标签
A: 连接资源
<a href="连接到资源的路径"> 显示在页面上的内容 </a>
href: 连接的资源的地址 target：设置打开的方式 ，默认是在当前页打开 能够取四个值
| 属性值 | 表示的含义 |
|---|---|
| _parent | 在上一级窗口打开（常在框架页面中使用） |
| _blank | 新建一个窗口打开 |
| _self | 在同一窗口打开，是默认取值 |
| _top | 忽略全部的框架结构，在浏览器的整个窗口打开 |
B: 定位资源
<!-- 若是想要定位资源：定义一个位置 --> <a name="top">顶部</a> <!-- 回到这个位置 --> <a href="#top">回到顶部</a>
8. 移动文字标签
<marquee>移动文字内容</marquee>
| 属性 | 功能说明 | 属性取值 | 各属性值的功能 |
|---|---|---|---|
| behavior | 设置文字的移动方式 | Scroll、Slide、alternate | 循环移动、移动一次中止、来回交替移动 |
| direction | 设置文字的移动方向 | left、right、up、down | 从右向左移动、从左向右移动、从下向上移动、从上向下移动 |
| bgcolor | 设置文字的背景颜色 | 英文颜色名称 | 表示所用颜色 |
| width | 设置文字背景的宽 | 数字 (或者百分比) | 设置背景的绝对宽度 |
| heigth | 设置文字背景的高 | 数字 (或者百分比) | 设置背景的绝对高度 |
| hspace和vspace | 设置文字背景和周围其余元素的空白间距 | 数字 | 设置文字背景和周围其余元素的空白间距的绝对值 |
| loop | 设置移动文字的循环次数 | infinite、正整数 | 文字移动无限次、文字移动n次 |
| sscrollmount | 设置移动文字每次移动的距离 | 数字（默认单位px） | 文字每次移动的距离 |
| scrolldelay | 设置移动文字每次移动后的间歇时间 | 数字（默认单位px） | 文字每次移动后的间歇时间 |
9. 表格标签
能够对数据进行格式化，使数据显示更加清晰，可用于静态页面和动态页面的排版
<table></table>: 表示表格的范围
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。若是指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
<caption></caption>:表格的标题
10. 表单标签
概念：用于采集用户输入的数据，用于和服务器交互，例如登陆或者注册界面
<form></form>: 定义一个表单的范围
属性 action 指定提交数据的URL，默认提交到当前页面 method 指定表单提交方式，经常使用的有两种，get(默认)和post
简单说一说： get和post区别？
一、get请求地址栏会携带提交的数据，post不会携带
二、get请求安全级别较低，post较高
三、get请求数据大小的限制，post没有限制
输入项：能够输入内容或者选择内容的部分
大部分的输入项 使用 <input type="输入项的类型"/>
在输入项里面须要有一个name属性
普通输入项：<input type="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio"/>
复选输入项：<input type="checkbox"/>
<!--
在里面须要属性 name
name的属性值必需要相同
必须有一个value值
实现默认选中的属性
checked="checked"
-->
文件输入项 <input type="file"/> （后面上传时候用到）
下拉输入项 （不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默认选择
selected="selected"
文本：<textarea cols="10" rows="10"></textarea>
隐藏项（不会显示在页面上，可是存在于html代码里面）：<input type="hidden" />
提交按钮：<input type="submit"/>
<input type="submit" value="注册"/>
使用图片提交：<input type="image" src="图片路径"/>
重置按钮： 回到输入项的初始状态：<input type="reset"/>
普通按钮：<input type="button" value=""/>
11. 容器标签
A. <div>标签
标签<div>可将网页页面分割成不一样的独立部分，一般用于定义文档中的区域或节。
该标签是一个块级元素（block level element），浏览器会自动在<div>和</div>所标记的 区域先后自动放置一个换行符。每一个标签可有一个独立的id号。
一样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等。
B. <span>标签
标签<span>一般做为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才能够为指定文本设置样式属性。
该标签是一个内联元素（inline element），与块级元素相反，内联元素不会自动在先后自动放置换行符，所以内联元素会默认在同一行显示。
(二) 层叠样式表
多个样式能够做用在同一个html元素上，使得页面效果更加好，CSS将网页内容和显示样式进行分离，下降耦合度，提升了开发效率
(1) CSS和html结合的方式
- 内联样式
在每一个html标签上面都有一个属性 style，把css和html结合在一块儿
<div style="background-color:red; color:green;">
- 内部样式
使用html的一个标签实现
<style>标签，写在head里面
<style type = "texy/css">
div{
background-color:blue;
color:red;
}
</style>
- 补充样式
style标签里面 使用语句（在某些浏览器下不起做用）
<style type="text/css">
@import uel(div.css);
</style>
- 外部样式
使用头标签 link，引入外部css文件，第一步 ，建立一个css文件
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
通常使用第四种方式
优先级（通常状况）
由上到下，由外到内。优先级由低到高。
后加载的优先级高
(2) CSS的基本选择器
含义：要对哪一个标签里面的数据进行操做
(1) 标签选择器
使用标签名做为选择器的名称
div {
background-color:gray;
clolr:white;
}
(2) class选择器（div.ideal）
每一个html标签都有一个属性 class
<div class="ideal">test</div>
.ideal {
background-color:orange;
}
(3) id选择器 (div#ideal)
每一个html标签上面有一个属性 id
<div id="ideal">test</div>
#ideal {
background-color:#333300;
}
优先级：style > id选择器 > class选择器 > 标签选择器
(3) CSS的扩展选择器
(1) 关联选择器（调用加空格）
<div><p>test</p></div>
设置div标签里面p标签的样式，嵌套标签里面的样式
div p {
background-color:orange;
}
(2) 组合选择器
<div>aaa</div>
<p>bbb</p>
把div和p标签设置成相同的样式，把不一样的标签设置成相同的样式
div,p {
background-color:orange;
}
(4) CSS的盒子模型
在进行布局前须要把数据封装到一块一块的区域内（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技术的公众号：理想二旬不止
相关文章
- 1. 一个后端开发者的前端语言基础：HTML5 & CSS
- 2. 一个后端开发者的前端语言基础：JavaScript
- 3. 前端开发CSS基础
- 4. 前端开发.Html5.HTML5基本格式
- 5. 【前端】一个后端开发的前端开发最优体验
- 6. day44前端开发2之css基础
- 7. web前端开发（二）—CSS基础
- 8. 前端基础——CSS（一）
- 9. 用WebStorm开发，基于HTML5+css+JavaScript开发的前端页面
- 10. day46 前端基础HTML5+CSS3
- 更多相关文章...
- • R 语言基础 - R 语言教程
- • Kotlin 基础语法 - Kotlin 教程
- • Kotlin学习（一）基本语法
- • PHP开发工具
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
