HTML CSS
开发人员
前端开发 主要负责的页面样式
后台开发 主要负责的后台逻辑
前端开发
写HTML代码
写CSS 样式
写JS javascript
HTML 超文本标记语言 前端语言
PHP 语言 也可以作为前端语言
普通文本：notepad
只能记录一些文字
超文本：
除了记录普通的文字，还可以记录图片，链接，按钮，音频文件，视频文件
标记：
就是绰号
<b>发士大夫士大夫士大夫十分士大夫士大夫</b>
b 就是标签名称 ， 字体加粗的效果
在html中使用标签来标记一段内容
<标签名字>xxxxxx<标签名字>
F12 开发者工具
Element 元素
一个html文件最基本的格式
HTML文件
xxxxx.html 以.html为后缀的文件
<html>
<head></head> 头
用于说明这个html文件的
title，字符编码，链接的css文件，链接的js文件，头部中的内容不会显示在页面上
<body></body> 体
整个页面显示的内容都写在body中
</html>
有很多标签都是成对出现的
但也有少部分的标签是单个的
浏览器
窗口
<head>
<title>title内容</title>
</head>
常用的标签
<html></html>
<head></head>
<body></body>
<title></title>
标题标签 h1-h6
作用：对字体有加粗，自动换行，字体固定大小的效果
<b></b> 字体加粗效果
<i></i> 字体倾斜效果
<font></font> 字体
size=”4”
color=”red”
<a ></a> 添加一个链接
href="file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://www.duoceshi.com"
href 属性值是链接的地址
target=”_blank” 打开链接新开窗口
<img /> 单个的标签 插入图片
src=”图片的路径”
src ：图片的源头
<br /> 换行的标签
form 表单
1. 输入框（文本输入框，密码输入框）
type=”text” type=”password”
2. 单选按钮
3. 多选按钮
4. 普通按钮
5. 提交按钮
6. 重置按钮
7. 下拉框
8. <input /> 输入标签
type=”” type:类型
type=”text” 输入文本类型
type=”password” 输入密码类型
type=”radio” 输入单选按钮类型
name 属性每个标签都有，属性值可以自定义
type=”checkbox” 输入复选框类型
type=”submit” 输入提交型按钮
点击按钮，会发送内容提交给后台
按钮的名字使用的是value属性
value=”登录” 这个按钮就是登录按钮
value=”百度一下” 这个按钮就是百度一下按钮
value属性值可以自定义
type=”button” 输入按钮类型
button 普通的按钮
type=”reset” 输入重置按钮类型
把所有的输入的内容清空，然后重新输入
重置的范围 form表单之间
下拉框
<select></select> 下拉框
<option></option> 下拉选项的内容
籍贯<select>
<option>广东</option>
<option>湖南</option>
<option>河南</option>
</select>
<table></table> 表格
<tr></tr> 行
<td></td> 列
border 边框
border=”1px”
1px 1像素
cellspacing="0px"
边框与边框的距离
cellpadding="0px"
边框与文字的距离
rowspan 合并行
属于td 标签的属性
rowspan=”2” 纵向合并单元格（合并行）
colspan=”2” 横向合并单元格（合并列）
有序列表，
前面会显示编号
1，2，3
a,b,c
西塔字母1，2，3
无序列表
前面会显示符号
file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\KGM`}K($2K1DIXW}A$J`YL6.png
实心圆
正方形
<ul> 无序列表
<li></li> 列表中项
<li></li>
</ul>
style=”list-style-type:none”
去除列表前面的符号
<ol> 有序列表
<li></li>
<li></li>
<li></li>
</ol>
css样式
style="list-style-type: none;"
style 样式
list-style-type 列表样式类型
none ：空
Hbuilder 工具 html的创建者
作用：写HTML，css,js代码，
管理web前端的工程代码
H html
builder 创建者
hbuilder 基本操作
ctrl +s 保存
ctrl+r 运行
你写的html代码需要先保存，再运行
标签的属性
<标签名称 属性名称=属性值>
size 属性名称
4 属性值
size=4 把字体设置为4号字
color=“red” 设置字体的颜色
p 标签 段落标签
作用 换行的效果
<p>fdsfsdfsdfs</p>
<div></div>
没有什么行业，这个div标签经常使用
style="width: 200px;"
width ：宽
height:150px
height : 高
background-color ：背景色
a 标签 href
img 标签 src=
form 标签 input
select 标签 option
ul 标签 li
table 标签 tr td
div 标签
CSS 层叠样式表
style=”属性：属性值”
cascading style sheet
选择器，不同的选择器有不同的优先级
优先级高的覆盖优先级低的，这种称为
层叠或者样式覆盖
元素选择器
元素名称(标签的名称) {
属性1：属性值1；
属性2：属性值2；
color:red
}
p { color:red} 把所有的p标签里面的文字
显示为红色
id 选择器
id 使用“#”表示
在标签里面添加id属性
id=”p1” 属性值自定义
id 理解为身份证，id属性值唯一
#p1 == id=“p1”
class 选择器 类
100个p标签，把其中的10个改成红色
class=”p2”
class 用点来表示 “.”
class 属性值可以自定义
css 文件中
.p2
绿色覆盖了红色，样式的层叠
id选择器优先级>class选择器优先级 >元素选择器优先级
css样式
font-family: "微软雅黑"; 字体
font-size: larger; 字体大小
color:red 字体颜色
color:rgb(数字1，数字2，数字3)
rgb
数字0-255 之间
数字1 rgb(255,0,0) 红色
数字2 rgb(0,255,0) 绿色
数字3 rgb(0,0,255) 蓝色
#101010 颜色
每两位代表一个颜色
十六进制数字
数字的范围00-FF
#FF0000 红色
#00FF00 绿色
width: 200px;
height: 200px;
border-color: red; 所有边框
border-top-color: red; 上边框
border-left-color: red; 左边框
border-right-color: red; 右边框
border-bottom-color:red;下边框
text-align: center; 文本居中
text-align: right; 文本居右
text-align: left; 文本居左
line-height: 50px; 输入框行高
background-color: red; 背景色
background-image:url(图片路径)
背景图片
background-repeat: no-repeat;
背景图片不复制
background-repeat:repeat-x ;
背景图片横铺
background-repeat: repeat-y;
背景图片纵铺
background-position: center;
背景居中
background-position: left;
背景居左
background-position: bottom;
背景居下
background-position:left
bottom;
背景左下
xxxx.css css样式文件
后缀名 .css结尾的
<link> 链接
作用 链接样式表，读取样式文件里面的内容
主要复习的内容
html 常用的标签（重要）
form 表单中那几个输入框，按钮，下拉，单选
链接，图片
css 作为了解
|
|
170
0
多测师社区 
