**
HTML
**
1.什么是HTML?
是用来制作网页内容和结构 是一种超文本标记语言
超文本:比普通文本更强大
标记语言:就是标签语言
标签可用于设置文本样式,图片样式,超链接等… 用<>表示
例如:<h1,2…> 显示文本为 一级标题 二级标题…
页面是由元素组成的
2.HTML中的属性
属性就是为标签提供更多信息,只能添加到开始标签中
格式为 属性名=属性值
注释为
3.HTML中的标签
标签的分类
开始和结束标签
标签可以嵌套使用
div和span标签
:行内容器,一般用来编织元素以达到某种样式
这两个标签的核心作用是页面布局
4.属性的规范
属性名必须唯一
不区分大小写
属性的值用双引号引起来
5.常用属性
class:定义元素的类名,用来访问特定元素
id:定义元素的唯一标识,在整个文档中必须唯一
name:定义元素的名称,一般用于表单元素提交服务器
value:定义在元素内显示默认值
style:定义元素css的样式
6.特殊字符
< 等价于 <
> >
= "
. '
& &
空格
7.文本标签
p:表示段落
h:文档标题,<h1…h6>
hr:表示段落主题切换
ul:无序列表,无编号
ol:有序列表,带编号
li:表示条目
em:斜体显示
i:表示文本斜体
strong:表示文本重要,用粗体表示
b:表示加粗文本
font:表示字体
8.div样式布局
可以通过给
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
div {
/*显示边框*/
border: 1px solid red;
/*宽度,占屏幕60%*/
width: 60%;
/*边框外边距*/
margin: auto;
}
</style>
</head>
<body>
<br>
<div>
第一个div<br/>
robin<br/>
robin
</div>
</body>
</html>
9.图片标签可显示一张本地或网络图片
src属性:必须属性,用来表示图片的地址
title属性:鼠标悬停显示文本
height和widht表示图片的高度和宽度
10.超链接标签
href属性表示超链接url地址
11.表单标签
actior属性:表示提交数据的路径
method属性:用于表示提交的方式(get/post)
get:表单数据会显示在地址栏中,不安全,长度有限制
post:不会显示在地址栏中,安全,数据封装在请求体中,长度无限制
autocomplete属性:是否补全记录(on/off)
12.表单项标签
lable:配合表单标签使用
input:接收用户数据
buttn:按钮,不同按钮有不同作用
type标签
type的属性值:
text:普通文本框
password:密码框
email:邮箱
radio:单选框,选项必须要有name属性值,value属性值设置时机提交的值.chcked表示默认选择
checkbox:多选框,选项必须要有name属性值,value属性值设置时机提交的值.chcked表示默认选择
date:日期框
time:时间框
datetime-local:时间和日期框
number:数字框
range:滚动条数值框 min最小 max最大
search:可清除文本框
tel:电话框
url:网址框
file:文件上传框
hidden:隐藏框, values值设置实际提交值
13.其他标签
select标签用于下拉列表
optgroup标签表示下拉列表分组
label属性用于设置分组名称
opyion标签表示下拉列表标签
textarea标签表示文本域
rows属性表示行数
cols属性表示列数
14.根据上述知识点 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../img/bg.png");
}
.center{
/*背景颜色*/
background: white;
/*宽度*/
width: 400px;
/*文本对齐方式*/
text-align: center;
/*外边距*/
margin: auto;
}
</style>
</head>
<body>
<!--顶部公司图标-->
<div>
<img src="../img/logo.png">
</div>
<!--中间注册信息-->
<div class="center">
<div>注册详情</div>
<hr/>
<!-- 表单标签-->
<form action="#" method="get" autocomplete="off">
<div>
<label for="username">姓名:</label>
<input type="text" id="username" name="username" value="" placeholder="在此输入姓名" required/>
</div>
<div>
<label for="password">密码:</label>
<input type="text" id="password" name="password" value="" placeholder="在此输入密码" required/>
</div>
<div>
<label for="email">邮箱:</label>
<input type="text" id="email" name="email" value="" placeholder="在此输入邮箱" required/>
</div>
<div>
<label for="tel">手机:</label>
<input type="text" id="tel" name="tel" value="" placeholder="在此输入手机号" required/>
</div>
<hr/>
<div>
<label for="gender">性别</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
</div>
<div>
<label for="hobby">爱好:</label>
<input type="checkbox" id="hobby" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="movie">电影
</div>
<div>
<label for="birthday">出生日期:</label>
<input type="date" id="birthday" name="birthday" value="">
</div>
<div>
<label for="city">所在城市:</label>
<select id="city" name="city">
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会城市">
<option>西安</option>
<option>杭州</option>
<option>郑州</option>
<option>武汉</option>
</optgroup>
</select>
</div>
<hr/>
<div>
<label for="desc">个性签名:</label>
<textarea id="desc" name="desc" rows="5" cols="40" placeholder="个性签名"></textarea>
</div>
<hr/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第一次写博客,啰里啰嗦,
有错误的地方,还请批评指正
***CSS
1.什么是CSS(层叠样式表)
就是设置和布局网页的一种计算机语言,会告知浏览器如何渲染页面元素,就是给浏览器做美化的
2.CSS的组成
由选择器和样式声明组成
选择器:用来选择指定元素
选择器格式:
选择器{
属性名:属性值
属性名:属性值
属性名:属性值
}
样式声明
h1{
color:red
fond-size;5px
}
3.浏览器开发者工具
4.CSS的基本语法
内联引入方式:在标签中通过style属性控制样式,只能影响当前一行
格式:<标签 style=“属性名:属性值;属性名:属性值;”>内容</标签>
内部样式方式:在<head>标签中通过<style>标签控制样式,只能影响当前文件
格式:<head>
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
<head>
外部样式方式:在<head>标签中通过<link>标签引入独立css文件,可以影响不同的文件
格式:<link rel="stylesheet" href=css文件>
5.选择器的分类
基本选择器
元素选择器 标签名 根据标签匹配元素
格式:div{}
类选择器 . 根据class属性值匹配元素
格式: .cneter{}
id选择器 # 根据id属性值匹配元素
格式:#username{}
属性选择器
符号 [] 根据指定属性匹配元素
格式:[type]{} [type=text]{}
伪类选择器
组合选择器
6.边框样式
7.文本样式
8.表格标签
9.样式控制
10.盒子模型是什么?
是通过设置边框和元素内容的边距,从而实现布局的方式,分为内边距和外边距两种
#**# **
Nginx**
是什么?
是一款服务器软件
功能是能和服务器硬件组合,从而将程序发布在Nginx服务器上,让用户访问
安装
发布项目
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
