Day10:
html和css
<html>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
HTML 是用来描述网页的一种语言，超文本标记语言，不是一种编程语言，而是一种标记语言，是一套标记标签，使用标记标签来描述网页。
HTML 标签
HTML 文档描述网页
<html> 与 </html> 描述网页
<body> 与 </body> 页面内容
<h1> 与 </h1> 标题
<p> 与 </p> 段落
HTML 标题
<h1> - <h6>
HTML 段落
<p> 标签
HTML 链接
<a> 标签
HTML 图像
<img> 标签
HTML 元素语法
以开始标签起始，以结束标签终止，某些 HTML 元素具有空内容，大多数 HTML 元素可拥有属性。
<html>
<body>
<p></p>
</body>
</html>
<p> 元素
<body> 元素
<html> 元素
<h1> 定义标题的开始
<body> 定义 HTML 文档的主体
<table> 定义 HTML 表格
class 规定元素的类名
id 规定元素的唯一 id
style 规定元素的行内样式
<center> 定义居中的内容。
<font> 和 <basefont> 定义 HTML 字体。
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色
<code>
<pre>
</pre>
</code>
HTML 链接 - target 属性
target="_blank"
name 属性规定锚（anchor）
<img> 是空标签
<img src="url" />
表格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
无序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
有序列表
<ol>
<li>1</li>
<li>2</li>
</ol>
<div> 和 <span>
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容
footer 定义文档或节的页脚
details 定义额外的细节
iframe 的语法
<iframe src="URL"></iframe>
HTML 头部元素
<title> 标签定义文档的标题
<title>Title of the document</title>
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
<base target="_blank" />
<link> 标签定义文档与外部资源之间的关系
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style> 标签用于为 HTML 文档定义样式信息
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
<meta> 标签提供关于 HTML 文档的元数据
<meta name="description" content="" />
<script> 元素
统一资源定位器
URL 称为网址
http 超文本传输协议
https 安全超文本传输协议
ftp 文件传输协议
<!DOCTYPE> 声明帮助浏览器正确地显示网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
什么是 Canvas？
// 使用 JavaScript 在网页上绘制图像
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
html5新标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
header {
200px;
height: 100px;
background-color: red;
}
nav {
300px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<header></header>
<nav>上</nav>
<aside></aside>
<article></article>
<time>12</time>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
fieldset {
300px;
}
</style>
</head>
<body>
<input type="text" value="请输入" list="star"/>
<datalist id="star">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</datalist>
<fieldset>
<legend>登录</legend>
用户名： <input type="text"> <br>
密码： <input type="password">
</fieldset>
</body>
</html>
// 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<form action="">
用户名： <input type="text" placeholder="请输入用户名" autofocus> <br />
上传头像： <input type="file" name="" id="" multiple > <br />
昵称： <input type="text" required accesskey="s"> <br />
<input type="submit" value="提交按钮">
</form>
</body>
</html>
// 视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<iframe height=200 width=200 src='' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>
// 视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<audio controls loop>
<source src=".mp3"/>
<source src=".ogg"/>
</audio>
<video autoplay controls>
<source src=".ogg"/>
<source src=".mp4"/>
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p::selection { /*选择文字时候的状态*/
background-color: pink;
color: yellow;
}
</style>
</head>
<body>
<p>中国</p>
</body>
</html>
// 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
<label>手机号: <input type="tel" /></label> <br /><br />
<label>邮箱: <input type="email" /></label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<datalist id="xueyuan">
<option>学院</option>
<option>学院</option>
<option>学院</option>
<option>学院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成绩: <input type="number" /></label> <br /><br />
<label>毕业时间: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
</body>
</html>
如果看了觉得不错
点赞！转发！
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞