zoukankan      html  css  js  c++  java
  • Html5的一些基础知识

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>页面标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="页面描述" />
    <!--
    <meta http-equiv="refresh" content="3;URL=http://www.baidu.com/" />
    -->
    <meta http-equiv="pragma" content="no-cache" />

    </head>
    <body>
    <hr />
    &lt;hr /&gt;是一条直线
    <h1>小标题</h1>
    <h2>小标题</h2>
    <!--h1至h6是小标题,标题会越来越小-->

    <p>&lt;p&gt;
    &lt;/p&gt;指的是段落
    </p>

    &lt;br /&gt;指的是换行,放在一句话的后面,重复用可以多空几行<br />
    &amp;nbsp; 指的是空格。圆角状态下的空格也可以在网页中表现出来。<br />
    Tab指缩进<br />
    title放上去的时候会显示

    <dl>
    <dt>苹果</dt>
    <dd>苹果是一种水果</dd>
    <dt>香蕉</dt>
    <dd>香蕉也是一种水果</dd>
    </dl>
    &lt;dl/&gt; &lt;/dl/&gt; 是指定义<br />

    <table border="1" cellpadding="10" cellspacing="10">
    <tr><th>姓名</th><th>性别</th><th>学科</th></tr>
    <tr><td colspan="2">李培能</td><td>男</td><td>语文</td></tr>
    <tr><td rowspan="2">胡习平</td><td>男</td><td>语文</td></tr>
    <tr><td>王小康</td><td>男</td><td>语文</td></tr>
    <tr><td>戴晓</td><td>男</td><td>语文</td></tr>
    </table>
    <p>表格由table标签创建,tr标签创建行,td(colspan可以横跨几列,
    rowspan可以横跨几行)或th(使第一行粗一点)创建列;
    border标签表示表格边框的宽度,cellpadding标签表示字和框线的距离,
    cellspacing标签表示每个单元格的间距</p>


    <h1>会员注册</h1>
    <form action="http://www.baidu.com" target="_blank" name="form1">
    姓名:<input type="text" value="李培能" disabled="disabled" /><br />
    密码:<input type="password" /><br />
    头像:<input type="file" /><br />
    <input type="hidden" /><br />
    <input type="button" value="点我" /><br />
    性别:<input type="radio" id="boy1" name="sex1" checked="checked" />
    <label for="boy1">男</label>&nbsp;&nbsp;
    <input type="radio" id="girl1" name="sex1" />
    <label for="girl1">女</label><br />
    爱好:<input type="checkbox" checked="checked" />读书
    <input type="checkbox" />上网
    <input type="checkbox" />旅游<br />
    自我介绍:<textarea cols="20" rows="3">默认填写</textarea><br />
    <select name="city">
    <optgroup label="中国">
    <option value="武汉">武汉</option>
    <option value="天门">天门</option>
    <option value="深圳">深圳</option>
    </optgroup>
    </select>
    <input type="submit" value="确认提交" />
    <input type="reset" /><br />
    </form>
    <p>form表示表单;input标签定义表单的输入界面,通过type属性来展示不同
    的输入界面,通过value来改变默认值,file可以用来上传头像,hidden表示隐
    藏,button表示普通按钮,radio表示单选(但是要加name来关联),checkbox用
    来表示多选(爱好),submit表示提交,rest表示重置;
    action表示表单要提交到哪里,method表示提交方式(post和get);
    checked=“checked”表示单选或复选的默认选择,disabled="disabled"表示默认
    选择无法改变,readonly=“readonly”表示只读,size表示框的长度,textarea
    是双标签,表示多行输入(cols表示长度,rows表示行数);
    label用来提升用户体验,使勾选更容易(需要id和for配合使用);
    select用来创建下拉栏{用option【用disabled(不能选),selected="selected"
    (默认),value】来配合,还有disabled,name,multiple="multiple"(展开)};
    optgroup用来表示组合(用label来配合),给选项进行分组
    </p>

    <img src="从前有座灵剑山/灵剑山扉页08.jpg" usemap="#img1" />
    <map id="img1" name="img1">
    <area shape="rect" coords="440,161,570,300" href="http://ac.qq.com/Comic/ComicInfo/id/524356" target="_blank" title="从前有座灵剑山" alt="从前有座灵剑山" />
    </map>
    <br />
    <!-- rect为矩形 circle为圆形(其坐标变现为440,161,30(半径)) 用来表示图形的一部分的超链接,坐标是相对于
    图片的左上角而言,且都为正数,通过截图框来得出坐标。alt是解释。 -->

    相对路径,指的就是图片的名字
    ./等于当前目录 ../等于上一级目录 文件夹名称/等于当前目录内的文件夹
    <a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"> <img src="174330602201403241309561585826451753_014.jpg" width="50%" /> </a>
    <!-- 这是用来表示图片超链接 -->
    <a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"> 百度贴吧 </a>
    <a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"><input type="button" value="点我" /></a>


    <div>换行</div>
    <!-- div快级元素,可以用来存放标签 -->
    <span>不换行</span>
    <p>我是一<span>句话</span></p>
    <!-- span内联元素,以便通过css来美化它们 -->
    <ul>
    <li>
    网友A:我喜欢小说。
    <ul>
    <li>
    网友B:我喜欢漫画。
    <ul>
    <li>
    网友A:小说更好看。
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li>列表</li>
    </ul>
    <ol>
    <li>列表</li>
    <li>列表</li>
    </ol>
    <marquee direction="down">向下卷动</marquee>
    <!-- 我是被注释的内容,不会显示 -->
    <div>ANSI格式对应的charset=“gb2312”</div>

    <h1>标签写法以及嵌套的探讨</h1>
    1、不容许写结束标签的元素有(单标签):area,bass,br,col,command,embed,hr,img,
    input,keygen,link,meta,paran,source,track,wbr.<br />
     &nbsp;可以省略结束标签的元素有:li,dt,dd,p,rt,rp,optgroup,option,colgroup,
    thead,tbody,tfoot,tr,td,th.<br />
     &nbsp;可以省略全部标签的元素有:html,head,body,colgroup,tbody.<br />
    2、具有boolean值(是/否)的属性:disabled,readonly,checked.
    这些元素写的话就是true,不写的话就是false<br />
    属性值的引号可以省略,但属性值不可以包括空字符串,<,>,=,+<br />
    3、块级元素可以嵌套内联元素,比如:<div><span>;<br />
    但内联元素不可以嵌套块级元素,span不可以在div的前面;<br />
    内联元素可以嵌套内联元素,比如:<a href="#"><span></span></a>;<br />
    块级元素不能放在p标签内,比如:<p><ul><li></li></ul></p>是错的,
    <p><div></div></p>也是错的;<br />
    li内可以包含div标签和ul、ol标签;<br />
    块级元素和内联元素是可以相互转化的。
    <div><p></p></div>是对的。

    <h1>其他标签</h1>
    head中合法的标签有:bass,link,meta,title,style,script.
    1、为html页面添加描述信息用于搜索引擎抓取
    使用name属性,配合content来实现!(放在head中,title的下面)
    <meta name="keywords" content="关键字" />
    <meta name="description" content="页面描述" />
    2、引入css文件
    css代码是写在一个单独的文件中的
    <link rel="stylesheet" href="文件位置" type="text/css" />
    3、为html文档加入使用的语言,在国际化网站中使用
    <html lang="zh-CN">
    </html>
    英文使用en
    4、用html来实现网页的跳转
    <meta http-equiv="refresh" content="等待秒数;URL=跳转 URL地址" />
    5、告诉浏览器不要加载页面的缓存(即获取网站的最新内容)
    <meta http-equiv="pragma" content="no-cache" />
    6、iframe标签,框架(把一个网页以小框框的形式插入到另一个网页)
    创建包含另一个文档的内联框架(即行内框架)【是在body内】。
    属性:
    frameborder 值:1,0 作用:规定是否显示框架周围的边框
    width
    scrolling 值:yes,no,auto(自动) 作用:规定是否在iframe中显示滚动条
    src 规定在iframe中显示文档的URL,可以是本地的html文件,也可以是远程的html文件
    <iframe src="http://www.baidu.com/" width="50%" height="600" frameborder="0">
    </iframe>




    </body>
    </html>

  • 相关阅读:
    3503: [Cqoi2014]和谐矩阵
    2734: [HNOI2012]集合选数
    P3900 [湖南集训]图样图森破
    4557: [JLoi2016]侦察守卫
    牛客OI周赛6-提高组 B 践踏
    连续区间的最大公约数
    Wannafly挑战赛5 D. 子序列
    牛客国庆集训派对Day1 B. Attack on Titan
    4538: [Hnoi2016]网络
    [SHOI2015]超能粒子炮·改
  • 原文地址:https://www.cnblogs.com/lipeineng/p/5205014.html
Copyright © 2011-2022 走看看