走进html和css-总结
使用HTML5的基本结构创建网页
一个HTML5的基本模板的格式为
<!DOCTYPE html>
<html>
<head>
<title>这里是网页头部的标题</title>
<meta/> 可以设置:文档类型,字符编码,搜索关键字,
网站提供的功能和服务的详细描述等
<style>这里可以设置css的样式</style>
<script>这里是function的方法</script>
</head>
<body>
这里放网页的主体部分
</body>
</html>
使用文本相关标签排版文本信息
标题标签
<h1>~<h6> h1字体最大,h6字体最小
段落标签和换行标签
<p></p>段落
<br/>换行
水平线标签
<hr/>
字体样式标签
<strong></strong>加粗
<em></em>斜体
注释和特殊符号
<!-- 注释内容 --> 注释的格式,中间写内容
空格
> 大于号(>)
< 小于号(<)
" 引号(")
© 版权符号(©)
使用图像相关标签制作图文并茂的页面
图像格式
JPG, GIF, BMP, PNG
图像标签的基本语法
< img src=“图片地址” alt=“图像丢失的代替文字” title=“鼠标悬停提示文字” width=“图片宽度” height=“图片高度”/ >
使用< a >标签创建超链接,锚链接及功能性链接超
超链接的基本用法
< a href=“链接地址” target=“目标窗口位置” > < /a>
点击可以跳到4399
绝对路径:
一个文件的完整地址
相对路径:
基于当前目录下的地址
页面间链接:
href属性的值改为你想要的网页地址
锚链接:
点击起点链接跳到终点
设置起点
< a href="#marker">起点< /a>
设置终点使用name属性
< a name=“marker”>终点< /a>
还可以使用id属性
< a id=“marker”>终点< /a>
功能链接:
< a href=“mailto:邮箱”>< /a>
点击发送邮箱
行内元素和块儿元素
块元素特性:
无论内容多少,该元素独占一行
行内元素特性:
内容撑开宽度,左右都是行内元素的可以排在一行
使用媒体元素在网页中播放视频
视频元素:
< video src=“视频路径” controls >< video>
解决视频格式不支持的方法
< video autoplay>
< sourec src=“video.webm格式”/>
< sourec src=“video.mp4格式”/>
你的浏览器不支持video
< /video>
音频元素:
< audio src=“音频路径” controls >< /audio>
解决音频格式不支持的方法
< audio controls>
< sourec src=“audio.mp3格式”/>
< sourec src=“audio.ogg格式”/>
你的浏览器不支持audio
< /audio>
controls播放插件
autoplay自动播放
使用HTML5结构元素进行网页布局
元素结构:
header头部区域的内容
footer脚部区域的内容
section Web页面中的一块独立区域
article 独立的文章内容
aside 侧边栏
nav 导航类辅助内容
##使用HTML5文档添加css样式
css称之为:(层叠样式表)
全称(Cascading Style Sheet)
css的语法结构:
选择器{
css样式
}
引入css样式:
行内样式:写在标签后面
style=“css样式”
< h1 style=“color:red;”>内容< /h1>
内部样式:写在< style>标签中
外部样式表:保存到一个单独的样式文件中,扩展名为(.css)
引入方式:
链接外部样式表
< link hred=“style.css” rel=“stylesheet” type=“text/css” />
rel=“在页面中使用这个外部样式表”
type=“文件的类型是样式表文件”
href=“文件所在的位置”
导入式外部样式表:
< style>
@import url(“common.css”)
< /style>
链接式和导入式的区别
导入式
先加载完HTML再加载css
链接式
先加载css再加载HTML
样式优先级
就近原则
使用css的基本选择器设置字体大小和颜色
css选择器
标签选择器
根据标签作为选择的对象
< p >p标签< /p>
p{
样式内容
}
类选择器
使用class的参数作为选择的对象
< p class=“pStyle”>p标签< /p>
.pStyle{
样式内容
}
id选择器
通过id的值作为选择的对象
< p id=“p”>p标签< /p>
#p{
样式内容
}
.
.
.
.
.
未完待续
PS:有什么错的地方下面可以评论指出