HTML简介
HTML指的是超文本标记语言,它不是一种编程语言,而是一种标记语言,所谓标记语言就是一种标记标签,HTML就是使用标记标签来描述网页。Web浏览器的作用是读取HTML文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是使用标签来解释页面的内容。通过HTML语言我们可以设置文本的格式,根据我们的喜好调整标题,字体,颜色等等,还可以在页面中增加超链接来实现页面间的跳转等一系列功能。
CSS简介
CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
尝试创作第一次制作网页
网页效果
HTML的格式
DOCTYPE声明了文档的类型
<html>标签是 HTML 页面的根元素,该标签的结束标志为</html>
<head>标签包含了文档的元数据(meta)。
<title>标签定义文档的标题。
<body>标签定义文档的主体,即网页可见的页面内容,该标签的结束标志为</body>。
<p>标签作为一个段落显示,该标签的结束标志为</p>。
<h1>标签作为一个标题使用,该标签的结束标志为</h1>
元素属性
HTML元素属性一般在开始标签中,以键值对表示
常见属性
空元素
一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>
等等。我们称其为空元素,如下:
HTML链接
HTML 链接 - target 属性
target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击。
链接分类
外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href=“index.html”> 首页 </a >。
空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。
下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> 第2集 </a>
无序列表:标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id=“two”>第2集介绍</h3>
列表
无序列表:
<ul></ul>
中只能嵌套<li></li>
,直接嵌套<li></li>
;<li></li>
之间相当于一个容器,可以容纳所有元素。
type: disc 圆点
type:square 正方形
type:circle 空心圆
有序列表:
type:1
:a
:A
:i 小写罗马数字
:I 大写罗马数字
表单
当网站需要获取我们的一些信息时,我们就需要使用表单(form)来让用户填写或选择。
图片
WEB上支持的图片格式
GIF(图形交换格式):GIF格式文件最多只能保存256种颜色,该格式支持透明色,支持动画效果。
JPEG(联合图像专家组):该格式不支持透明色和动画,颜色可达1670万种。
PNG(网络可移植式):该格式支持透明色和动画,颜色从几种到1670万种。
图片标记<img src=”图片的路径”/>
路径:../代表出(向上一级)一层文件夹,/用于分隔文件与文件夹的层次。
图片路径
该图片文件与当前文档在同一目录中
该图片文件在当前目录下的images目录中
空元素
一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>
等等。我们称其为空元素,如下:
CSS
简介
CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
内链样式
内部样式表
外部样式表
CSS基本语法
选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。
CSS颜色表示法
1、颜色名表示,比如:red 红色,gold 金色
2、rgb表示,比如:rgb(255,0,0)表示红色
3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00
标签选择器
标签选择器:标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
id选择器:通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择
类选择器:通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
层级选择器:主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
组选择器 :多个选择器,如果有同样的样式设置,可以使用组选择器。
伪类及伪元素选择器:常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
溢出
当元素内容超过其指定的区域时,我们通过溢出overflow属性来处理这些溢出的部分
溢出属性有一下几个值:
visible 默认值,溢出部分不被裁剪,在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
auto 裁剪溢出部分,视情况提供滚动条
以上内容较好理解,请自行进行验证。
关于滚动,我们还可以单独对上下或左右方向进行,如下代码所示:
CSS盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
设置宽高:
设置边框:
设置内间距padding:
显示
HTML 的元素可以以称为区块 或 内联的方式进行显示。
区块元素
区块元素在浏览器显示时,通常会以新行来开始(和结束)。如:<h1>, <pre>, <ul>, <table>,<div>
等。
内联元素
内联元素相反,他们总是一个接一个进行显示,不会新起一行。如: <span>, <input>, <td>, <a>, <img>
等。