前端笔记--HTML-1

html基本结构:








在html中,标题是通过h1~h6等标签进行定义。请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

段落是通过p标签定义。

链接是通过a标签定义。

图像是通过img标签定义。


标签在 HTML 页面中创建水平线


换行标签

用法:








This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

这是一个段落

这是一个链接

运行:

style属性改变html的样式:

background-color 属性为元素定义了背景颜色。
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。
text-align 属性规定了元素中文本的水平对齐方式。







标题

段落

运行:
html格式化:

文本格式化标签:

定义粗体文本 
 定义大号字
 定义着重文字
 定义斜体字
 定义小号字
 定义加重语气
定义下标字
定义上标字
 定义插入字
定义删除字

删除字和插入字效果:

一打有 二十 十二 件。

运行:

“计算机输出”标签:

定义计算机代码
定义键盘码
定义计算机代码样本
 定义打字机代码
定义变量
定义预格式文本

这些标签常用于显示计算机/编程代码。

引用、引用和术语定义:

定义缩写
定义首字母缩写
定义地址
定义文字方向
定义长的引用
定义短的引用语 定义引用、引证 定义一个定义项目

元素不保留多余的空格和折行,如需解决该问题,您必须在

 元素中包围代码:








var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}



var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

运行:
html样式:

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。




当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

This is a paragraph


这是没有下划线的一个链接!


  定义资源引用。
定义文档中的节或区域(块级)。
定义文档中的行内的小块或区域。
html超链接:

语法:

Visit W3School

html--Target属性:
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:

Visit W3School!

html--name属性:
name 属性规定锚的名称。
你可以使用 name 属性创建 HTML 页面中的书签。书签对读者是不可见的。
当使用命名锚时,我们可以定位到想去的位置,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

点击这里,跳转到那么name="tips"那条语句显示的内容
基本的注意事项 - 有用的提示
html图片:

格式:Big Boat,alt中的内容只有在图片加载失败才会显示。
背景图像:



图像链接:

图像链接:

图像映射:



点击图像上的星球,映射到对应图像上。

Planets Venus Mercury Sun

注释:img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

   定义图像。
   定义图像地图。

shape和coords:是两个主要的参数,用于设定热点的形状和大小。形状有rect,circle,poligon三种。大小表示为:coords="x1, y1,x2,y2"。

html表格:

表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 定义表格的行。 定义表格的页眉。 定义表格的主体。 定义表格的页脚。 定义用于表格列的属性。 定义表格列的组。

表格的表头可横可竖



表头:

标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 定义表格
定义表格标题。
定义表格的表头。
定义表格单元。
姓名 电话 电话
Bill Gates 555 77 854 555 77 855

垂直的表头:

姓名 Bill Gates
电话 555 77 854
电话 555 77 855

跨行跨列:



横跨两列的单元格:

姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

姓名 Bill Gates
电话 555 77 854
555 77 855

运行效果:

表格内也可以用标签:



这是一个段落。

这是另一个段落。

这个单元包含一个表格:
A B
C D
这个单元包含一个列表:
  • 苹果
  • 香蕉
  • 菠萝
HELLO

运行效果:

单元格边距:



没有 cellpadding:

First Row
Second Row

带有 cellpadding:

First Row
Second Row

运行效果:

表格背景颜色与图片;单元格的设置同表格一样但是是在td中设置:

背景颜色:

First Row
Second Row

背景图像:

First Row
Second Row

运行效果:

表格中排列(align属性):

消费项目.... 一月 二月
衣服 $241.10 $50.20
化妆品 $30.00 $44.45
食物 $730.40 $650.00
总计 $1001.50 $744.65

frame属性控制围绕表格的边框:



注释:frame 属性无法在 Internet Explorer 中正确地显示。

Table with frame="box":

Month Savings
January $100

Table with frame="above":

Month Savings
January $100

Table with frame="below":

Month Savings
January $100

Table with frame="hsides":

Month Savings
January $100

Table with frame="vsides":

Month Savings
January $100

运行效果:
html列表:

无序列表:



Disc 项目符号列表:

  • 苹果
  • 香蕉
  • 柠檬
  • 桔子

Circle 项目符号列表:

  • 苹果
  • 香蕉
  • 柠檬
  • 桔子

Square 项目符号列表:

  • 苹果
  • 香蕉
  • 柠檬
  • 桔子

有序列表:



数字列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

小写字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

罗马字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

小写罗马字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

嵌套列表:



一个嵌套列表:

  • 咖啡
    • 红茶
    • 绿茶
      • 中国茶
      • 非洲茶
  • 牛奶

自定义列表:



一个定义列表:

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

定义定义列表。

定义定义项目。

定义定义的描述。

运行效果:
html块:

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束),例子:

,

,

    , 。内联元素在显示时通常不会以新行开始,例子:,
    , ,

    定义 span,用来组合文档中的行内元素。当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。

    我的母亲有 蓝色 的眼睛,我得父亲有 碧绿色 的眼睛。

    运行效果:

    你可能感兴趣的:(前端笔记--HTML-1)