一个后端开发者的前端语言基础：HTML5 & CSS

时间  2019-11-17
标签 一个 后端 开发者 前端 语言 基础 html5 html css 栏目 职业生涯 繁體版
原文   原文链接

前端语言基础：HTML5 & CSS

(一) HTML5：超文本标记语言

(1) 基本概念

  • 是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 )
  • 这些标签以<标签名称>的形式出现，用于标记文本内容的含义
  • 浏览器经过元素标签解析文本内容并将结果显示在网页上，而元素标签自己并不会被浏览器显示出来

(2) 基本结构

HTML5元素的内容通常以起始标签<元素名>开始，以结束标签</元素名> 终止css

<!Doctype html>
<html>
	<head>
		<title>网页标题</title>
    		......
	</head>
    <body>
    	主体内容
    </body>
</html>
复制代码

DOCTYPE是Document Type的简写，含义为文档类型。html

HTML5文档基础结构中第一行**就是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>
  • <script> </script>
    • 此标签为可选，取决于当前页面是否须要使用脚本内容，好比JavaScript。该标签能够直接引用外部脚本文件，也能够直接将脚本命令写在<script> </script>标签中
    • <head> <script src="test.js"></script> </head>

<body> </body>显示在页面上的内容都写在body里面安全

(3) 基本规范

  1. HTML5使用<!--...-->标签为文档进行注释 （多行或者单行）bash

  2. 早期的HTML规范中，标签的大小写是不敏感的，可能存在大写标签的状况服务器

    万维网联盟（W3C）明确规定了在新版本HTML5中必须使用小写格式，包括元素标签自己和其中可能出现的属性均须要遵照此规范框架

  3. 一些标签，没有结束标签 ，在标签内结束ide

    • 好比 换行 <br/>（通常来讲加上/更加标准）
    • XML规范中，全部的标签都必须有结束标签

  4. 在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：特殊字符**

< &lt; >	&gt;
空格	&nbsp;
&	&amp;
复制代码
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结合的方式

  1. 内联样式

    在每一个html标签上面都有一个属性 style，把css和html结合在一块儿

<div style="background-color:red; color:green;">
复制代码

  1. 内部样式

    使用html的一个标签实现<style>标签，写在head里面

<style type = "texy/css"> div{ background-color:blue; color:red; } </style>
复制代码

  1. 补充样式

    style标签里面 使用语句（在某些浏览器下不起做用）

<style type="text/css"> @import uel(div.css); </style>
复制代码

  1. 外部样式

    使用头标签 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技术的公众号：理想二旬不止

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程