走进html和css-总结

最新推荐文章于 2022-03-19 17:36:54 发布

Allen_OI

最新推荐文章于 2022-03-19 17:36:54 发布

阅读量148

点赞数 1

分类专栏：总结文章标签： HTML5小白 Web前端小白 Web基础

本文链接：https://blog.csdn.net/Allen_OI/article/details/95985039

版权

总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

走进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>斜体
注释和特殊符号
	<!--  注释内容  --> 注释的格式,中间写内容
	&nbsp;   空格
	&gt;       大于号(>)
	&lt;        小于号(<)
	&quot;    引号(")
	&copy;    版权符号(©)

使用图像相关标签制作图文并茂的页面

图像格式
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:有什么错的地方下面可以评论指出

Allen_OI

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
走进html和css-总结

走进html和css-总结使用HTML5的基本结构创建网页使用文本相关标签排版文本信息使用图像相关标签制作图文并茂的页面使用< a >标签创建超链接,锚链接及功能性链接超使用媒体元素在网页中播放视频使用HTML5结构元素进行网页布局使用css的基本选择器设置字体大小和颜色使用HTML5的基本结构创建网页一个HTML5的基本模板的格式为<!DOCTYPE html>&...
复制链接

扫一扫