Web学习历程记录(五)
HTML
超文本标记语言
结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
head标签
指定网站的标题
指定网站的关键字/指定网站的描述信息
外挂一些外部的css/js文件
添加一些浏览器适配的相关内容
title标签
专门用于指定网站标题,并且这个指定的标题将来还会作为用户保存网站的默认标题
body标签
用于定义HTML文档中需要显示给用户查看的内容
HTML语法规范
扩展名是html或者htm
html标签不区分大小写
标签可以嵌套标签一般由起始标签开始,结束标签终止,但如果标签不修饰内容,可以在标签里结束
标签属性
属性属于标签,修饰标签,让标签有更多效果
属性一般定义在起始标签里面
属性一般以 “属性 = 属性值”的形式存在
属性值一般用“或者”括起来
标签
排版标签
<!--字体标签-->
<font color = "字体颜色" size = "字体大小(1~7)" face = "字体风格"></font>
<!--标题标签,n取值1~6-->
<hn>标题</hn>
<!--段落标签-->
<p>段落</p>
<!--粗体标签-->
<b>内容</b>
<!--斜体标签-->
<i>内容</i>
<!--下划线标签-->
<hr/>
<!--下划线标签-->
<br/>
<!--插入图片-->
<img src = "图片路径" width = "宽" height = "高" alt = "图片描述" title = "用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示声明内容"/>
<!--无序列表-->
<ul type = "类型">
<li>需要显示的条目内容</li>
...
</ul>
<!--有序列表-->
<ol type = "类型" start = "起始索引">
<li> </li>
...
</ol>
<!--超链接-->
<a href = "指定需要跳转的目标路径" target = "打开的方式">需要展示的内容</a>
<a href="#">假链接</a>
<!--表格标签-->
<table border = "1px" width = "" height = "" bgcolor = "">
<tr>
<td></td>
<tr>
<table>
<!--合并单元格-->
colspan
rowspan
<!--其他标签-->
<table>
<caption>表格标题</caption>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
<th>第三列标题</th>
</tr>
</table>
路径
相对路径就是每次都从html所在文件开始查找
同级
同级就是图片跟html文件在同一文件
src = “xxx.jpg”
src = “./xxx.jpg”
./代表当前目录
上级
上级就是“存储图片的位置”和“存储代码的文件夹”在同一个文件夹中,且必须在一个盘
src = “…/xxx.jpg”
…/代表找到当前文件夹的上一级文件夹
绝对路径就是每次都从指定的盘符开始查找
插入图片练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例二</title>
</head>
<body>
<h1>家用电器排行榜</h1>
<img src="../img/tv01.jpg"/>
<font size="3">创维42AFET 42英寸</font>
<hr/>
<img src="../img/tv02.jpg"/>
<font size="3">海信 42英寸</font>
<hr/>
<img src="../img/tv03.jpg"/>
<font size="3">TCL 40英寸</font>
<hr/>
<img src="../img/tv04.jpg"/>
<font size="3">TCL 56英寸</font>
<hr/>
<img src="../img/tv05.jpg"/>
<font size="3">小米 56英寸</font>
<hr/>
</body>
</html>
超链接和无序列表练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>友情链接</h1>
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">哔哩哔哩</a></li>
</ul>
</body>
</html>
表格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="50%" bgcolor="#ffe4c4" align="center">
<tr bgcolor="#8a2be2">
<td bgcolor="#f5f5dc">1</td>
<td>2</td>
</tr>
<tr bgcolor="black">
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="800" align="center">
<caption><h1>今日小说排行榜</h1></caption>
<tr bgcolor="#8a2be2">
<th>排名</th>
<th>关键名</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</a></th>
</tr>
<tr align="center">
<td>1</td>
<td>西游记</td>
<td><img src="../img/down.jpg"></td>
<td>345</td>
<td>23466</td>
<td><a href="#">点击进入,看你想看</a> </td>
</tr>
<tr align="center">
<td>1</td>
<td>红楼同人</td>
<td><img src="../img/up.jpg"></td>
<td>3242</td>
<td>723423</td>
<td><a href="#">点击进入,看你想看</a> </td>
</tr>
<tr align="center">
<td>1</td>
<td>海底两万里</td>
<td><img src="../img/up.jpg"></td>
<td>4366</td>
<td>73734</td>
<td><a href="#">点击进入,看你想看</a> </td>
</tr>
<tr align="center">
<td>1</td>
<td>羊脂球</td>
<td><img src="../img/down.jpg"></td>
<td>12315</td>
<td>124551</td>
<td><a href="#">点击进入,看你想看</a> </td>
</tr>
<tr align="center">
<td>1</td>
<td>葛朗台</td>
<td><img src="../img/up.jpg"></td>
<td>325</td>
<td>12862</td>
<td><a href="#">点击进入,看你想看</a> </td>
</tr>
</table>
</body>
</html>
扩展
锚点
通过a标签跳转到指定的位置
<a = "xx"></a>
<a href = "#xx"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="a"></a>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<img src="../img/banner_1.jpg" width="500px" height="20000px">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<a href="#a">回到顶部</a>
</body>
</html>
图片链接
在标签a中放入图片链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="../img/guowai_1.jpg"><br/>
百度
</a>
</body>
</html>
详情和概要标签
<details>
<summary>张三</summary>
<p>他身高177</p>
<p>他会飞</p>
</details>
注册页面案例
表单标签
action:提交路径,默认是当前页面
method:提交方式,常用的是get和post,默认get
get和post区别
get请求参数跟在请求地址(地址栏可以看见)后面
get请求相对不安全
get请求对参数大小有限制
<form action="http:www.baidu.com" method="post">
</form>
form常见子标签
input:输出流,通过type属性来指定类型
select:选择列表
textarea:文本域
输入类型
<input type = "xxx"/>
type属性
text:文本输入框
password:密码域
submit:提交按钮
reset:重置按钮
button:空白按钮
radio:单选框
checkbox:复选框
hidden:隐藏字段
file:文件
选择菜单
<select name = "">
<option value = "">显示的内容</option>
</select>
option:选择菜单的选项
name在select里面指定
value在option里面指定
option定义在select里面
textarea文本域
<textarea rows = "20" cols = "30" name = "introduce"></textarea>
cols:列
rows:行
通用属性
name
作为单选和多选框的分组
作为key上传到后台程序。后台程序通过key得到对应的value。如果要把数据提交到后台程序,一定要指定name属性
value
给按钮起名字
设置提交到服务器的值 name = value
设置默认值
text,password:通过value属性
radio checkbox:通过checked属性
select:在option上通过selected属性
textarea:直接在标签体中写
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http:www.baidu.com" method="get">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
性别:<input type="radio" name="sex" value="男"/> 男
<input type="radio" name="sex" value="女"/> 女<br/>
爱好:<input type="checkbox" name="hobby" value="打篮球"/>篮球
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="排球"/>排球<br/>
图像:<input type="file" name="icon"><br/>
籍贯:<select name="address">
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
</select><br/>
自我介绍:<br/><textarea rows="20" cols="30" name="introduce"></textarea><br/>
<input type="submit"/><input type="reset"/>
<input type="button"/>
</form>
</body>
</html>
扩展
新增的type类型
<input type="submit"/><input type="reset"/>
<input type="button"/>
<input type="color">
<input type="date">
<input type="email">
<input type="number">
<input type="search">
<input type="tel">
<input type="url">
<input type="range">
Div CSS
div span
div是html里面的一个标签
没有特定的含义,作为容器,配合css完成网页的基本布局
span也是一个标签,没有特定的含义,一般作为文本容器
div和span的区别
div是块级元素,独占一行
span是行内元素不会独占一行
div中可以嵌套其他所有标签
span中只能嵌套文本/图片/超链接
CSS
什么是CSS
层叠 样式表
层叠:样式的层层叠加
样式表:样式的集合
CSS功能
美化页面
CSS语法
{
属性:属性值 属性值;
属性:属性值 属性值;
}
注意:
属性和属性值用:连接
如果有多个属性值用空格隔开
如果有多个属性,属性和属性之间用;隔开 最后一个;不写
html和css常见的结合方式
通过标签的style属性来结合
<p style = "属性名称:属性;..."></p>
通过style标签来结合
<head>
<style type = "text/css">
标签名称{
属性名称:属性对应的值
}
</style>
</head>
注意点:
style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性可以不写,默认就是type=“text/css”
设置样式时必须按照固定的格式来设置,冒号和分号不能省略
通过link标签结合
创建一个css文件
通过link标签引入
link标签属性:css文件路径
<head>
<link rel="stylesheet" href="../../csss4/myCss.css">
</head>
三种结合方式优先级
就近原则
选择器
控制html标签
盒子模型
谷歌搜索页面代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>谷歌搜索页面</title>
<style>
div{
text-align: center;
}
.right button{
background-color: #4584F3;
color: white;
border: none;
border-radius: 5px;
width: 50px;
height: 28px;
}
.right{
float: right;
margin: 28px;
}
.header{
clear: both;
}
.header .link{
margin-top: 10px;
}
.content{
margin-top: 20px;
}
.content input[type = 'text']{
width: 400px;
height: 30px;
}
.content input[type = 'button']{
width: 100px;
height: 30px;
}
.content .viki{
margin-top: 20px;
}
.content .map{
margin-top: 60px;
}
.footer{
margin-top: 120px;
}
.footer .ad{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="right">
<a href="#">Gmail</a>
<a href="#">图片</a>
<button>登录</button>
</div>
<div class="header">
<div class="logo">
<img src="../img/loge.png">
</div>
<div class="link">
<a href="#">全 部</a>
<a href="#">地 图</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">新 闻</a>
<a href="#">音 乐</a>
<a href="#">更 多</a>
</div>
</div>
<div class="content">
<div class="search">
<input type="text"/>
<input type="button" value="谷歌一下">
</div>
<div class="viki">
<a href="#">维基百科</a>
<a href="#">维基文库</a>
<a href="#">自由的图书馆</a>
<a href="#">更 多 >></a>
</div>
<div class="map">
<img src="../img/ic.jpg">
<a href="#">谷歌地图带你吃喝玩乐</a>
</div>
</div>
<div class="footer">
<div><a href="#">把谷歌设为首页</a></div>
<div class="ad">
<a href="#">广告</a>
|
<a href="#">商务</a>
|
<a href="#">大全</a>
|
<a href="#">条款</a>
</div>
</div>
<div> @2018 Goole 提供</div>
</body>
</html>