静态资源三剑客:HTML+CSS+JavaScript
HTML
HTML概念
概念:最基础的网页开发语言
* 超链接:
* 超文本 : 多个超链接组织在一起的网状文本
* 标记语言 : 由标签构成的语言 如html,xml
标记语言,不是编程语言
快速入门
语法:
1. 后缀分为 .html后缀 和 /htm标签
2. 标签分类
围堵标签 :成对出现,/在前面
有开始标签和解结束标签,可以内嵌,比如<html> </html>
自闭和标签 :单个出现, 后面/ 比如：<br/>
3. 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
正确写法:<html><head><head></html>
4. 在标签<>内部可以定义属性 , 属性是由键值对构成, 值需要用"" (单引号双引号均可)
举例:<font color="red"> hellow world </font>
5. HTML不区分大小写,建议小写
HTML标签
文件标签: 构成HTML最基本的标签
文本标签:
图片标签:
列表标签:
表格标签:
HTML文件标签
文件标签: 构成HTML最基本的标签
<html> ... </html> //heml文档的根标签
<head> ... </head> //头标签, 用于指定html文档的一些属性,引入外部资源
<title> ... </title> //标题标签
<body> ... </body> //体标签
<!DOCTYPE html> //表示是html5文件
<meta charset="UTF-8"> //注明解码方式,尤其是有中文的时候
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>HTML网页</h1>
<font color="red"> hellow world </font>
</body>
</html>HTML文本标签
注释:<!-- 注释 -->
.....</br> : 换行,尾部输入</br>,起到换行作用
<h1>标题</h1> :标题标签,字号可以选择h1-h6,自动换行
<p>段落</p> : 把不同段落用p标签包裹起来,间隔比换行大一些
<b>加粗</b>
<i>斜体</i>
<center>位于中间<center>
<hr/>......:显示出一条线
属性: color /width(宽度)/size(大小) /align(对齐方式) - center/left/right
当加上属性后:
<hr 属性... />一条线</hr>
HTML5中只写数据,美化用CSS, 大部分属性已经废弃,但是浏览器兼容仍然可以显示
<font>字体</font>
属性:color/size/face(字体)
color的三种表示方式:
1.英文单词:red,green,blue
2.rbg(值1,值2,值3) :值的范围0~255
3.#值1值2值3 :值的范围00~FF之间 eg:#FF00FF
width的两种表示方法:
1.数值:默认单位为px(像素) eg:width = "20"
2.数值%:占比相当于父元素的比例 eg:width="50%" 当前屏幕的50%
<hr color="red" width="200" size="10" align="left"/>
<center>
<font color="red" size="5" face="楷体">白日依山尽</font>
</center>
<hr>
HTML 图片标签
<img src ="工程下的图片目录">
相对路径 :以.开头 如果图片与.html在同一目录下
./代表当前路径中
../代表上一级目录中
当遇到端口占用的时候,记得用以下操作查找并且释放端口
PS C:\WINDOWS\system32> netstat -ano|findstr 8080
TCP 0.0.0.0:8080 0.0.0.0:0 LISTENING 17780
TCP [::]:8080 [::]:0 LISTENING 17780
PS C:\WINDOWS\system32> taskkill /pid 17780 /f
成功: 已终止 PID 为 17780 的进程。列表标签
有序列表: 1. A Ⅰ等
<ol>
<li> 第一条 </li>
<li> 第二条 </li>
<li> 第三条 </li>
</ol>
无序列表 ： · □
<ul>
<li> 第一条 </li>
<li> 第二条 </li>
<li> 第三条 </li>
</ol>
老建议：修改列表属性 还是建议用CSS
超链接标签
超链接
可以点击文字 跳转 连接，图片，当前工程下的html网址，程序
也可以点击图片 跳转如上页面
<a> 点这里</a>
<a href="网址">点这里</s>
属性：<a href="路径/name.html"> 列表标签</a>
<a href=""><img src="路径/图片.jpg"></a>
<a href="网址" target="_self">点这里</s> //属性,默认页面内跳转
<a href="网址" target="_blacnk">点这里</s> //新建页面打开
举例:点击图片进入html网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my_html</title>
</head>
<body>
<a href="./列表标签.html"><img src="./resource/picture/picturename.png"></a>
</body>
</html>块标签(结合CSS使用)
span:行内标签 内联标签
<span>包裹起来</span> //结合CSS控制包裹起来的样式
<span>包裹起来</span>
div:和span一样,但是div占满一整行,自动换行 块级标签
<div>
包裹起来
</div>
<div>
包裹起来
</div>
如何区别不同的<div>块</div>
之前是使用div+id不是很方便,所以引入了语义化标签(HTML5)
语义化标签
提高程序可读性
<header>
<div>
.....
</div>
</header>
<footer>
<div>
.....
</div>
<footer>
表格标签
HTML中表格定义
<table>表格</table> :定义表格
属性: width 宽度
border 边框
cellpadding: 定义内容和单元格的距离
cellspacing: 定义单元格之间的内容, =0 单元格紧密相连
bgcolor:背景色
align: 整体表格所处位置
<tr>一行</tr> :定义行
<td>一格</td> :定义单元格
<th>表头</th>:定义表头单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my_html</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" bgcolor="#faccc7" align="center">
<tr>
<th>编号</th><th>姓名</th><th>成绩</th>
</tr>
<tr>
<td>1</td><td>qwe</td><td>57</td>
</tr>
<tr>
<td>2</td><td>asd</td><td>87</td>
</tr>
</table>
</body>
</html>
合并单元格操作
理解:
第一行有三个单元格,只不过第一个单元格占两行, <th rowspan="2">竖着合并</th>
第二行有两个单元格,
第三行有两个单元格,第二个单元格占两列 <td colspan="2">横着合并</td>
<table border="1" width="50%" cellpadding="0" bgcolor="#faccc7" align="center">
<tr>
<th>编号</th><th>姓名</th><th>成绩</th>
</tr>
<tr>
<td>1</td><td>qwe</td><td rowspan="2"></td>
</tr>
<tr>
<td colspan="2">2</td>
</tr>
</table>表格的语义化标签
<caption>学生信息表</caption> :表格标题写在tr里
<thead>表格头部分</thead>
<tbody>表格体部分</tbody>
<tfoot>表格脚部分</tfoot>
<table border="1" width="50%" cellpadding="0" bgcolor="#faccc7" align="center">
<tr>
<caption>标题名:信息表</caption>
<th>编号</th><th>姓名</th><th>成绩</th>
</tr>
<tr>
<td>1</td><td>qwe</td><td>57</td>
</tr>
</table>表单标签form
表单:用于采集用户输入的数据
form:用于定义表单,可以定义一个范围,该范围代表采集用户数据的范围
属性: action 指定提交数据的URL
method 指定提交方式 //一共有七种 七种两种比较常用
get : 请求参数会在地址栏中显示 ,会封装在请求行中
请求参数的大小有限制
不太安全
post : 请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议后讲解)
请求参数的大小无限制
较为安全表单项中的数据要想被提交,必须指定其name属性
<form>
用户名:<input></br>
密码:<input></br>
</form> 
<body>
<form action="#" method="get">
用户名:<input name="username"></br>
密码:<input name="password"></br>
<input type="submit" value="登陆"></br>
</form>
</body>表单里面的东西,称为表单项
表单项
<input> :可以通过type属性值,改变元素展现的样式
type属性:
框:
text:文本输入框,默认值
placeholder:浅灰色的提示信息
password:密码输入框
radio:单选
注意:同一问题的单选框name值得相同,value值用来保存选中后提交值,checked默认选择
checkbox:□多选框
注意:注意指明操作后选项提交的value值
file:上传附件框
hidden:隐藏信息提交
按钮:
submit:提交按钮,可以提交表单
button:普通按钮,(给你点着玩的)
image:图片提交按钮（点击图片可以提交）
src属性指定图片路径
<label> ：文本框前的汉字一般用<label></label>标签包裹起来,label标签的属性for 和 文本框的属性id对应起来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="#" method="get">
<lael for="first">用户名</lael>:<input type="text" name="username" placeholder="请输入用户名" id="first">
密码:<input type="password" name="password" placeholder="请输入密码">
<br>
性别:<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender value="femal"> 女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="java" checked>Java
<input type="checkbox" name="hobby" value="game">游戏
<br>
图片上传:<input type="file" name="file">
<br>
隐藏域:<input type="hidden" name="id" value="偷偷上传">
<br>
取色器:<input type="color" name="color">
<br>
年月日:<input type="date" name="ymd">
<br>
年月日秒:<input type="datetime-local" name="birthday">
<br>
邮箱:<input type="email name="email">
<br>
年龄:<input type="number" name="age">
<br>
<input type="submit" value="登陆">
<input type="button" value="一个按钮">
<input type="image" src="./resource/picture/picturename.png">
</form>
</body>
</html>
