美文网首页
HEAD FIRST HTML NOTE

HEAD FIRST HTML NOTE

作者: 向着远方奔跑 | 来源:发表于2018-11-19 23:21 被阅读0次

    <!doctype html>html文档开头标注,表明支持最新html规范和标准,可以理解为活的标准,由万维网协会W3C维护,可以向下兼容;任何时候都要使用,除非你确实在写HTML4.01XHTML
    <meta charset="utf-8">在head中设置页面字符编码,一般都要指明
    <em></em>强调
    <del></del>为文本加删除线
    <ins></ins>为文本加下划线
    <a></a>建立链接
    <a href = "https://www.google.com">谷歌<a>
    <a target=“_blank” href = "https://www.google.com" title="搜索">谷歌<a>
    其中的title是给出链接提示信息,也可应用在其他属性中
    target属性告诉浏览器在哪里打开href属性中的链接,其中_blank表示在新窗口中打开
    <h2 id="Cofee">Coffee</h2>
    为属性添加id进行页面唯一标识
    可通过在链接后面添加 /#id 来跳转到指定页面位置
    <a href="#top">Back to top</a>返回到当前页面顶部
    <strong></strong> 强调加粗
    <q></q>短引用
    <blockquote></blockquote>长引用

    • 块元素
      <h1> <h2> ... <h6> <p> <blockquote> <ol> <li>...
      显示时前后各有一个空行
      特立独行
    • 内联元素
      <q> <a> <em> <img>...
      在页面文本流中总在“行内”出现
      随波逐流

    br换行 ——void元素(没有内容和结束标记的元素)
    <li></li>列表项 list item
    <ol></ol> 有序列表 ordered list
    <ul></ul> 无序列表 unordered list
    <ol><li>(或者ulli)要一起使用,离开彼此没有意义,
    列表就是一组列表项:
    <li>元素用来表示每个元素
    <ol><ul>元素把它们归为一组

    • 字符实体(供特殊字符使用,总是以&开头
      > : &gt;
      < : &lt;
      & : &amp;
      ©right; : &copyright; 版权实体

    • img元素
      <img src="图片地址">
      考虑到每个浏览器加载图片的方式和速度问题,或当某些情况无法加载图片时,做好如下说明图片信息方案:
      <img src="图片地址" alt=“描述图片文字”>
      自定义图片的宽度和高度(使用像素数指定)
      <img src="图片地址" width="48" height="100">
      为图像添加链接
      <a href="链接的页面地址"> <img src="图片地址" alt=“描述图片文字”> </a>

    下面为web端常用的三种图像格式优劣比较

    种类 JPEG PNG GIF
    格式 有损 无损 无损
    颜色 1600万 PNG-8(2^8种)/PNG-24/PNG-32 256种
    透明度 不支持 PNG24不支持,8和32支持 支持(只允许设置一种颜色)
    大小 较小 比jpg大 比jpg大
    动画 不支持 不支持 支持
    适用 保存照片和其他复杂图像 保存logo和其他包含单色、线条或文本的简单图形 同PNG
    须知
    • 一定要以<doctype>开头
      每个页面都要从一个doctype开始,这样才能让浏览器和验证工具顺利开展工作;
      任何时候都要使用,除非你确实在写HTML4.01XHTML
    • <html>元素:不能没有它
      紧接着doctype,<html>元素必须是web页面的最顶层元素或根元素。所以,在doctype后面,由<html>标记开始页面,</html>标记结束页面,页面中的所有其他内容都嵌套在这个元素中。
    • 要使用<head>和<body>编写更好的HTML
      只有<head>和<body>元素能直接放在<html>元素中。这说明,所有其他元素都必须放在<head>或<body>元素中,没有例外!
    • 在<head>中指定正确的字符编码
      在<head>中包含一个<meta charset="utf-8">标记。浏览器会感谢你,用户在你的博客上阅读世界各地用户发表的评论时,也会因为你指定了正确的字符编码而感谢你。
    • 没有<title>的<head>算什么
      一定要在<head>元素中包含一个<title>元素。这是必须的。如果没有,则会得到不符合标准的HTML。只能在<head>元素中放置<title>、<meta>和<style>元素。
    • 嵌套某些元素时要当心
      不要把<a>元素嵌在另一个<a>元素中,因为这样会让访问者很迷惑。另外,不允许在<img>void元素中嵌套其他的内联元素。
    • 检查属性
      有些元素属性是必要的,有些则是可选的。如果<img>元素没有<src>属性,就没有意义,alt属性也是必要的。

    相关文章

      网友评论

          本文标题:HEAD FIRST HTML NOTE

          本文链接:https://www.haomeiwen.com/subject/fzgmfqtx.html