Fork me on GitHub

primary_javaweb_forHTML

Posted on | Edited on | In | Views:

javaweb基础之HTML_1

HTMl基本结构

可参考教程w3schools

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html document</title>
	</head>

	<body>
		
	</body>
</html>

  • The “!DOCTYPE html” declaration defines this document to be HTML5,It must only appear once, at the top of the page (before any HTML tags).The <!DOCTYPE> declaration is not case sensitive.
  • The “html” element is the root element of an HTML page
  • The “head” element contains meta information about the document
  • The “title” element specifies a title for the document
  • The “body” element contains the visible page content
  • The “h1” element defines a large heading
  • The “p” element defines a paragraph

属性标签有：id，class，style（这三个是通用属性），colspan，type，value（这三个是特有属性）。
语义化标签：标题/段落等。。。

链接使用”a” 标签，由href属性说明链接目的。

1
<a href="https://www.baidu.com">This is a link</a>

HTML Images

使用”img”标签，有source file (src), alternative text (alt，即替代文本), 宽和高作为参数:

1
<img src="baidu.jpg" alt="baidu.com" width="104" height="142">

HTML Headings

使用h1到h6，有默认大小，也可以用CSS样式来修改。不要随意改变heading的尺寸和粗细。

1
<h1 style="font-size:60px;">Heading 1</h1>

扩展阅读：em和px的区别
h1默认是2em，即32px。国内用px，国外用em。
px是绝对的，而em是相对的.

Absolute lengths:

Unit Description
cm centimeters
mm millimeters
in inches(1in=96px=2.54cm)
px pixels(1ps=1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
[译]对于低dpi设备 ，可能1px对应1个像素，但对于高dpi设备，1px对应多个像素。

所以一般不建议使用绝对单位，但已知输出设备的情况可以使用（如打印布局等）

Relative Lengths

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the “0” (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport’s smaller dimension
vmax Relative to 1% of viewport’s larger dimension
% Relative to the parent element（body is a parent to header etc)

Tip: The em and rem units are practical in creating perfectly scalable layout!
Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
[译]em和rem在可扩展布局上应用较多。公式中的Viewport是视窗尺寸。

HTML Paragraphs

“p” 段落

margin边距

Browsers automatically add some space (margin) before and after each “p” element. The margins can be modified with CSS (with the margin properties).

p标签被浏览器默认加上了margin，可以用css样式来取消掉，这是浏览器默认样式带来的风险（空标签也占空间）。取消eg：

1
2
3
4
p{
	margin: 0;
	padding: 0;
}

align对齐

在HTML5中不被采用，其功能一般由css替代

“br”空行

The “br” tag inserts a single line break.
The “br” tag is an empty tag which means that it has no end tag.
Tip: The “br” tag is useful for writing addresses or poems.
Note: Use the “br” tag to enter line breaks, not to separate paragraphs.

“pre”预定义样式（html不支持）

The “pre” tag defines preformatted text.
Text in a “pre” element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Tip: Use the “pre” element when displaying text with unusual formatting, or some sort of computer code.

-------------The End-------------