博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
认识HTML
阅读量:6413 次
发布时间:2019-06-23

本文共 2208 字,大约阅读时间需要 7 分钟。

基本框架:


1                              2      3 This Is Title 4  5 6  7 

8

9

10

11

12 13

注释:

  • <html>和</html>告诉浏览器文件的内容是HTML
  • 被<head>和</head>包围的首部(head)告诉浏览器关于web页面的信息
  • head标记中放入title标记,title出现在浏览器窗口
  • 页面的主体包括<body>和<body>标记以及他们之间的所有内容,是浏览器中看到的部分
  • 元素 = 开始标记 + 内容 + 结束标记


style,CSS


 

1                      2     This Is Title 3          4     14 

注释:

  • style指定样式为CSS
  • background-color :背景色
  • margin-left,margin-right:左右外边距分别占页面的20%
  • border:页面周围边框为虚线,颜色为黑色
  • padding:在页面主体周围创建一些内边距
  • font-family:定义文本使用的字体


 

HT(hypertext)


 

注释:

  • 使用<a>从一个页面链接到另一个页面
  • <a>的属性指定了链接的目标文件
  • <a>元素的内容是链接的标签。默认的,这个标签有下划线,指示可以单击的
  • 文字和图像都可以用作链接的标签
  • 使用“..”可以链接到源文件的上一层文件夹的一个文件,".."代表父文件夹。
  • “/”用来分隔路径的图像

示图:



<p>,<blockquot><br>


 

1 
2 Passing cars,
3 when you can't see,
4 A glimpse,
5
6 7

8 passing car ,when you can't see.9

注释:

  • <q>:双引号,短引号,作为现有段落的一部分
  • <blockquote>:较长引用,单独显示,为块元素
  • <br>:换行符


 

<ol>,<ul>,<li>


 

1 
    2
  1. one
  2. 3
  3. two
  4. 4
  5. three
  6. 5
  7. four thing 6
      7
    • one
    • 8
    • two
    • 9
    • three
    • 10
    11
  8. 12

注释:

  • <ol>:ordered list  有序
  • <ul> : unordered list 无序
  • <li> : 用来标识每个元素
  • <ol>和<li> 或者 <ul>和<li>总是要一起使用

 


 

URL


 

1 URL: 2     http://www.cnblogs.com/JJ-kelion/ 3          4      cnblogs jj-kelion 5          6     
7

Chai Tea

8
9 Chai tea 10
11 cnblogs jj-kelion

注释:

  • URL:域名,用来唯一标识网站
  • 为了便于访问,在<a>元素中使用title元素
  • 使用target属性在另一个浏览器窗口中打开链接。


 

使用图像:


 

幕后步骤:

  1. 浏览器从服务器获取文件“jj-kelion.html”
  2. 读取“jj-kelion.html”,发现有n个图像需要获取
  3. 从服务器逐个得到图像,从第一开始,显示完后,转向下一个图

常用图片格式:

  • JPEG
  • PNG
  • GIF

格式分析:

  • JPEG:适合连续色调图像,可以表示千万种颜色,有损格式,不支持透明和动画
  • PNG:适合单色和线条构成图,是一种无损格式,允许透明,
  • GIF:最适合单色图和线条图,最多256种颜色,支持透明,无损格式,支持动画。

总结:

  • JPEG和PNG擅长表示logo和文本图像;
  • JPEG擅长照片
  • 需要透明和多种颜色:选择PNG

 


 

<img>


 

1  2  3 a picture 4    
5 a picture

注释:

  • src不只是用于相对链接,还可以放入URL
  • 相同网站上的链接和图像,最好使用相对链接
  • 如果图像未能显示,就会用alt属性指定的描述图像的文本代替图像

创建缩略图步骤:

  1. 为缩略图创建一个目录
  2. 将各个分辨率降低后的照片存入文件夹中
  3. 将页面中的各个<img>元素的src设置为缩略版的
  4. 增加从缩略图到一个新页面显示大图的链接


 

HTML5


 

指南:

  • <!doctype html>  首行
  • alt属性为必要的
  • 指定字符编码,在<head>首部中的首行,<meta charset = "utf-8">
  • 验证代码工具:http://validator.w3.org

转载于:https://www.cnblogs.com/JJ-kelion/p/4924554.html

你可能感兴趣的文章
让script的type属性等于text/html
查看>>
[Docker] Docker Machine intro
查看>>
HA 高可用软件系统保养指南
查看>>
linux 文件系统sysvinit 流程分析
查看>>
体素科技:2018年,算法驱动下的医学影像分析进展
查看>>
Vue 折腾记 - (8) 写一个挺靠谱的多地区选择组件
查看>>
VS Code折腾记 - (3) 多图解VSCode基础功能
查看>>
再不懂区块链,你就OUT了!
查看>>
教你玩转自定义View—手撸一个倒计时控件如此简单
查看>>
『翻译』Node.js 调试
查看>>
我的iOS开发之路总结(更新啦~)
查看>>
Java NIO之拥抱Path和Files
查看>>
微信原图泄露的只能是 Exif ,你的隐私不在这!!!
查看>>
微信小程序教学第三章(含视频):小程序中级实战教程:列表篇-页面逻辑处理...
查看>>
页面间通信与数据共享解决方案简析
查看>>
Swift 中 Substrings 与 String
查看>>
作为一个开源软件的作者是一种什么样的感受?
查看>>
移动端适配知识你到底知多少
查看>>
Java基础笔记16
查看>>
TiDB 在 G7 的实践和未来
查看>>