day05
day05
html+css+js
html是网页的主题，css是美化网页的，js是给网页写逻辑，做动画效果的。
HTML
简介
超文本标记语言，Hyper Text Markup Language的缩写，是一种用于创建网页的标准标记语言。
hml的容错率比较高，html语言由游览器的解码引擎决定的。
注释
<!--
-->
对网页的解释，一般编写注释是为了其他开发人员阅读
网页的组成部分
1. 网页的声明
2. 网页的根标签
3. 网页的头部
4. 网页的身体
5. 网页的其他内容（CSS、JavaScript）
代码：
<!DOCTYPE><!-- 网页的声明 -->
<html><!-- 网页的根标签 -->
<head><!-- 网页的头部 -->
<!--
网页的编码
引入的网页样式(CSS)
引入的网页逻辑(js)
-->
<title>第一个网页</title><!-- 网页的标题 -->
</head>
<body><!-- 网页的身体 -->
</body>
</html>
常用标签
meta标签
格式：
<meta />
属性：
charset="gkb"
设置网页的编码
gbk：国际（可以显示所有的中文）
URF-8：万国码（号称地球上主要有计算机的国家的语言的支持）
GB2312：东欧国家使用的编码
BIG5：繁体中文
编码之间中文的转换：
GBK：一个汉字拆分为2个字节
UTF-8：一个汉字拆分为3个字节
标题标签
格式：
<h1></h1>
<h2></h2>
...
<h6></h6>
特点：
字体加粗，上下有行距，1~6依次变小。
水平线标签
格式：
<hr/>
属性：在标签内部以键值对形式存在的就是属性，通过属性给标签设置样式
<hr color='red' ... />
color='red'
width='50%'
...
表示颜色的方式：
英文单词 red
16进制表示颜色 #999999
网络三原色 rgb(a,b,c)
文本标签
格式：
<font></font>
px: 像素
换行标签
格式：
<br/>
网页中的空格，只能打出一个可以使用 表示一个空格。
段落标签
格式：
<p></p>
浏览器会自动地在段落的前后添加空行。是块级元素。
加粗标签
格式：
<b></b> 只是加粗
<strong></strong> 表示内容很重要
超链接标签
格式：
<a></a>
属性：
href=url 用于确定网页跳转的路径
target= 页面打开的位置，默认是在当前页面打开
=_blank 在新的页面打开
路径：
网页路径（https://www.baidu.com）
资源路径：
绝对路径：从操作系统根部开始寻找资源的位置
相对路径：从当前位置开始找资源的位置
./ 当前路径
../ 上一级路径
http和https的区别？
https：加密传输协议
超链接锚点
使用：
1、定义一个锚点
<a id="top"></a>
2、设置a标签
<a href="#top">回到定义锚点的位置</a>
图片标签
格式：
<img />
属性：
src：图片的路径
width：宽
height:高
title:鼠标悬停在上面显示的内容
alt：图片不显示提示的文字
border：边框
表格标签
格式：
<table> 表格标签
<tr>行
<th>表头</th>
...
</tr>
<tr>
<td>单元格</td>
...
</tr>
</table>
属性(table)：
border：边框
width：宽
height：高
bgcolor:背景颜色
cellping：每个单元格的内边距
cellspacing:每个单元格的外边距
合并单元格：
colspan：跨列，合并列
rowspan：跨行，合并行
- 表格练习
<html>
<head>
<meta charset="UTF-8">
<titl>表格案例</titl>
</head>
<body>
<table border="1" width="400px" cellspacing="0" height="400px">
<tr>
<td colspan="3">1-1</td>
<!-- <td>1-2</td>
<td>1-3</td> -->
<td rowspan="3">1-4</td>
</tr>
<tr>
<td rowspan="3">2-1</td>
<td colspan="2" rowspan="2">2-2</td>
<!-- <td>2-3</td> -->
<!-- <td>2-4</td> -->
</tr>
<tr>
<!-- <td>3-1</td> -->
<!-- <td>3-2</td>
<td>3-3</td> -->
<!-- <td>3-4</td> -->
</tr>
<tr>
<!-- <td>4-1</td> -->
<td colspan="3">4-2</td>
<!-- <td>4-3</td>
<td>4-4</td> -->
</tr>
</table>
</body>
</html>
结果：
.png)
练习：
多行文本域
格式：
<textarea rows="15" cols="60"></textarea>
属性：
rows：设置行的大小
cols：设置列的大小
列表标签
- 有序列表
格式：
<ol type="A">
<li></li>
···
</ol>
属性：
type 列表项前面的符号
- 无序列表
格式：
<ul>
<li></li>
···
</ul>
属性：
type= disc[方块] circle[空心圆] square[实心圆]默认
- 自定义列表
格式：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
...
</dl>
div标签
格式:
<div></div>
div： 块级元素
特点：独占一行
表单的使用
form标签
格式：
<form></form>
属性：
action="url" 表单提交的路径
method="get/post" 提交的方式，默认get
get：明码提交，提交的所有内容都会显示在地址栏中，并且提交的数据大小有限
post：暗码提交，所有提交的内容不可见
作用：向后台提交数据
input标签
input：设置输入框、按钮、单选框、多选框、提交按钮、重置按钮
type：属性就是用来确定当前的input是什么类型的框
type='text' 文本框
type='password' 密码框
type='radio' 单选按钮
需要设置name属性，并且值相同
type='checkbox' 多选框
如果数据想要提交到后台，所有的框都需要有name属性
设置多选框默认选中，checked=checked
type="reset" 重置按钮
type="submit" 提交按钮
select标签-下拉选
格式：
<select>
<option selected>value1</option>
<option>value2</option>
...
</select>
option标签中添加 selected 属性，是默认选择
CSS
简介
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
用来美化网页的一种计算机语言，中文叫做层叠样式表。
css使用的三种方式
1. 直接作用在网页上（不推荐）
在标签上添加style属性，然后设置对应的美化效果。
例：<div style="background:red;..."></div>
2. 在head标签中添加style标签进行网页美化
<head>
<style type="text/css">
div{
background:"red";
}
</style>
</head>
3. 引入外部css文件
<link rel="stylesheet" type="text/css" href="url"/>
浙公网安备 33010602011771号