zoukankan      html  css  js  c++  java
  • 学习HTML5一周的收获1

    HTML5的基本结构
    学习了title标签(显示网站名称),link标签(链接文件,可做网页美化)
    快捷键:Ctrl+/ 注释
    学习【meta标签】
    1、charset属性:单独使用,设置文档字符集编码格式。
    >>>写法:<meta charset="UTF-8">
    >>>常见的中文编码格式:
    GB-2312:国标码,简体中文
    GBK:扩展的国际码,简体中文
    UTF-8:万国码Unicode码,基本兼容各国语言
    2、http-equiv属性:需配合content属性使用,主要声明浏览器如何解释编译文件。
    >>>写法:<meta http-equiv="属性值"content="属性值详细内容">
    >>>常见属性值:content-Type HTML4.01之前的文档内容编码声明
    refresh 网页刷新 set-cookie设置浏览器cookie缓存
    3、name属性:需配合content属性使用。主要用于给搜索引擎提供必要信息。
    >>>写法:<mate name="属性值" content="属性值详细内容">
    >>>重要属性值:auther 作者,声明网站作者,常用公司网址表示
    keywords 网站关键字,多个关键字,用英文逗号隔开
    description 网页描述,搜索引擎显示在title下的描述内容
     
    *http-equiv和name属性,必须与content属性配合使用,前两者只是声明即将修改哪些属性值,而实际的属性值内容,在content中描述。
    <!--作者-->
    <meta name="author" content="http://www.jredu100.com"/>
    <!--网页关键字-->
    <meta name="keywords" content="heml5,网页,web前端开发" />
    <!--网页描述-->
    <meta name="description" content="这是我在捷瑞教育开发的第一个网页"/>
    <!--声明文档的编码格式-->
    <meta charset="UTF-8">
     
    标签分类
    <!--[HTML标签分类]
    1、块级标签:自动换行、前后隔一行
    2、行级标签:按行逐一显示。
    是否自动换行,是我们判定块级标签的重要指标
    -->
    <!-- [常见的块级标签]
    标题标签<h1></h1>……<h6></h6>
    水平线<hr/>
    段落<p></p>
    换行<br/>
    引用<blockquote></blockquote >
    预格式<pre></pre>
    -->
    <!--默认加粗,h1最大,h6最小-->
    <h1>一级标题</h1>
    <h2>一级标题</h2>
    <h3>一级标题</h3>
    <h4>一级标题</h4>
    <h5>一级标题</h5>
    <h6>一级标题</h6>
    <!--水平线<hr/>-->
    <hr/>
    <!--段落<p></p>-->
    <!--换行<br/>-->
    <p>这是p标签中的一个段落。这是p标签中的一个段落。这是p标签中的一个段落。这是p标签中的一个段落。</p>
    <p>这是p标签中的一个段落。这是p标签中的一个段落。<br/>这是p标签中的一个段落。这是p标签中的一个段落。</p>
    <!--引用<blockquote></blockquote>
    1、表明标签总的文字,为引用的内容。浏览器显示为段落缩进
    2、cite属性,表明引用的来源,一般为引用的网址URL
     
    -->
    <!--预格式<pre></pre>-->
    <pre>1
    2
    3
    </pre>
    <!--[有序列表ol order list]-->
    <ol>
    <li>列表第一项</li>
    <li>列表第二项</li>
    <li>列表第三项</li>
    <li>列表第四项</li>
    </ol>
    <!--[无序列表ul unorder list]-->
    <ul>
    <li>列表第一项</li>
    <li>列表第二项</li>
    <li>列表第三项</li>
    <li>列表第四项</li>
    </ul>
    <!--定义描述列表
    <dl>
    <dt>标题</dt>
    <dd>描述项</dd>
    </dl>
    -->
    <dl>
    <dt>这是dl列表的标题</dt>
    <dd>描述项1</dd>
    <dd>描述项2</dd>
    <dd>描述项3</dd>
    <dd>描述项4</dd>
    </dl>
    <blockquote cite="http://www.jredu100.com">哈哈哈哈哈哈哈</blockquote>
    <!--
    【图片组合标签figure】
    1、<figure></figure>标签有两个子标签。
    <img src="">:一副图片,src为路径
    <figcaption></figcaption>:图片标题
    2、浏览器显示为:图片与标题上下排列,且整体向后缩进一个单位
     
    -->
    <figure>
    <img src="img/微信.png" />
    <figcaption>微信</figcaption>
    </figure>
    <!--【分区标签 div】
    常配合css使用,为网页中最常用的的分区标签,常用于网页布局使用
    -->
    <div style=" 100%;height: 100px;">
    这是div里面的文字
    <h1>div标题</h1>
    </div>
    行级标签
    <!--常见的行级标签
    span(文本)
    img(图片)
    em(强调)
    strong(强调)
    q(短引用)
    a(超链接)
    i(倾斜)
    b(加粗)
    small(缩小字体)
    -->
    <!--
    span(文本):用于包裹一部分文字,进行特定样式的修改。
    -->
    <!--
    em(强调):浏览器会显示为倾斜
    strong(强调):会显示为加粗
    两者都表示强调,后者大于前者,两者均可多层嵌套,表示强调程度为递增。
    -->
    <!--四者的区别
    em和i都能倾斜,strong和b都能加粗,但是strong和em多了强调的语义,
    可帮助搜索引擎抓住网页重点,而且HTML5要求开发者,尽可能的实现代码的语义化。
    -->
    姜浩真<span style="color: blue;font-size: 36px;">帅!!!</span>
    <!--
    q:常用于一句话的引用,cite属性表示引用来源
    浏览器解析时,
    -->
    <q cite="http://www.jredu100.com">被引用的一句话</q><br>
    <em>
    被强调了!!!
    </em><br>
    <strong>被强调了!!!</strong><br>
    <i>被强调了!!!</i><br>
    <b>被强调了!!!</b><br>
    <!--
    small:small标签可以多层嵌套,表示更小一号,直到字体小到最小为止。
    big:用big同上
    但是在新规划中,两者不被提倡使用,提倡使用样式表替代style="font-size:11px;"
    css样式替代
    -->
    <!--img 图片标签
    1、src属性:表示图片引用路径
    >常见路径的写法
    * 相对路径
    当图片在当前文件下一层时,文件夹名/图片名 img/abc.jpg
    当图片与当前文件在同一层时,图片名 src="abc.jgp"
    当图片在当前文件上一层时,../图片名 src="../computer.jgp"
    使用相对路径时,图片最外层只能放到网站根目录。
     
     
    绝对路径:写法file:///E:/aaa.png 但是,严禁使用。
    网络连接:直接使用图片的网络地址,但是图片在别人的服务器,不可控,
    所以不建议使用。
    2、title:当鼠标指上时,显示的提示文字
    3、alt:当图片无法加载时,显示的文字
    4、width/height:图片的宽度和高度
    5、align:图片周围的文字,相对于图片的排列方式。可选值:top/center/bottom
    -->
  • 相关阅读:
    [Algorithm] Delete a node from Binary Search Tree
    [Javascript] Check both prop exists and value is valid
    对象的多态性
    spring 定时任务(3)--配置多个定时任务
    能上QQ无法打开网页
    [置顶] Ajax核心--XMLHttpRequest对象
    linux内核--进程地址空间(一)
    [SQL]一个删选数据的例子,使用GROUP、DISTINCT
    [置顶] 腾讯2014软件开发笔试题目
    DBS小结
  • 原文地址:https://www.cnblogs.com/zhang11424/p/6539202.html
Copyright © 2011-2022 走看看