html5自学总结及分析,HTML学习记录和总结

c4468b3f4df77e96b0a416fa2a870fba.png

HTML学习记录和总结

本博文仅为本人学习的一个记录和总结!

学校开设了JSP这门课,觉得挺有意思的,就去网上学了一下HTML,我是在菜鸟教程学的,用的是HBuilder(这真是一个很好的IDE)学完之后就想总结一下知识点,巩固一下。

代码后面跟的都是用HTML标签之后显示的效果图片。

1.HTML默认模板

总结

2.定义标题

一号标题

二号标题

三号标题

四号标题
五号标题
六号标题

f7aa0adf6cb2e02295a98ff9fc4483c1.png

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

这是一个注释


这是一个段落

5b1e86a43458ff390abeb5db7f909a4c.png

4.定义文本

普通文本

加粗文本

加粗文本

倾斜文本

倾斜文本

放大文本

缩小文本

文本上标上标  例如:X 2

文本下标下标  例如:O 2

该段落文字从右到左显示。


演示:

实现长短不一的引用语

删除文本插入文本!

612a2597912bd4050da95f85e33cbde8.png

5.定义图片

some_text

Snipaste.png

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

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

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

e64356370dcb34cd3e75bd4a0229a256.png

6.定义图片链接

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

Planets

4e6be7d8e47027ad26305a2bce21d556.png

7.定义预格式文本

 
 

用pre标签可以将处于pre标签中的

空行

和 空格

原封不动的输出

0edd938493ba99e23d9f0d2ff0899b4e.png

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

计算机输出

键盘输入

打字机文本

计算机代码样本

计算机变量

04e00bf969a997df0a778a93c9c2e796.png

9.缩写或首字母缩写

etc.

WWW


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

d50d2efec41ebfea47a27d2344bcffd1.png

10.定义链接

这是通往博客园的链接

本链接是指向与本文件在同一文件夹的链接。

HTML 教程

HTML 教程

点击这里! 跳出框架!

e62cc5b7458a51f87792e407aa6c39c1.png

11.跳到指定章节

查看章节 4

章节 1

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

章节 2

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

章节 3

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

章节 4

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

5257be32d7b77ceef151462d135a6a88.png

12.CSS内联样式

这是一个段落。

这是一个段落

这是一个段落。

一个段落。

居中对齐的标题

向左对齐的标题

eba413041ccaf9cf68bea659fe0d7cf0.png

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

d5b8ee3d9475e3cf58ace65180a94e0f.png

e14ca03ddaaf942856a76d3c763c20d9.png

a39c909ecb2814ee24d4121d11b1f850.png

dc60b637654d3caeb08c643ac05ba5b7.png

7228daeaf49aa74945b6c773b4822351.png

14.定义表格

两行三列:
100002000030000
400500600
单元格跨两列:
单元格跨两列
NameTelephone
Bill Gates555 77 854555 77 855
单元格跨两行:
单元格跨两行
First Name:Bill Gates
Telephone:555 77 854
555 77 855
在表格内将不同的元素显示

这是一个段落

这是另一个段落

这个单元格包含一个表格:
AB
CD
这个单元格包含一个列表:
  • apples
  • bananas
  • pineapples

HELLO

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

d5d3c0478b2c2040382c67ee853693d8.png

fdb2bb3859a44159b0677640b3f75895.png

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

块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>

我喜欢 蓝色 的花。

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

实例: <b>, <td>, <a>, <img>

376a7ce84153bedce517c55520a8feee.png

16.HTML布局

使用<di>标签进行布局

内容在这里

使用表格布局

主要的网页标题

菜单

HTML

CSS

Javascript

内容在这里

居中吧

4a09862779e4de87d8ffdde3d7c4f67f.png

17.HTML表单与输入

注册用户

用户昵称:
登录密码:
性别:

爱好:

踢足球

玩游戏

打篮球

头像:
月份:

一月

二月

三月

四月

五月

六月

七月

八月

九月

十月

十一月

十二月

简介:

请填写你的简介。

 

def3bc1a748a0bcc5de32d589cab788b.png

18.HTML框架

RUNOOB.COM

de4a4d6bbf78ab0c82273f426ced7978.png

19.HTML脚本

document.write("Hello World!");

抱歉,你的浏览器不支持 JavaScript!

617c1dfbbe1c49828a3b79b7b528a211.png

20.常用HTML字符实体

<

>

&

"

'

©

×

÷

628d8c40f308aa380543ab908965ed76.png

学到这里就学完了基础啊!,我觉得才是入了基础的门口吧,随便踢一脚就能将我提出门外的那种!继续学习后续部分

1595cb095970e00a9d73fa518befeefa.png

117356e9699219a4c7a79bec2440748c.png

最后从正点原子盗了一张动图,就是觉得好玩,如有侵权,我立即删除,感谢。

791fe09e6055201d35d656ea5143e591.png

c52ee5cb36d45b9ae977be51a1b7d027.png

原文链接:https://www.cnblogs.com/structmooc/p/11694981.html

如有疑问请与原作者联系

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com

特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值