html学习记录

这篇文章上次修改于 990 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

1.网页的基本结构：

<html>
    <head>
        <title>该内容显示在网页的标题部分</title>
        <style type="text/css">    
            //需要编写的css样式
        </style>
        <script type="text/javascript">
            //编写的js代码
        </script>  
    </head>
    <body>
        <div><h1>此部分为显示在网页中的内容</h1></div>
    </body>
</html>

2.网页的注释：

<!-- 该结构为html中的注释，其中的内容为需要注释的内容 -->

3.网页中的注意事项：

网页图片的格式：
    JPEG：支持的颜色比较多，图片可以压缩，但不支持透明，一般用此格式来保存照片等颜色丰富的图片
    GIF：支持的颜色较少，只支持简单的透明，支持动态图，一般用作图片颜色单一或者动态图
    PNG：支持的颜色多，并且支持复杂的透明，可以用来显示颜色复杂的图片
图片使用原则：效果不一致，使用效果好的；效果一致，使用小的

4.网页的标签及标签属性：

font标签（该标签在开发中不建议使用）该标签用来设置字体的属性
color="red"：该属性用来设置字体标签内容的颜色
size="1"：该属性用来设置字体的大小，大小用1-7的数字来表示不同大小的数字
face=""：该属性用来表示字体的类型
h1标题标签：该标签用来定义一个段落，后边的数字可以是1-6之间的数值，最大是1
h1标签非常重要，他会影响到页面在搜索引擎中的排名，一般页面只能写一个h1
一般页面中标题标签只使用h1-h3，以后的几个基本不使用
p标签来表示段落

meta标签：用来设置网页的一些元数据，比如网页的字符集，关键字和简介等,是一个自结束标签
格式：

  1.charset="utf-8"属性设置网页字符显示为utf-8格式
  2.使用meta标签来设置网页的关键字：<meta name="keywords" content="HTML5,JavaScript">
  3.可以用来指定网页的描述：在搜索引擎搜索界面时，会同时检索页面中的关键词和描述：<meta name="description" content="相关信息">
  4.可以使用meta标签来做请求的重定向**
    格式：<meta http-equiv="refresh" content="秒数;url=跳转网页地址" />
    注意：写在head标签下，<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />,表示网页五秒后跳转到指定网页

br标签来表示换行： ，是一个自结束标签
hr标签表示水平线：<hr />，是一个自结束标签
img标签用来表示图片，是图片标签：，是一个自结束标签
src=""：该属性用来设置一个外部图片的路径，目前使用的都是相对路径，可以用../来返回上一级
alt=""：该属性可以用来描述设置图片的属性，可以用来设置图片不能正常显示时对图片的描述，只能在图片不能正常显示时会有，搜索引擎可以通过alt属性来识别不同类型的图片，若不写，则不会检索收录
width=""：该属性用来修改图片的宽度，单位一般为px(像素)
height=""：该属性用来修改图片的高度，单位一般为px(像素)
注意：宽度和高度如果只设置一个属性，另一个也会等比例调整大小，一般开发中除了自适应页面，不建议修改这两个属性

iframe内联框架：
使用内联框架可以引入一个外部页面，使用iframe创建一个内联框架
属性：

  src：执行一个外部页面的路径，可以使用相对路径
  <iframe src="001.html" ></iframe>
  name:框架名字
  width:宽度
  height:高度

a标签表示超链接：
属性：

  href：指向链接跳转的目标地址，可以是一个相对路径，也可以是一个完整的地址
    href="链接地址"，当链接地址位置是"#"，表示跳转到页面顶部
  target：用来指定打开链接的位置：
  target="_self":表示在当前窗口打开（默认值）
  target="_blank":表示在新的窗口打开链接
  target="tom":可以设置为一个内联框架的名字，将在内敛框架中打开，引号内的内容为内联框架属性中name的值
  id属性：该属性每个元素都可以设置，可以作为标签的唯一表示；id属性在同一个页面只能有一个，不能重复
    配合超链接使用方法：在标签中定义好id属性，超链接写法：href="#id属性值"，即可跳转到该id对应的标签处
  mailto属性：配合超链接标签使用，当href的值写此内容时，会打开默认的邮件客户端并给设置的收件人发信
    使用方法：href="mailto:abc@abc.com"

link标签，主要用来引用css文件，是一个自结束标签。
书写格式为：，其中，href后边的内容为css文件的路径及名称，路径写相对路径即可
center标签中的内容会默认在页面中居中显示，可以将要居中显示的东西全放在标签中
div标签：主要用来对页面进行布局
span标签：是一个内联元素，指的是只占自身大小的元素，不会占用一行
input标签：输入框标签，使用input标签可以创建一个文本输入框
type属性：
title属性，这个属性可以给任何标签指定，作用是当鼠标移到元素上时，元素中title属性的值将会作为提示文字显示。

table标签：在HTML中，使用table标签来创建一个表格；table是一个块元素
写法：

用法：

  在table标签中使用tr来表示表格中的一行，有几行就有几个tr
  在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
  rowspan用来设置纵向的合并单元格
  colspan横向的合并单元格
  可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果
  table和td边框之间默认有一个距离，通过给table设置border-spacing属性可以设置这个距离，写法：border-spacing:0px;
  border-collapse可以用来设置表格的边框合并，如果设置了边框合并，则border-spacing的距离自动失效
  设置隔行变色,利用元素选择器nth-child()。写法：
   tr:nth-child(even){
      background-color: #bfa;
   }

注意：

  1.在HTML中为我们提供了三个标签：
    1）thead 表头，thead中的内容，永远会显示在表格的头部
    2）tbody 表格主体，tbody中的内容，永远都会显示表格的中间
    3）tfoot 表格底部，tfoot中的内容，永远都会显示表格的底部
  2.这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
  3.如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
  4.在选择元素的时候，通过table > tr 无法选中行 需要通过tbody > tr
  5.以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
  6.表格的列数由td最多的那行决定
  7.表格是可以嵌套，可以在td中在放置一个表格

h5标签：该标签规定，对于不需要着重的内容而是单纯的加粗或斜体，可以使用i和b标签

:表示一段内容中的着重点，主要表示语气上的强调，一般表现是斜体字

：表示强调的内容，比em更强烈，模式使用粗体显示

:标签中的内容会以斜体显示

:标签中的内容会以粗体显示

<big>:标签中的内容会比其父元素中的文字要大一点，没有语义

<cite>:网页中所有加书名号的内容都可以使用cite标签，表示参考的内容

<q>:表示一个短的引用(行内引用)，引用的内容浏览器会默认加上引号

<blockquote>：表示一个长引用(块级引用)

:此标签用来设置下标

:此标签用来设置上标

<ins>:表示一个插入的内容，会自动添加下划线

<del>:表示内容是一个删除的内容，会自动添加删除线

<code>:语义标签，专门用来表示代码，但是不会保留格式，一般结合pre标签使用

<pre>:是一个预格式标签，会将代码中的格式保存，不会忽略多个空格

列表标签：列表之间可以互相嵌套，可以在无序列表中放有序列表，也可以在有序列表中放无序列表
无序列表

  <ul\>:使用ul标签来创建一个无序列表
  <li\>:使用li标签来创建列表项，一个li就是一个列表项
    属性：type，指定项目符号的类型
      disc：默认值，表示实心圆点
      square：实心方块
      circle：空心圆
    注意：
      默认的项目符号我们一般都不用,如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
      li和ul标签都是块元素

有序列表：和无序列表类似

  \<ol>:有序列表，使用有序的序号作为项目符号
    属性：type，可以指定序号的类型
    可选值：1(表示使用阿拉伯数字)；a/A(采用英文字母)；i/I(采用大小写的罗马数字作为序号)

定义列表：

  解释：
    定义列表用来对一些词汇或内容进行定义
  方法：
    使用dl来创建一个定义列表，有两个子标签：dt：被定义的内容；dd：对定义内容的描述
  用法：
    <dl>
      <dt>内容</dt>
      <dd>描述</dd>
    </dl>

5.html中的实体符号（转义字符）：

解释：在html中，一些特殊字符是不能直接使用的，需要一些特殊符号来表示这些特殊字符，我们称之为实体，浏览器解析到实体时，会自动将实体转换为特殊符号
语法：&实体的名字;
    &lt;    表示小于号"<"
    &gt;    表示大于号">"
    &nbsp;  表示空格符号
    &copy;  表示版权符号“©”

6.文档声明：

在网页的最上边写：<!doctype html>,表示声明该网页是用html5标准来写的
不写文档声明，会导致有些浏览器进入一个怪异模式

7.字符编码问题：

常见字符集：ASCII/ISO-8859-1/GBK/GB2312/UTF-8

8.xhtml的语法规范：

1)不区分大小写，但是一般使用小写
2)注释不能嵌套
3)html标签必须结构完整，要么成对出现，要么自结束标签
4)html标签可以嵌套，但是不能交叉嵌套
5)html标签中的属性必须有值，且值必须加引号

9.元素之间的关系：

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

亿点思路