HTML简介
1.网页
- 网站中的一个页面,通常是HTML格式的文件(后缀名一般为.htm或.html),要通过浏览器来阅读。
- 重要元素:图片,文字,声音,视频,链接等等。
- HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言。
- HTML不是一种编程语言,而是一种标记语言(markup language)。
2.常用浏览器
IE,Edge,firefox,chrome,Safar,Opera等。
3.Web标准构成
- 结构:对网页元素进行整理分类。
- 表现:设置网页元素的版式,颜色,大小等外观样式,主要指CSS。
- 行为:网页模型的定义及交互的编写,主要Javascript。
# <u> HTML标签</u>
1.标签关系
包含关系
<head>
<title> </title>
</head>
并列关系
<head> </head>
<body> </body>
2.基本结构标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--否则乱码-->
<>
<title> 第一个页面</title>
</head>
<body>
<p> 加入Join,摆烂人生</p>
</body>
</html>
3.常用标签
1.标题标签h1-h6 换行标签br
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
..................
<h6>我是六级标题</h6>
2.文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--否则乱码-->
<title> 第一个页面</title>
</head>
<body>
<strong>此处内容粗体</strong>
<em>此处内容斜体</em>
<del>此处内容删除</del>
<mark>此处内容有荧光笔标记</mark>
<pre>此处内容我可以写诗,并保留我原本格式</pre>
<p>此处内容我想些什么写什么比换行间隔大</p>
<br />
H<sub>2</sub>O
2<sup>2</sup>
<!--我是个大帅比,别找了,你看不见-->
讲 究
<x小于号;>大于号;
div {
text-align: center;
}
div {
text-decoration:underline;
}
</body>
</html>
粗体或
斜体或
下划线
删除线
标记(像是荧光笔)
原格式(写啥显示啥)
一个段落
H2(2跑小面 水的化学式)O
同理
空格 大于号 小于号
text-align 属性用于设置元素内文本内容的水平对齐方式
下划线
3.特殊标签div和span
没有语义,它们就是一个盒子,用来装内容。
一行只能放一个
大盒子。span实现跨距,一行可放多个,小盒子。
4.图像标签和路径
<img src="图像URL"/>
src是img标签的必须属性,指定文件路径和文件名。
鼠标悬停在图片上所显示的文字用
图片显示不出来用来表明大致内容
设置图片的高度和宽度一般设置一个,另一个等比例自动缩放(避免失真)
还可给图片设置边框 粗细(CSS内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--否则乱码-->
<title> 第一个页面</title>
</head>
<body>
<img src="天选姬静态PC“新年”.jpg" border="10" alt="天选姬"/><!--图片显示不出来就用alt-->
<img src="天选姬静态PC“新年”.jpg" title="天选姬" height="500"/><!--鼠标悬停在图片上所显示的文字-->
</body>
</html>
5.路径问题
1.相对路径可分为:相对于目前html文件的(用符号’/‘)
同一级
<img src="image.jpg"/>
上一级
<img src="../wenjian.gif"/>
下一级
<img src="images/baidu.gif" />
2.绝对路径:可分为(用符号’\‘)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 第一个页面</title>
</head>
<body>
<image src="网址(从盘符到文件)" />
</body>
</html>
6.超链接标签
1.外部链接< a href=“http://www.baidu.com”>百度(ctrl+左键可打开)
2.内部链接:网站内部页面之间相互链接
3.空链接:如果没有确定链接目标首页
4.下载链接:文件或者下载包(压缩包)下载文件
6.锚点链接:在一个页面上进行跳转,到指定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 第一个页面</title>
</head>
<body>
< a href="http://www.baidu.com target="_blank">百度</a>
<a href="#">首页</a>
<a href="wenjian.zip">下载文件</a>
<a href="http://www.baidu.com"><img src="fjia.jpg"></a>
<a href="#name">标题</a> <!--点他跳转到下面那个-->
<h3 id="name">标题<h3>
</body>
</html>
7.表格
1.<table> </table> 是用于定义表格的标签。
2.<tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
3.<td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
4.字母 td 指表格数据(table data),即数据单元格的内容。
5.一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.
<th> 标签表示 HTML 表格的表头部分(table head 的缩写)
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
跨行合并:rowspan=“合并单元格的个数”
最上侧单元格为目标单元格, 写合并代码
跨列合并:colspan=“合并单元格的个数”
最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲:
先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。
比如:。删除多余的单元格。
8.列表
1.列表可以分为三大类:无序列表ul、有序列表ol和自定义列表。
li 与 /li之间相当于一个容器,可以容纳所有元素。
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。在 HTML 标签中,ol 标签用于定义有序列表,列表排序以数字来显示,并且使用 li 标签来定义列表项。有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
9.表单
1.使用表单目的是为了收集用户信息。
在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
- 提交数据
3.在表单元素中 标签用于收集用户信息。在 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
4. 表单元素 下拉框
使用场景: 在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用标签控件定义下拉列表。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>
5.textarea> 表单元素
-
使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 textarea 标签。
-
在表单元素中,textarea 标签是用于定义多行文本输入的控件。
-
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
-
行数rows,列数也就是每行的字符数cols
-
<textarea rows="3" cols="20"> 文本内容 </textarea>
6.下拉框,文本域,都应该在里面并且有name属性。
<form> <input type=“text " name=“username”> <select name="jiguan"> <option>北京</option> </select> <textarea name= "message"> </textarea> </form>
CSS简介
1.功能
CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。
2.语法规范
1.选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
(css选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。)
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”分开
5.多个“键值对”之间用英文“;”进行区分
所有的样式,都包含在
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
3.选择器
选择器分为基础选择器和复杂选择器
基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器。
1.标签选择器:
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
<head>
<style>
div {
color: blue;
font-size: 100px;
}
</style>
</head>
<body>
<div>我想变成蓝色</div>
<div>我想变成蓝色</div>
<div>我想变成蓝色</div> <!--都变成蓝色-->
<div>我想变成蓝色</div>
<div>我想变成蓝色</div>
</body>
作用:
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
2.类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.
<head>
<style>
.div {
color: blue;
font-size: 100px;
}
.red{
color:red;
}
.font35{
font-size:35px;
}
</style>
</head>
<body>
<div>我想变成蓝色</div>
<div>我想变成蓝色</div>
<div>我想变成蓝色</div>
<ol><li class="red font35">我想变成蓝色</li></ol>(变成红色字号35)
<span class="red font35">我想变成蓝色</span>(变成红色字号35)
</body>
结构需要用class属性来调用 class 类的意思
1.如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
2.类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。
3.类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
4.可以理解为给这个标签起了一个名字,来表示。
5.长名称或词组可以使用中横线来为选择器命名。
6.不要使用纯数字、中文等命名,尽量使用英文字母来表示。
3.ID选择器跟class差不多,在JS中用的多,在CSS中一般用CLASS
4.通配符选择器
通配符选择器不需要调用, 自动就给所有的元素使用样式, 特殊情况才使用
*{
margin: 0;
padding: 0;
}
4.文本属性
可定义文本的颜色,对齐文本,装饰文本,文本缩进,行间距
1.颜色 三种格式
<style>
div {
color :red;
RGB (100%,50%,63%)
color: #FF0000, #FF6600;
}
</style>
-
对齐方式 三种
<style> h1 { text-align:center; text-align:right; text-align:left; } </style>
3.装饰文本
属性值 描述 none 默认,没有装饰线 underline 下划线 overline 上划线(几乎不用) line-through 删除线(不常用) div { text-decoration:underline; }
4.段落缩进
<style> p{ text-indent:20px;//2em } </style>
5.行高
<style> <div> { line-height:16px; } p{ line-height:20px; } </style>
5.引入方式
样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便 结构样式混写 较少 一个标签 内部样式表 部分实现结构样式分离 结构样式没有彻底分离 较多 一个页面 外部样式表 完全实现结构样式分离 需要引入 最多 多个页面
1.行内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--否则乱码-->
<title> 第一个页面</title>
</head>
<body>
<p style="color:red; font-size:16px;"> 加入Join,摆烂人生</p>
</body>
</html>
2.内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--否则乱码-->
<title> 第一个页面</title>
p{
color:red;
}
</head>
<body>
<p> 加入Join,摆烂人生</p>
<p> nenu</p>
</body>
</html>
3.外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><!--否则乱码-->
<title> 第一个页面</title>
<link rel="stylesheet" href="css路径">//另一个文件夹
</head>
<body>
<p> 加入Join,摆烂人生</p>
</body>
</html>