Getting to know HTML
HTML: Hyper Text Markup Language (Hyper Text Markup Language)
Hypertext includes: text, picture, video, audio, animation, etc.
w3C standard
w3c World Wide Web Consortium
Structured standard language (HTML, XML)
Performance Standard Language (CSS)
Behavior standards (DOM, ECMAScript)
HTML basic structure
Page header:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
main part:
<body>
我的第一个网页
</body>
A label (empty element) that is rendered separately, such as
Means to use / to close an element, called a self-closing tag
Basic information of the webpage
HTML comment part: IDE shortcut key ctrl+/
html，head，meta，title，body
<!--DOCTYPE 告诉浏览器我们要使用什么规范-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签，用来描述网站的一些信息-->
<!-- meta标签一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keyword" content="html">
<!-- 网页标题 -->
<title>我的第一个网页</title>
</head>
<!--body标签表示网页主体-->
<body>
hello,world
</body>
</html>
Basic webpage tags
Title tag
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
Paragraph tag
Shortcut key: p+TAB
<!--段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，</p>
<p>真奇怪！</p>
Newline label
br+TAB
Similar to paragraph tags, but with tighter line spacing
<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，一只没有尾巴，<br/>
真奇怪 <br/>
Horizontal line label
<!--水平线标签-->
<hr/>
Font style label
Strong bold
Italic em
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love u</strong>
斜体: <em>i love u</em>
Notes and special symbols
Space
Special symbols: & in the middle with the help of ide to view; and at the beginning of the semicolon at the end
<!--特殊符号-->
空 格
空 格
<br/>
>大于
<br>
<小于
<br>
©版权所有
Image tag
Common image formats: jpg, png, gif, bmp
img tag: src alt required
<img src="" alt="">
<img src= "path" alt = "text" title = "text" width="x" height = "y"/>
src image address
Relative address: src= "…/resources/image/1.jpg" recommended
…/Upper-level directory
Absolute address: written from the drive letter, generally not recommended
alt The text used to replace the image when the image does not exist
title Hovering prompt text
width image width
height image height
Link label
``<a href="path"target = "target window location">link text or image`
Link text or images can nest image tags or write text
href is required to indicate which interface to jump to
target indicates where the window is opened
"_blank" new tab opens
"_self" opens on the current page
Hyperlinks
Link between pages
Link from one interface to another
Anchor link
-
Need an anchor tag
This example is written at the top of the body
Use the name attribute to define the anchor tag as top
<!--使用name作为锚标记 top--> <a name = "top">顶部</a> -
Jump to marker
Use href = #anchor tag to achieve jump
Back to the top, jump inside the page
<!--通过#号实现锚链接跳转--> <a href="#top">回到顶部</a>
You can also jump to the mark across pages
<a href="链接标签.html#down">跳转</a>
Functional link
Mail link mailto:
<a href="mailto:[email protected]">点击联系我</a>
QQ promotion
to add on
Block element
Regardless of the content, the element is on its own line
E.g:
h1 -h6 ……
Elements in the line
The width of the content is stretched, and the left and right are all in-line elements can be arranged in a row
E.g: