section1 html&css
概念
html
- 超文本
- 标记
css
- 样式
元素
- 标签+内容
页面
- 若干元素
html-基础标签
- 段落
<p>hello world</p> - 嵌套
<p>hello <b>f***</b> world</p> - 图片
<img src="1.jpg" >
html-页面
- 一个基本的页面组成
<!DOCTYPE html> <!-- 文件类型：标准html -->
<html> <!-- 根节点 只有一个 -->
<head> <!-- 存放不展示的内容 -->
<meta charset="utf-8">
<tile>测试页面</tile>
</head>
<body> <!-- 存放展示的内容 -->
<p id = "p1" title = "测试"></p>
<img src="1.jpg">
</body>
</html>基本元素
文本
标题 h
段落 p
列表
- 有序列表 ol：ordered list
- 无序列表 ul：unordered list
- 多级列表 嵌套即可
锚定 a
<!DOCTYPE html> <!-- 文件类型：标准html -->
<html> <!-- 根节点 只有一个 -->
<head> <!-- 存放不展示的内容 -->
<meta charset="utf-8">
<tile>测试页面</tile>
</head>
<body> <!-- 存放展示的内容 -->
<p id = "p2" title = "测试">原有的</p>
<a href="index.html">本地页面</a>
<hr>
<a href="http://www.baidu.com">百度</a>
<hr>
<a href="#p1">当前页</a>
<hr>
<img src="1.jpg">
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<p id="p1">我一定会被找到</p>
<a href="#">回到顶部</a>
</body>
</html>多媒体
图片
分类
- src中可以为路径
<img src="1.jpg"> - 可以为data内容-格式
<img src="data:img/png;base64,数据"> - 可以为objectId：学了js之后可以看
视频
- src中可以为路径
<video src="2.mp4" width="300" controls></video>音频
<audio src="3.mp3" controls></audio>
表单
作用：收集用户填写的数据，并将这些数据提交给服务器
- 提交给百度
<!DOCTYPE html> <!-- 文件类型：标准html -->
<html> <!-- 根节点 只有一个 -->
<head> <!-- 存放不展示的内容 -->
<meta charset="utf-8">
<tile>测试页面</tile>
</head>
<body>
<!-- <form action="http://www.baidu.com" method="请求方式" enctype="数据格式"> -->
<form action="http://www.baidu.com/s">
<!-- 表单项 -->
<input type="text" name="wd">
<input type="submit" value="提交按钮">
</form>
</body>
</html>- 提交给自己编写的java服务器
<!DOCTYPE html> <!-- 文件类型：标准html -->
<html> <!-- 根节点 只有一个 -->
<head> <!-- 存放不展示的内容 -->
<meta charset="utf-8">
<tile>测试页面</tile>
</head>
<body>
<!-- <form action="http://www.baidu.com" method="请求方式" enctype="数据格式"> -->
<form action="http://localhost:8081/dev-api/test/practice" method="get">
<!-- 表单项 -->
<!-- 文本框 -->
<input type="text" name="username">
<hr>
<!-- 密码框 -->
<input type="password" name="password">
<hr>
<!-- 隐藏框 -->
<input type="hidden" name="id" value="1">
<hr>
<!-- 日期框 -->
<input type="date" name="birthday">
<hr>
<!-- 单选 -->
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
<hr>
<!-- 多选 -->
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
<hr>
<!-- 文件上传 -->
<input type="file" name="avatar">
<hr>
<input type="submit" value="提交按钮">
</form>
</body>
</html>tips
使用MDN查看标签的属性信息
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。