前端

02-前端学习-html

Posted by 刘勇(lyonger) on 2019-11-30

HTML文档

  • 所有的HTML文档必须使用文档类型声明开始：。
  • HTML文档本身开头和结尾。
  • HTML文档的可见部分之间和。
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML标题

  • HTML标题。
1
2
3
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML段落

1
2
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML链接

  • 链接的目标是在指定的href属性。
1
<a href="https://www.w3schools.com">This is a link</a>

HTML图像

  • HTML图像与定义的标签。源文件（src），可替代文本（alt）， width和height被设置为属性：
1
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML按钮

  • HTML按钮标签：
1
<button>Click me</button>

HTML列表

  • HTML列表与定义ul（无序/符号列表）或ol（有序/编号列表）标签，其次是li标签（列表项）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

HTML元素

1
2
3
#左右两边是成对标签:<tagname>Content goes here...</tagname>
#有些HTML标签忘记写结尾标签，不影响使用，但建议补全:<p>This is a paragraph
#空HTML元素<br>

HTML属性

  • HTML属性给元素信息进行补充。
  • 属性经常写在开始的tag里, w3schools标准建议使用双引号。
属性名称 释义
herf 超链接
src 引用图像位置
alt 图像无法显示时的文字说明
style 颜色、字体大小等
lang 定义语言
title 将鼠标悬停在段落上时，title属性的值将显示为工具提示。
  • 总结一下：
    • All HTML elements can have attributes
    • The title attribute provides additional “tool-tip” information
    • The href attribute provides address information for links
    • The width and height attributes provide size information for images
    • The alt attribute provides text for screen readers
    • At W3Schools we always use lowercase attribute names
    • At W3Schools we always quote attribute values with double quotes

html元信息

  • 元数据通常定义文档标题，字符集，样式，链接，脚本和其他元信息。

html样式

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

HTML文本格式元素

html_formatting

推荐阅读


赏 支付宝打赏 微信打赏

赞赏一下



FEATURED TAGS
前端
FRIENDS