Day10:html和css

时间:2021-07-07 22:11:20

Day10:html和css

Day10:htmlcss

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

Day10:html和css

Day10:html和css

如果看了觉得不错

点赞!转发!

达叔小生:往后余生,唯独有你

You and me, we are family !

90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通

简书博客: 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

Day10:html和css的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

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

  2. HTML&plus;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&period;NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

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

随机推荐

  1. role在标签中的作用是什么?

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  2. ztree使用心得

    一个很好用的Jquery树形控件 官网:http://www.ztree.me/v3/main.php#_zTreeInfo 我主要引用的文件为: //最新版的JS压缩包 <script src ...

  3. java中的AES 256算法遇到 Illegal key size or default parameters错的解决办法

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  4. HDU- 2265 Encoding The Diary

    Encoding The Diary Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. python3基本框架

  6. 《Python学习手册》读书笔记

    之前为了编写一个svm分词的程序而简单学了下Python,觉得Python很好用,想深入并系统学习一下,了解一些机制,因此开始阅读<Python学习手册(第三版)>.如果只是想快速入门,我 ...

  7. thymeleaf模板引擎shiro集成框架

    shiro权限框架.前端验证jsp设计.间tag它只能用于jsp系列模板引擎. 使用最近项目thymeleaf作为前端模板引擎,采用HTML档,未出台shiro的tag lib,假设你想利用这段时间s ...

  8. 线上分享会&period;net框架&OpenCurlyDoubleQuote;ABP”分享会总结

    前言 为了能够帮助.Net开发者开拓视野,更好的把最新的技术应用到工作中,我在3月底受邀到如鹏网.net训练营直播间为各位学弟学妹们进行ABP框架的直播分享.同时为了让更多的.NET开发者了解ABP框 ...

  9. &period;NET Core多平台开发体验&lbrack;2&rsqb;&colon; Mac OS X

    除了微软自家的Windows平台, .NET Core针对Mac OS以及各种Linux(RHEL.Ubuntu.Debian.Fedora.CentOS和SUSE等)都提供了很好的支持,我们先来体验 ...

  10. 渗透测试&lowbar;利用Burp爆破用户名与密码

    burp 全称 Burp Suite, 是用于攻击web 应用程序的集成平台.它包含了许多工具,可以抓包可以爆破也可以扫描漏洞. 主要组件如下: Proxy——是一个拦截HTTP/S的代理服务器,作为 ...