Day10:html和css

标题图

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 {width: 200px;height: 100px;background-color: red;}nav {width: 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 {width: 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>