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>

效果

效果

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞
posted @ 2019-01-10 04:12  达达前端  阅读(119)  评论(0)  编辑  收藏  举报