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的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. HTML+CSS Day10实例

    1.家居大视野 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  5. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  6. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  7. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  8. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

随机推荐

  1. Tigase-02 tigase-server7.1.0使用git 克隆下来，并在eclipse 上运行调试

    继 Tigase-01 使用spark或spi登录Tigase服务器,这节说明下使用 eclipse git克隆 tigase-server7.1.0,并运行调试!最近有不少同学尝试去git clon ...

  2. 探索未知种族之osg类生物---渲染遍历之认识SceneView

    前言 我们在进行osg程序的开发时,最常用到的场景管理方式是“场景节点树”的结构,     a 场景树底端的叶节点(osg::Geode)包含了各种需要渲染的几何体的顶点和渲染状态信息:     b  ...

  3. pyadb关于python操作adb的资料

    3.最后adb命令由于是android的原生操作命令,支持实现的功能非常多.这里举几个pyapp里实现的功能例子:获取,修改手机当前使用的输入法(adb shell ime list),获取当前手机界 ...

  4. laravel和lumen数据库链接错误_FatalErrorException Call to a member function connection

    FatalErrorException in Model.php line 3339: Call to a member function connection() on null 挺简单的一个lum ...

  5. 上传到HDFS上的文件遇到乱码问题

    1.通过eclipse中的hdfs插件上传文件,上传成功,但是查看是乱码. 查阅文件本身的编码方式,发现是utf-8,同时文件在项目目录下,显示正常,因为我把它的编码格式也设成了utf-8. 2.通过 ...

  6. Numpy用户指南

    Numpy是Python语言的一个扩展库,支持大量的维度数组和矩阵运算,此外也针对数组运算提供大量的数学函数库. Mumpy是一个运行速度非常快的数学库,主要用于数组计算,包涵: 1.一个强大的N维数 ...

  7. Flip String to Monotone Increasing LT926

    A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possibly 0), ...

  8. Chrome自定义滚动条

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5 ...

  9. Python学习——1

    我是一名刚入IT行业的小白,目前主要是做网络运维这一块.曾经总是认为我是做网络运维的,学习代码干啥啊?后来就慢慢发现,传统的运维方式让我的效率好像不如别人效率高,关键还TM看别人比我更轻松.每一个网络 ...

  10. ios 对于AFNetworking3.0的基本使用

    AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持.AFHTTPRequestOperationManager已经抛弃,所以需要对数据请求进行改动. G ...