HTML学习记录和总结

本博文仅为本人学习的一个记录和总结!
学校开设了JSP这门课,觉得挺有意思的,就去网上学了一下HTML,我是在菜鸟教程学的,用的是HBuilder(这真是一个很好的IDE)学完之后就想总结一下知识点,巩固一下。
代码后面跟的都是用HTML标签之后显示的效果图片。
1.HTML默认模板

 
          
          
          
        总结      
                       
                           
    

2.定义标题

一号标题

二号标题

三号标题

四号标题

五号标题
六号标题

HTML学习记录和总结_第1张图片

3.定义注释,段落,换行

这是一个注释
 


这是一个段落

HTML学习记录和总结_第2张图片

4.定义文本

普通文本
加粗文本
加粗文本
倾斜文本
倾斜文本
放大文本
缩小文本
文本上标上标  例如:X 2
文本下标下标  例如:O 2
该段落文字从右到左显示。

演示: 实现长短不一的引用语
删除文本插入文本!

HTML学习记录和总结_第3张图片

5.定义图片

some_text

图片与文字默认底部对齐 PDF-Word

图片与文字默认中心对齐 PDF-Word

图片与文字默认顶部对齐 PDF-Word

HTML学习记录和总结_第4张图片

6.定义图片链接

点击太阳或其他行星,注意变化:

Planets Sun Mercury Venus

HTML学习记录和总结_第5张图片

7.定义预格式文本

 
        用pre标签可以将处于pre标签中的
        空行
        
        和    空格
        原封不动的输出
    

HTML学习记录和总结_第6张图片

8.不同的"计算机输出"标签

计算机输出
键盘输入
打字机文本
计算机代码样本
计算机变量

9.缩写或首字母缩写

etc.
WWW

把鼠标移至缩略词语上时,可展示完整版本。

10.定义链接

这是通往博客园的链接
本链接是指向与本文件在同一文件夹的链接。
HTML 教程
HTML 教程
点击这里! 跳出框架!

HTML学习记录和总结_第7张图片

11.跳到指定章节

查看章节 4

章节 1

这边显示该章节的内容……

章节 2

这边显示该章节的内容……

章节 3

这边显示该章节的内容……

章节 4

这边显示该章节的内容……

HTML学习记录和总结_第8张图片

12.CSS内联样式

这是一个段落。

这是一个段落

这是一个段落。

一个段落。

居中对齐的标题

向左对齐的标题

HTML学习记录和总结_第9张图片

13.定义列表

无序列表:

  • Coffee
  • Milk

有序列表:

  1. Coffee
  2. Milk

圆点列表:

  • Apples
  • Bananas
  • Lemons

圆圈列表:

  • Apples
  • Bananas
  • Lemons

正方形列表:

  • Apples
  • Bananas
  • Lemons

编号列表:

  1. Apples
  2. Bananas
  3. Lemons

大写字母列表:

  1. Apples
  2. Bananas
  3. Lemons

小写字母列表:

  1. Apples
  2. Bananas
  3. Lemons

罗马数字列表:

  1. Apples
  2. Bananas
  3. Lemons

小写罗马数字列表:

  1. Apples
  2. Bananas
  3. Lemons

嵌套列表​:

  • Coffee
  • Tea
    • Black tea
    • Green tea
      • China
      • Africa
  • Milk

一个自定义列表:

Coffee
- black hot drink
Milk
- white cold drink

HTML学习记录和总结_第10张图片
HTML学习记录和总结_第11张图片
HTML学习记录和总结_第12张图片
HTML学习记录和总结_第13张图片
HTML学习记录和总结_第14张图片

14.定义表格

两行三列:

10000 20000 30000
400 500 600

单元格跨两列:

单元格跨两列
Name Telephone
Bill Gates 555 77 854 555 77 855

单元格跨两行:

单元格跨两行
First Name: Bill Gates
Telephone: 555 77 854
555 77 855

在表格内将不同的元素显示

这是一个段落

这是另一个段落

这个单元格包含一个表格:
A B
C D
这个单元格包含一个列表:
  • apples
  • bananas
  • pineapples
HELLO

定义单元格内容与边框、单元格边框与边框之间的距离

First Row
Second Row
First Row
Second Row
First Row
Second Row

HTML学习记录和总结_第15张图片
HTML学习记录和总结_第16张图片

15.HTML区块元素与内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例: <h1>, <p>, <ul>, <table>

我喜欢 蓝色 的花。 内联元素在显示时通常不会以新行开始。 实例: <b>, <td>, <a>, <img>

HTML学习记录和总结_第17张图片

16.HTML布局

使用<di>标签进行布局

内容在这里

使用表格布局

主要的网页标题

菜单
HTML
CSS
Javascript
内容在这里
居中吧

HTML学习记录和总结_第18张图片

17.HTML表单与输入

注册用户

用户昵称:
登录密码:
性别:
爱好: 踢足球 玩游戏 打篮球
头像:
月份:
简介:
           

HTML学习记录和总结_第19张图片

18.HTML框架


RUNOOB.COM

HTML学习记录和总结_第20张图片

19.HTML脚本

20.常用HTML字符实体

 
<
>
&
"
'
©
×
÷

HTML学习记录和总结_第21张图片
学到这里就学完了基础啊!,我觉得才是入了基础的门口吧,随便踢一脚就能将我提出门外的那种!继续学习后续部分
HTML学习记录和总结_第22张图片
HTML学习记录和总结_第23张图片
最后从正点原子盗了一张动图,就是觉得好玩,如有侵权,我立即删除,感谢。

你可能感兴趣的:(HTML学习记录和总结)