Day10:html和css

2019-01-10 本文已影响3人魔王哪吒

标题图

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 点赞

Day10:html和css

统一资源定位器

什么是 `Canvas`？

`html5`新标签

结语

猜你喜欢

热点阅读

Day10:html和css

统一资源定位器

什么是 Canvas？

html5新标签

结语

猜你喜欢

热点阅读

什么是 `Canvas`？

`html5`新标签