• 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 {
    		 200px;
    		height: 100px;
    		background-color: red;
    	}
    	nav {
    		 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 {
    		 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 点赞
  • 相关阅读:
    shiro cookie登录根据角色跳转不同页面的解决方案
    springboot 引入shiro缓存及rememberMe支持
    android开发记录2 webview调用二维码扫描
    android app开发记录1
    bootstrap datetimepicker 出现选中后没有日期的原因
    mybatis-plus @Select select in 查询实现
    Mybatis-Plus 中的 @Select 出现查询不到数据的原因
    caffe Python API 之InnerProduct
    caffe Python API 之LRN
    caffe Python API 之Dropout
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140364.html
Copyright © 2020-2023  润新知