第三天学习：初学Html的标签语法

关键字：初学Html的标签语法

晨跑计划：

　　　　

学习任务：

  1. 第1章 Html介绍

  2. 第2章 认识标签(第一部分)

学习记录：

  • 1-1html代码的出体验，制作我的第一个网页
    • 初步了解了一个简单Html页面，body元素的内容会显示在浏览器中，title元素的内容会显示在浏览器的标题栏中。
  • 1-2html和CSS的关系
    • html是页面内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
    • CSS样式是表现。比如：标题字体、颜色变化，或是为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称为表现。
    • JavaScript是用来实现页面的特效效果，有动画的，有交互的一般都是用JavaScript来实现的。
  • 1-3认识html标签
    • <h1></h1>是文档的标题标签
    • <p></p>是段落标签
    • <img src="">这是图片标签
    • &nbsp;用来表示文章中的空格
  • 1-4标签的语法
    • 标签由英文尖括号<和>括起来，如<html>就是一个标签
    • html中的标签一般都是成对出现的，分开始标签和结束标签，结束标签比开始标签多一个/ 如<p> </p>
    • 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如<div><p></p></div>
    • html的标签是不区分大小写的，基本上是用小写。
  • 1-5认识html文件基本结构
    • <html></html>称为根标签，所有的网页标签都在里面
    • <head>标签用来定义文档的头部，他是所有头部元素的容器　　
      • html头部元素
        • <title>定义文档的标题
        • <base>定义页面上所有连接的默认地址或默认目标（target）
          • 如：<base href="http://www.baidu.com" />　　　　　　　　
        • <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>被用于描述页面的内容，比如关键字，文档的作者等，<meta>标签始终位于head中
        • <script>定义客户端脚本，比如JavaScript
          • 例如向浏览器输出“hello world!”<script type="text/javascript"> document.write("Hello World!") </script>
    • 在<body>和</body>标签之间的内容是网页的主要内容,在这里的标签都会在浏览器显示出来，如：
      • <hx>(x为1-6)文档的标题标签
      • <p>段落标签
      • <a>超链接标签
      • <img>图片标签
  • 1-7了解HTML代码注释
    • 方便自己回忆以前代码的用途和帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码
    • 语法：<!--注释文字-->
  • 2-5强调语气，<strong>和<em>标签的区别
    • <strong>强调的语气比<em>重
    • <em>默认用斜体表示，<strong>用粗体表示，建议用<strong>
    • <i>斜体效果
    • <b>粗体效果
  • 2-6<span>标签为文字设置单独样式
    • <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

    • 例如：<style>
      span{
      color:blue;
      }
      </style>     <spn>美国梦</spn>

  • 2-7<q>标签，段文本引用
    • 语法：<q>引用文本</>
    • 注意：要引用的文本不用加双引号，浏览器会对q标签自动添加双引号
  • 2-8blockquote标签的使用
    • <blockquote>的作用是对长文本的引用
    • 语法：<blockquote>引用长文本</blockquote>
    • 注意：要引用的文本不用加双引号
  • 2-9使用<br>标签分行显示文本
    • <br />相当于word文档中的回车。
  • 2-11认识<hr>标签，添加水平横线
    • <br />,<hr />,<img />都是空标签，只有一个开始标签，没有结束标签
    • <hr>的样式可以通过css进行修改
  • 2-12<address>标签，为网页加入地址信息
    • <address>联系地址信息</address>
    • 在浏览器上默认显示的样式为斜体，可以用CSS样式修改　　
  • 2-13<code>标签
    • 将文本以展现计算机代码的字体显示，如值和变量名
    • 语法：<code>代码语言</code>
    • 注：如果是多行代码，可以用<pre>　
  • 2-14<pre>标签
    • 显示多行代码
    • 语法：<pre>代码段</pre>

扩展阅读：

  • html样式的定义及调用
    • 外部样式表：当样式需要被应用到很多页面的时候使用
      • 例如：<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>　　
    • 内部样式表：当单个文件需要特别样式时使用
      • 例如：<heda><style type="text/css">body {background-color:red}p {margin-left:20px}</style></head>
    • 内联样式：当特殊的样式需要用到个别元素时使用，样式属性可以包含任何CSS属性
      • 例如：<p style="color: red;margin-left:20px">段落</p>　　
    • 优先级：内联样式>内部样式表>外部样式表
    • <style> 定义样式定义
    • <link>定义资源引用
    • <div>定义文档中的节或者区域（块级）
    • <span>定义文档中的行内的小块或区域
  • 写给入门者的13条HTML代码编写指南
    • 总结了30条html代码编写的指南
    • 尽可能少的使用无语义的标签div和span
    • 在语义不明显时，既可以使用div或者p时，尽量用p
    • 不要使用纯样式标签，如：b、font、u等，改用css设置
    • 需要强调的文本，能用CSS指定就不用storng或者em标签
  • html中定位的问题
    • 图片介绍了html中标签和元素的定位
  • html中图片、CSS、JS等路径加载问题
    • 介绍了网页文件存取路径的3中方式：物理路径、绝对路径和相对路径
    • "."--代表目前所在的目录
    • ".."--代表上一层目录
    • "/"--代表根目录
    • 如果你的　目标文件是/app/views/home/index.php,在该文件想引用/public/css/style.css,那么文件的相对路径则是../../../public/css/style.css。
  • 初学html常见问题总结
    • 典型的，书上很少提及过的关于html中页面、布局这类的问题　　　　　　　　　　　　

问题的记录与解决：

  •  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">的作用？
    • 使用带有http-equiv属性的<meta>标签时，服务器将把名称/值对添加发送给浏览器的内容头部
    • content-type:text/html（内容类型）这是将告诉浏览器准备接受一个HTML的文档，text/html之外还有text/css、text/javascript、application/vnd.ms-excel，浏览器是通过content-type这个标记来了解文件类型的，而不是后缀名。
    • charset=CTF-8:编码方式，用的是UTF-8编码
    • 相关链接
  • 什么是语义化以及语义化的好处？
    • 明白每个标签的用途，根据内容的结构化选择合适的标签，比如，网页上的文字的标题就可用<title>标签，网页各个栏目的栏目名称也可以使用<title>标签
    • 好处是为了更容易被搜索引擎收录，解析和更容易让屏幕阅读器独处页面内容
    • 理解html语义化
  • <a href="">,<a href="#">,<a href="javascript:void(0)">三者的区别
    • <a href="">默认打开的还是当前的页面，会刷新一下重新打开
    • <a href="#">会回到页面顶部，不会刷新页面，并且浏览器地址网站后面会多显示“#”
    • <a href="javascript:void(0)"局部刷新页面时使用
    • <a href="#1">页面跳到id地址为1的锚点位置并在浏览器地址网站后面多显示“#”和id地址
    • <a href="#55">（55为不存在的id地址），页面不会跳转也不会刷新
    • 相关链接
  • 如果同一个页面出现多个html、body会怎么样？
    • 同一个页面如果页面如果含有多个html标签，浏览器会自动忽视第二个html标签，但是html里面的内容仍然会显示。对一些标签，比如：title、body、head，一个页面只能有一个，浏览器只会显示第一个标签的内容。p，div等标签则都会显示。
    • 相关链接

 

posted @ 2016-07-07 09:06  桂  Views(213)  Comments(0)    收藏  举报