HTML以及CSS初级操作
原创HTML以及CSS初级操作
原创
1 HTML5
1.1 html实现页面注册信息验证功能
1.1.1 什么是Html？
html是用来描述网页的一种语言，是一种超文本标记语言。也就是说，html不是编程语言。也就是说，html不是一种编程语言，仅仅是一种标记语言。
html由一套标记标签(Markup Tag)组成
1.1.2 网页的基本标签
标题标签
<h1>~<h6>标题标签标示一段文字的标题或主题，并且支持多层次内容结构
段落标签以及换行标签
<p>标签标示一段文字等内容
水平线标签
<hr/> *此处标签尾部带有/符号的标签均为单标签 其他为对标签* 表示一条水平线
字体样式标签
<strong>标签可以让字体变粗 <em> 标签可以让文字倾斜
注释和特殊符号
如果我们要在文本内容中放入如"<",">"等已经被html当做语法符号的符号，此时我们就会用到其对应的字符实体.
特殊符号 | 字符实体 | 示例 |
|---|---|---|
空格 | | <a href=“#”>baidu</a> | <a href="#">google</a> |
大于号(>) | > | 如果时间>晚上6点，就坐车回家 |
小于号(<) | < | 如果时间<早上7点，就走路上学 |
引号(") | " | W3C规范中,HTML的属性值必须用成对的"引起来 |
版权符号(©) | © | ©20013-2018 |
1.1.3 图像标签
常见的图片格式
jpg格式在internet上被管饭支持的图像格式,压缩后体积很小，适合用于摄影或连续色调图像的高级格式；gif格式是在网页中使用最广泛、最普遍的一种图像格式，他是图像交换格式(Graphics Interchange Format)的缩写,gif支持透明色，使得Gif图像在网页的背景和一些多层特效的显示上使用得非常多，另外gif格式还支持动画，这是它最突出的一个特点；Bmp格式在windows操作系统中使用的比较多，他是位图(Bitmap)的英文缩写；PNG格式同时兼有GIF格式和JPG格式的有事，同时具备GIF格式所不具备的特性。
图像标签的基本语法
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停时提示文字" width="图片宽度" height="图片高度">
1.1.4 超链接标签
超链接的基本用法
超链接包含两部分内容，一是链接地址，也就是链接的目标，对应超链接标签<a>的href属性；二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下:
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
target的值常见的为self和blank，self表示在本页面中打开，而blank表示打开一个新的标签页
- 超链接的应用场合
- 页面间链接：A页面到B页面
页面间链接就是从一个页面链接到另一个页面
锚链接
常用于目标页面内容很多，需要定位到目标也内容中的某个具体位置时，可以跳转到本页面的指定位置在href属性值为#marker即可跳转到本页面 name为marker的指定位置，同时因为有些标签没有name属性也可以使用id来进行标记，效果相同，但是兼容性更加好。
功能性链接
此项较为特殊，当单机该链接是不是打开某个网页，而是启动本机知道的某个应用程序，如常见的电子邮件、qq、msn等链接
行内元素以及块元素
在此次学习过程中我们可以看到有些元素 比如<p>、<h1>~<h6>这类元素是无论内容多少，该元素都会独占一行，而有些元素如<strong>和<a>以及我们后面会学到的<audio>等这类元素我们可以看到他们的宽度由自己的内容决定，其他的元素可以排在这些元素的后面。
以此我们进行分类：
块元素：无论内容的多少，该元素都独占一行
行内元素:内容撑开宽度，左右都是行内元素的可以排在一行
1.2 使用媒体元素在页面中播放视频
1.2.1 html5的媒体元素
视频元素
html5中的video元素是用来播放视频文件的，支持Ogg、mp4、webm等视频格式；具体语法如下：
<video src="视频路径" controls="controls"></video>
src是视频文件的路径，controls属性用于提供播放、暂停和音量控件，另外还可以使用width和height属性来控制其宽度以及高度。
<video controls>
<source src="视频文件路径" type="">
<source src="视频文件路径" type="">
</video>
source元素的出新本意是为了不同浏览器的兼容性，同时使用多个source可以对应多种视频格式，但效果并不是十分理想；
另外视频元素中还存在autoplay这个属性，表示在加载完成后自动播放。
音频元素
html5中的audio元素是用来播放音频文件的，支持ogg、mp3、wav等音频格式；具体语法如下：
<audio src="视频路径" controls="controls"></audio>
src是音频文件的路径，controls属性用于提供播放、暂停和音量控件。
<audiocontrols>
<source src="视频文件路径" type="">
<source src="视频文件路径" type="">
</audio>
1.3 使用html结构元素进行网页布局
1.2.1 html结构元素
html5的结构元素
元素名 | 描述 |
|---|---|
header | 标记头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚步区域的内容(用于页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
1.4 使用CSS美化页面元素
1.4.1 什么是css
css全称层叠样式表(Cascading Style Sheet),又称作风格样式表，是用来进行网页风格设计的。
1.4.2 CSS3的基本语法
CSS3的基本语法结构：
CSS的规则由两部分组成，也就是选择器与声明 ；
声明必须放在花括号中，并且声明也可以是多条；
每条属性与值之间用：分隔，每条语句以;(英文半角)结尾；
1.4.3 在html中引入Css样式
行内样式
行内样式就是在HTML标签中直接使用style属性设置CSS样式。style属性提供一种改变所有HTMl元素样式的通用方法。style属性的用法如下:
<h1 style="color:red">style属性的应用</h1>
这种style属性设置CSS样式的方法仅仅只对当前的html标签起作用，并且是写在html标签中的。这种方式不能是内容与表现分离，本质上没有体现CSS的优势，因此不推荐使用。
内部样式表
将CSS代码写在<head>标签中的<style>标签中，与html内容位于同一个HTML文件中，这就是内部样式表
<head>
<style>
选择器{属性:属性值}
</style>
</head>
外部样式表
外部样式表是把CSS代码保存为一个单独的样式表文件，文件扩展名为.css，在页面中只需要引用外部样式表即可。HTMl文件引用外部样式表有两种方式，分别为链接式以及导入式
链接式
使用<link>标签进行导入 其中包括三个属性
href 属性的值应该为所要导入的样式表的路径
rel="stylesheet" 指的是在页面中使用这个外部样式表
type中的值为text/css指的是文件的类型为样式表文件
<link href="路径" rel="stylesheet" type="text/css">
导入式
<style>
@import url("css/commoncss")
</style>
@import表示导入文件，@符号非常关键
url("css/commoncss")表示样式表的位置。
外部样式表两种方法的区别
link标签属于xhtml范畴 而导入式是CSS2.1所特有的
使用链接式的CSS使客户端浏览网页时先将外部CSS文件加载到网页中再进行编译显示，所以这种情况下即使网速比较慢显示的网页与预期也会相同
使用导入式则会先将html结构呈现出来再将外部CSS文件加载到 网页中；在网速较慢时会对用户的体验产生影响。
1.4.4 CSS的选择器
选择器是CSS中非常重要的概念。在CSS中有三种最基本的选择器，分别是标签选择器、类选择器以及ID选择器。
标签选择器
标签{属性：属性值；}
类选择器
类名{属性：属性值；}
ID选择器
ID名{属性：属性值；}
三种选择器的优先级: ID选择器>类选择器>标签选择器
1.5 使用CSS美化页面文字以及背景
1.5.1 编辑网页文本
<span>标签
<span>标签是用来组合HTML文档中的行内元素的，他没有固定的格式表示
字体样式
属性名 | 含义 | 举例 |
|---|---|---|
font-style | 设置字体风格 | font-style:italic; 风格为斜体 |
font-weight | 设置字体粗细 | font-weight:bold; 相当于加粗 |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体类型 | font-family:"隶书"; |
font | 在一个声明中设置所有字体属性 | font:italic bold 12px "隶书"; |
font-family可以对应两个值，在英文时会有优先存在的前面的编码格式，如果是前面的格式所无法编译的就会以后面的格式进行编译
font-weight：normal正常 bold粗体 bolder更粗 lighter更细 100~900（整百）从细到粗
排版网页文本
在网页中，用于排版网页文本的样
属性 | 含义 | 举例 |
|---|---|---|
color | 设置文本颜色 | color:#FF0000; |
text-align | 设置文本水平对齐方式 | text-align:right; |
text-indent | 设置首行文本缩进 | text-indent:20px; |
line-height | 设置文本行高 | line-height:25px |
text-decoration | 设置文本装饰 | text-decoration:underline; |
vertical-align | 设置文本垂直对齐方式 | vertical-align:middle; |
text-shadow | 设置文本阴影 | text-shadow:blue 10px 10px 2px |
文本水平对齐text-align 常用值包括：left 左对齐 right 右对齐 center居中 justify两端对齐
text-indent首行缩进 通常用em单位的较多 表示字节
text-decoration：文本装饰 常用值包括none默认 underline下划线 overline上划线 line-through设置文本删除线
垂直对齐vertical-align垂直居中对齐的值多为middle
text-shadow的第一个值为x轴位移 之后分别为 y轴位移 以及模糊半径
1.5.2 设置超链接和列表样式
伪类名称 | 含义 |
|---|---|
a:link | 单击访问前的超链接样式 |
a:visited | 单击访问后的超链接样式 |
a:hover | 鼠标悬浮其上时的超链接样式 |
a:active | 单击未释放的超链接样式 |
1.5.3 背景样式
div标签
块级元素 独占一行 ， 可以将页面分割出一块独立的、不同的部分
背景属性
背景颜色
在css中使用backgroun-color来设置背景颜色，与color用法相同
背景图像
在css中使用backgroun-image属性设置背景图片，通常会与background-position两个属性共同使用；backgroun-image：url（““）来引入背景图；背景重复方式通常使用background-reapeat来设置 其参数包括 ：repeat沿着水平和垂直两个方向进行平铺，no-repeat不平铺并且图像只显示一次，repeat-x只沿着水平方向平铺，repeat-y只沿着垂直方向平铺；
背景定位
主要有三种对应取值 ：Xpos Ypos；X% Y%；X、Y方向关键词；
background（背景）属性
与font类型可以同时将多个属性进行综合说明，参数顺序分别为 颜色 地址 定位 和平铺
背景尺寸
background-size： 第一个参数为宽 第二个参数为高 （在参数是固定像素值时）
百分比 注意此处是以元素宽度计算
cover 引入的图片会铺满整个所在元素
contain 功能与cover类似但不同 在某些情况下无法让背景图片填满整个容器大小
CSS3渐变
线性渐变：颜色沿着一条直线过度，需要制定渐变的方向、起始颜色、结束颜色，有了这三个参数就可以制作出一个简单的、普通的渐变效果
常规语法：linear-gradient(position,color1,color2,....)
渐变需要加浏览器前缀，如果是要兼容webkit内核的浏览器，语法就应该是：
-webkit-linear-gradient(position,color1,color2,....)
实例
background:linear-gradient(to top,orange,blue);
background:-webkit-linear-gradient(to top,orange,blue);
to top是指示渐变方向还包括
to bottom 从顶到底，to left/right 从左（右）到右（左），还有to top left（right）以及to bottom left（right）与上同理
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。