概述
- 前后端分离:前端:Html、CSS、JS、JQuery(用于封装JS)
- 如今都是html5+css3
- W3C:world wide web consortium(万维网联盟)
- W3C标准:
- 结构化标准语言(HTML、XML)
- 表现标准问题(CSS):Cascading Style Sheets
- 行为标准(DOM、ECMAScript):Document Object Model、JavaScript要遵守后一个的规范
- 开发软件:Dreamweaver、WebStorm、IDEA
- 准备工作:
- 也是创建一个java项目,删除src,增加一个html文件夹,可以在文件夹中增加一个"1.我的第一个网页"
- 成对的标签。自闭合标签
总结->先看
<body>
#标题、段落、换行、水平线、粗体、斜体、特殊符号
<h1></h1> <p></p> <hr/> <br/>
<strong></strong> <em></em>
><©
#图片
<img src="" alt="加载失败" title="悬停文字" height="">
#链接
<a href="1.我的第一个网页.html">这是第一个网页</a>
<a href="https://www.baidu.com">这是百度</a>
#跳转到邮箱
<a href="mailto:123@qq.com">这是邮箱</a>
#锚标签(用的是name,不是id)
<a name="up">这是在顶部的文字</a>
<p>这是好多行</p>
<a href="#up">返回顶部</a> <!--href也可以是4.连接标签.html#up-->
#内联框架
<iframe src="" name = "name1"></iframe>
<a href="1.我的第一个网页.html" target="name1">点击</a>
#视频和音频(不要忘记controls)
<video src="" controls></video>
<audio src="" controls></audio>
#网页结构
<header></header>
<section></section>
<footer></footer>
#列表
<ol>
<li>a</li>
</ol>
<ul></ul>
<dl>
<dt>职位</dt>
<dd>学生</dd>
<dt>工具</dt>
<dd>书籍</dd>
</dl>
#表格
<table border="1">
<tr>
<td colspan="2">成绩单</td>
</tr>
<tr>
<td rowspan="2">语文</td> //th标签加粗
<td>80</td>
</tr>
<tr>
<td>100</td>
</tr>
</table>
-----区别
<!--这个是只有外边框-->
<table style="border: 2px dashed red">
<tr>
<td colspan="2">成绩</td>
</tr>
<tr>
<td rowspan="2">语文</td>
</tr>
<tr>
<td>88</td>
<td>99</td>
</tr>
</table>
#下拉框(不是<input>)
<select name="country" >
<option value="china">中国</option>
<option value="us" selected>美国</option>
<option value="uk">英国</option>
</select>
#文本域(区别于input下的type="text")
<textarea name="textarea" cols="30" rows="10">文本框里的内容</textarea>
#表单!!!!get/post
<form action="1.我的第一个网页.html" method="get">input提交的信息,整个页面的都可放入</form>
input下的(一般input都在p的包裹之下,自成一段)
#框框设置:readonly disable hidden
#内容设置:placeholder required pattern(正则表达式。在js)
#用户输入文本
<input type="text" name="username" value="adair" readonly>
<input type="password" name="pwd" value="123" hidden>
#单选(需要在同一个name组内)
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
#复选
<input type="checkbox" name="hobby" value="run">跑
<input type="checkbox" name="hobby" value="play">玩
#按钮(普通、图片、提交、重置)
<input type="button" name="btn1" value="点击变长">
<input type="image" src="" height=""> <!--点击图片也会跳转-->
<input type="submit">
<input type="reset">
#上传文件
<input type="file">
#验证邮箱,会自动检查@
<input type="email" name="email">
#验证url
<input type="url" name="url">
#验证数字
<input type="number" min="0" max="100" step="5">
#搜索
<input type="search" name="search">
#音量
<input type="range" mix="0" max="100" step="2">
#label:增强鼠标可用性(注意用的是id)
<input type="text" id="mark">
<label for="mark">你点我试试</label>
</body>
第一个网页
- language为语言,en为英语,zh汉语
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta一般做描述性标签,描述网站的信息-->
<!--meta一般作SEO:Search Engine Optimization-->
<meta charset="UTF-8">
<meta name="keywords" content="我是content">
<title>我的第一个网页</title>
</head>
<body>
hello
</body>
</html>
基本标签
<body>
<!--标题标签-->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<!--段落标签-->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
粗体:<strong>I love you</strong><br/>
斜体:<em>I love you </em>
空 格
空 格
>
<br/>
<
<br/>
©adair
</body>
</html>
图像标签
<body>
<!--
图片地址:
绝对路径:从盘符开始
相对路径:resource\image\tx.jpg
上一层目录:../
alt:图片无法显示的代替文字
title:悬停文字
-->
<img src="../resource/image/tx.jpg" alt="adair" title="悬停文字" width="600">
<a href="4.连接标签.html#down">跳入4.的</a>
</body>
</html>
链接标签
<body>
<a name="top">顶部</a>
<a href="1.我的第一个网页.html">网页一</a>
<a href="http://www.baidu.com">百度</a>
<a href="1.我的第一个网页.html" target="_self">
<img src="../resource/image/tx.jpg" alt="adair" title="悬停文字" width="600">
</a>
<!-- 锚标签 -->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!--功能性连接
邮件链接:mailto
-->
<a href="mailto:123456789@qq.com">点击联系我</a>
</body>
元素
- 块级元素:p/h等会自占一行
- 行内元素:a/strong/em不会自己占一行
列表
<body>
<!--有序列表order list-->
<ol>
<li>x</li>
<ul>
<li>a</li>
<li>b</li>
</ul>
<li>y</li>
<li>z</li>
</ol>
<!--无序列表unorder list-->
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<!--自定义列表defined list/title/data-->
<dl>
<dt>职位</dt>
<dd>校长</dd>
<dd>老师</dd>
<dd>学生</dd>
<dt>工具</dt>
<dd>书</dd>
<dd>笔</dd>
</dl>
</body>
表格
border=“1px” #html
border: 1px solid red #CSS
<body>
<!--表格table
行:tr
单元格:td
-->
<!--注意:border="1px"-->
<table border="1px">
<tr>
<td colspan="3" >学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">adair</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>语文</td>
<td>99</td>
</tr>
</table>
</body>
</html>
音频和视频
- 别忘记controls
<body>
<!--音频和视频-->
<video src="../resource/video/player.mp4" controls autoplay="autoplay"></video>
<audio src="../resource/audio/musci.mp3" controls autoplay></audio>
</body>
页面结构分析
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
内联框架iframe
<iframe src="" name=""></iframe>
<body>
<iframe name="hello1" src="https://www.bilibili.com" frameborder="0" height="150px" width="150px"></iframe>
<a href="1.我的第一个网页.html" target="hello1">点击</a>
</body>
学习表单
- 例如注册一个账号,登陆一个账号
<body>
<h1>注册</h1>
<!--form表单
action:为submit后的url位置
method:get不安全,可以在url中看到密码=
-->
<form action="1.我的第一个网页.html" method="get">
<p>名字:<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码:<input type="password" name="pwd" value="123" hidden></p>
<!--单选框
type="radio"
value单选框的值
name表示组
-->
<p>姓名:
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
type="checkbox"
value多选框的值
name表示组
-->
<p>爱好:
<input type="checkbox" value="run" name="hobby"/>跑步
<input type="checkbox" value="down" name="hobby"/>俯卧撑
<input type="checkbox" value="up" name="hobby" checked/>引体向上
</p>
<!--按钮
type="button" 普通按钮
type="image" 图像按钮
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="btn1" value="点击边长">
<input type="image" src="../resource/image/tx.jpg" height="50px">
</p>
<p>
<select name="国家" >
<option value="china">中国</option>
<option value="us">美国</option>
<option value="russia" selected>俄国</option>
</select>
</p>
<!--文本域-->
<p>
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file">
<input type="button" name="上传" value="upload">
</p>
<!--邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--url验证-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字
<input type="number" max="100" min="0" step="1">
</p>
<p>搜索:
<input type="search" name="search">
</p>
<p>音量:
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--增强鼠标可用性 for指向相同内容的id-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
- 可以通过源码查看信息,源码中network中可以查看提交大概信息
忘记
#锚标签(用的是name,不是id)
<a name="up">这是在顶部的文字</a>
<p>这是好多行</p>
<a href="#up">返回顶部</a> <!--href也可以是4.连接标签.html#up-->
#视频和音频(不要忘记controls)
<video src="" controls></video>
<audio src="" controls></audio>