专栏首页达达前端Day10:html和css

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>

效果

效果

如果看了觉得不错

点赞!转发!

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

结语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript入门篇

    快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScri...

    达达前端
  • vue框架入门和ES6介绍

    vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等。

    达达前端
  • ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值

    主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板。

    达达前端
  • .NET应用架构设计—面向查询服务的参数化查询设计(分解业务点,单独配置各自的数据查询契约)

    阅读目录: 1.背景介绍 2.对业务功能点进行逻辑划分(如:A、B、C分别三个业务点) 2.1.配置映射关系,对业务点配置查询契约(构造VS插件方便生成查询契...

    王清培
  • 对html与body的一些研究与理解

    最近一直构思着写篇关于<html>标签的文章,虽说之前处理过<html>标签,也解决过不少棘手的问题,但是对其理解还不是很透彻,很多原理都是自己推测的。

    javascript.shop
  • GitHub超9千星:一个API调用27个NLP预训练模型

    前几日,著名最先进的自然语言处理预训练模型库项目pytorch-pretrained-bert改名Pytorch-Transformers重装袭来,1.0.0版...

    新智元
  • Ajax请求SpringMVC Json数据报错Http 400(一)

        最近在完善博客的过程中,发现了一些细节问题。后台使用的是SpringMvc,前台使用的是jquery请求。之前后台采用的是

    幽鸿
  • 批量导出Power Query代码的小工具

    在使用Power Query的过程中,每一个查询里包含各个过程,各个过程又是由多个M语句构成的,如果我们需要把整个文件中的所有M代码给导出来,有没有什么好的办法...

    逍遥之
  • 初学ASP.NET

           今天头一次接触了ASP.NET的技术,感觉确实存在着一些开发便捷之处,一些开发便捷之处,下面就简要谈谈我所学的一些体会,虽然可能很浅显,但依旧是...

    bisal
  • 读完这45篇论文,“没人比我更懂AI了”

    导读:AI领域的发展会是IT中最快的。我们所看到的那些黑科技,其后无不堆积了大量论文,而且都是最新、最前沿的论文。从某种角度来讲,它们所用的技术跟书籍里的内容确...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券