html和css
7.HTML和css
-
html是超文本标记语言
-
超文本: 超出了文本的范畴, 功能比文本强大
-
标记语言: 语法由标签组成.
<html> <head> <title>标题</title> //外部的引入文件 css, js //配置: eg 编码 </head> <body> //展示的内容 </body> </html>标签:
</br>:换行 <html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题,h1-h6,显示为标题 <p> 与 </p> 之间的文本被显示为段落 <a href="http://www.w3school.com.cn">This is a link</a>,HTML链接 <font>与</font>,字体标签,颜色:color,大小:size,字体类型:face <b>内容</b> 粗体标签 <i>内容</i> 斜体标签 <hr/>分隔线 <img src="../img/b.jpg" width="400px" height="200px" alt="美女" title="哈哈哈哈"/> 图片标签友情链接
<!--二 无序列表 ul--> <!--type属性: 列表的类型; circle: 空心圆; square: 实心的正方形--> <ul type="square"> <!--li定义列表里面的条目(item). li定义在ul里面--> <li>乔丹</li> <li>詹姆斯</li> <li>艾弗森</li> <li>科比</li> <li>库日天</li> </ul>表格标签
语法: <table border="1px" width="" height="" bgcolor="" align=""> <tr> <td>需要显示的内容</td> </tr> </table> 1.解释说明 table标签代表整个表格 tr标签代表是表格中的一行 td标签就是一行中的一个单元格 2.注意点 表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现 tr定义在table里面, td定义在tr里面表格中的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OB72Sjnh-1581259955100)(img/51.png)]
6.2 技术分析
1.表单标签【重点】
- 通过form来定义
<form action="http://www.baidu.com" method="post">
...
</form>
常用属性
action:提交路径,默认是当前页面,#
method:提交方式,常用的是get和post. 默认就是get
get和post区别
1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
2. get方式相对不安全, post方式相当安全一些
3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的
2.form的常见子标签
input:输入域, 通过type属性来指定类型
select :选择列表
textarea：文本域
2.1input输入类型
<input type="xxx"/>
type属性,类型是由属性（type）定义的
- text:文本输入框
- password:密码域
- submit：提交按钮
- reset：重置按钮
- button:空白按钮
- radio:单选框
- checkbox:复选框
- hidden:隐藏字段
- file:文件
2.2select :选择菜单
<select name="">
<option value="">显示的内容</option>
</select>
- option：选择菜单的选项
注意：
- name在select里面指定
- value在option里面指定
- option定义在select里面
2.3 textarea:文本域
<textarea rows="20" cols="30" name="introduce"></textarea>
属性：
- cols列
- rows:行
3.通用属性
1.name
- 作为单选和多选框的分组
- 作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性
2.value
- 给按钮起名字
- 设置提交到服务器的值 name=value
4.设置默认值
- text,password:通过value属性
用户名: <input type="text" name="username" value="zs"/>
- radio checkbox:通过checked属性
性别: <input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0" checked="checked" />女
- select :在option上通过selected属性
籍贯: <select name="address">
<option value="sz">深圳</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
</select><br/>
- textarea:直接在标签体中写
自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>
3.思路分析
4.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--一, 表单标签: 作用提交用户输入的数据的(收集用户输入的信息)
action属性: 提交的路径(写远程的,也可以写本地的页面)
method属性: 指定的提交的方式 get(get方式提交,默认) post(post方式提交)
get和post方式区别:
1. get方式提交的数据(请求参数)在地址栏可见(拼接在请求的路径后面), post方式不可见
2. get方式相对不安全, post方式相当安全一些
3. get方式对提交的数据(请求参数)的大小有限制的, post方式没有限制的
name属性作用: 1. 作为单选,复选的分组
2. 作为key把数据提交(如果你想把数据提交, name一定要设置)
value属性作用: 1,给按钮取名字
2.作为值提交到服务器
-->
<form action="#" method="get">
用户名: <input type="text" name="username"> <br>
密 码: <input type="password" name="pwd"> <br>
性 别: <input type="radio" name="sex" value="0" >男 <input type="radio" name="sex" value="1"> 女 <br>
爱 好: <input type="checkbox" name="hobby" value="抽烟">抽烟
<input type="checkbox" name="hobby" value="喝酒">喝酒
<input type="checkbox" name="hobby" value="烫头">烫头 <br>
头 像: <input type="file" name="head_img"> <br>
籍 贯: <select name="province" id="">
<option value="1">广东省</option>
<option value="1">广西省</option>
<option value="1">湖北省</option>
<option value="1">湖南省</option>
</select><br>
自我介绍: <br>
<textarea name="introduce" cols="30" rows="5"></textarea> <br>
<input type="submit" value="注册按钮">
</form>
</body>
</html>
CSS层叠样式表
1.div和span
1.1什么是div和spn
div是html里面的一个标签
. 没有特定的含义,作为容器. 一般用于配合css完成网页的基本布局, span也是一个标签,没有特定含义,一般作为文本容器
1.2div和span的区别
div是块级元素会独占一行,span是行内元素不会独占一行
div中可以嵌套其它所有的标签, span标签中只能嵌套文本/图片/超链接
2.CSS概述和体验
2.1什么是CSS
- 层叠样式表
- 层叠: 样式的层层叠加(eg: 刷墙)
- 样式表: 样式的集合, 说白了就是属性的集合
学习HTML的核心是标签, 学习CSS的核心是属性, 选择器
2.2 css能做什么
- 美化页面,修饰页面
- html的标签作用展示页面,定义页面的, CSS的作用修饰页面
- eg: 把HTML当做毛坯房(骨架), 把CSS当做装修(样式)
2.3为什么要学习CSS
-
我们在上次课中已经遇到了一些样式的问题, font标签的字体不能比1还小不能比7还大, 超链接标签的下划线去不掉…
-
通过标签来修改样式的缺点:
1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
2.当需求变更时我们需要修改大量的代码才能满足现有的需求
-
所以在企业开发中修改样式都是交给CSS来做,通过CSS来修改样式的好处:
1.不用记忆哪些属性属于哪个标签
2.当需求变更时我们不需要修改大量的代码就可以满足需求
2.4CSS语法
{
属性:属性值 属性值;
属性:属性值 属性值
}
注意
- 属性和属性值用:连接
- 如果有多个属性值用空格隔开
- 如果有多个属性,属性和属性之间用;隔开 最后一个;不写
3.html和css常见的结合方式
3.1通过标签的style属性来结合【了解】
<!--通过style属性-->
<p style="属性名称:属性值;..."></p>
3.2通过style标签来结合【掌握】
<head>
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
}
</style>
</head>
注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
2.style标签中的type属性其实可以不用写, 默认就是type="text/css"
3.设置样式时必须按照固定的格式来设置. key: value; 其中:不能省略, 分号大多数情况下也不能省略
3.3通过link标签结合【掌握】
- 创建一个css文件(后缀是css)
- 通过link标签引入
<head>
<link rel="stylesheet" href="../../css/myCss.css" />
</head>
link标签属性:
- href:css文件路径
3.4 三种结合方式优先级
就近原则(相对于代码,也就是要修饰的标签)
4.选择器
4.1什么是选择器
css修饰页面,作用某个标签.CSS选择器就是控制html标签,说白了就是找到标签的
4.2基本选择器【掌握】
- 通用选择器 < 标签选择器 < 类选择器 < ID选择器
4.3扩展选择器
由基本选择器组合而成，可以有更加灵活的选择方式
4.4 伪类选择器【了解】
5.CSS常用的属性
5.1背景属性
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*背景图片*/
background-image: url("../../img/a.gif");
/*设置平铺*/
background-repeat: repeat;
}
div{
width: 200px;
height: 200px;
/*背景颜色
background-color: red;
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.2文本样式
5.3字体属性
6.盒子模型
任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)，
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。整个网页由各种小盒子组成。
6.1盒子属性
6.2 外边距
- 标签和标签之间的距离就是外边距
一,设置外边距
1.连写
margin: 上 右 下 左;
2.非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
3. 注意地方:
3.1 连写注意的地方
- margin:10px; 上下左右都是10px
- margin:10px,20px; 上下是10px,左右20px
- margin:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置外边距特点
外边距的那一部分是没有背景颜色的
6.3内边距
- 就是标签里面的内容距离边框距离
一,设置内边距
1.连写
padding: 上 右 下 左;
2.非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
3. 注意地方:
3.1 连写注意的地方
- padding:10px; 上下左右都是10px
- padding:10px,20px; 上下是10px,左右20px
- padding:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置内边距特点
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
6.4边框属性
7.浮动属性
7.1 概述
在正常到文档流中,元素是从上往下渲染出来的, 当我们给某个元素设置浮动属性之后, 那么这个元素就会脱离正常的文档流. 感觉就像有一个新的图层在页面上,有点像PS里面图层. 浮动属性主要是和div一起做页面布局的
7.2设置浮动
- 语法
float: 取值 left(左浮动)
right(右浮动)
- 特点:在浮动流中是不区分块级元素/行内元素/行内块级元素的, 都可以设置宽度和高度
- 浮动规则
1.相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
2.不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
3.浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
7.3清除浮动
- 语法
clear: 取值 none: 默认取值,不清除
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
- 清除浮动的方式
方式一: 在当前的元素里面添加clear属性清除
方式二: 添加一个新的盒子添加clear属性清除
1.3 思路分析
1.4 代码实现
- 案例一下的index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>高仿百度页面</title>
<style>
.container{
width: 100%;
height: 100%;
}
.first{
overflow: hidden;
border-bottom: 1px solid gainsboro;
}
.left{
float: left;
}
.left span{
color: deepskyblue;
}
.right{
float: right;
}
.right input[type='button']{
background-color: #38f;
color: #fff;
border: none;
height: 100%;
margin: 0;
line-height: 32px;
}
a{
color: black;
margin: 0 8px;
}
.icon{
width: 300px;
}
.input-container .input-div{
/*font-size: 0;*/
}
.input-text{
width: 50%;
height: 42px;
font-size: 20px;
offset: 0;
}
.input-button{
border: none;
background-color: #3388ff;
color: white;
font-size: 20px;
height: 48px;
padding: 2px 16px;
vertical-align: bottom;
margin-left: -10px;
}
.input-container{
text-align: center;
}
.bottom-container{
text-align: center;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="container">
<!--第一行-->
<div class="first">
<!-- 左边内容-->
<div class="left">
深圳: 23°C <span>优</span> | <a href="#">换肤</a> <a href="#">消息</a> <a href="#">显示频道</a>
</div>
<!-- 右边内容-->
<div class="right">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视屏</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">小凯</a>
<a href="#">设置</a>
<input type="button" value="更多产品">
</div>
</div>
<!--网页中间位置的搜索内容-->
<div class="input-container">
<div>
<img class="icon" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</div>
<div class="input-div" >
<input class="input-text" type="text">
<input class="input-button" type="button" value="百度一下">
</div>
</div>
<!--网页底部的内容-->
<div class="bottom-container">
<div>
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
<a href="#">百度推广</a>
</div>
<div>
©2019 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号 <a href="#">京公网安备11000002000001号</a>
</div>
</div>
</div>
</body>
</html>
扫一扫
1281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
