HTML basics
What is HTML?
HyperText Markup Language Wenben Chao Biaoji Yuyan
HTML Development History
1993 IETF released HTML1.0
1995 W3C released HTML2.0
1996 W3C released HTML3.2
W3C released HTML4.0 in 1997
W3C released HTML 4.0.1 in 1999
In 2000, W3C released XHTML1.0.
In 2001, W3C released XHTML1.1 and
XHTML2.0?
In 2004, WHATWG released the HTML5 draft.
In 2008, the official version of HTML5 was merged and released. HTML5 was
finalized in 2014.
HTML features
HTML does not need to be compiled, and is executed directly by the browser. The
HTML file is a text file.
HTML files must use html or htm as the file name suffix.
HTML is not case sensitive, and HTML is the same as html.
Development tools:
Notepad, word, etc.
are preferred by big guys, as well as Dreamweaver, Sublime Text, webStorm, Notepad++
1.
HTML basic syntax HTML basic structure
HTML tags
HTML elements
HTML attributes
Comments
basic structure
<html>
<head> <!-- 头部信息-->
<title>标题</title>
</head>
<body bgcolor="blue">
网页主体
<hr/> <!-- 水平线-->
</body>
</html>
2. HTML document paragraph
DOCTYPE document type declaration
<! DOCTYPE> declaration must be placed on the first line of HTML document
<! DOCTYPE> declaration is not an HTML tag
Web page encoding settings
Problem: When the web page is garbled
Solution: Add: between the head tags:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
文字和段落标签
标题标签：<h1></h1>~<h6></h6>由大到小
段落标签<p align="left"></p>
align对齐属性值：
left,right,center,justify
换行标签：<br/>
空格
<pre></pre>预格式标签，在里面输什么就展示什么
水平线标签：<hr width="80%" color="#666" align="left"/>
noshade设置水平线无阴影
文字和段落标签
文字斜体：<i> </i> <em></em>
加粗：<b> </b> <strong></strong>
下标：<sub>上标：<sup>
下划线：<ins>
删除线:<del>
<小于 > 大于
®已注册 ©版权
™商标 空白
Note: utf-8, GB2312, gbk and other codes
3. List label
无序列表
<ul type="disc">
<li></li>
<li></li>
</ul>
type: disc square circle
有序列表ol
<ol>
<li></li>
<li></li>
</ol>
type: 1 a A i I
定义列表
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
</dl>
dt和dd是同级标签，dt不能放在dd内，同理dd也不能放在dt里
这三个标签要组合使用
List application scenarios news, course lists, products, rankings, etc.
View the source code of the webpage F12 or right click to view the source code
Structure + performance + behavior
HTML + CSS + JS
4. Images and hyperlink labels
图片
<img src="" alt="" />
img属性：
src URL
alt 图像替换文字
height 高 数值和百分比
width 宽 数值和百分比
title 鼠标移上去显示文字
用百分比会根据浏览器窗口大小进行改变，固定数值则不会变
URL path
relative path and absolute path
It is recommended to use English for the created folders and files
The absolute path starts from the drive letter. It is
recommended to use the relative path to find the web page file you are in.
Use src="1.jpg"
at the same level. src=".../1.jpg"
at the same level. Under src="img/1.jpg"
The role of alt:
Due to the slow internet speed and errors in the src attribute, the browser disables the image. When the user cannot view it, the alt attribute can replace the content of the image displayed in the browser.
Hyperlink label
<a href=""></a>
href:链接地址，可以是内部链接也可以是外部链接。
属性：
href 链接地址
target 链接的目标窗口_self,_blank,_top,_parent
title 链接提示文字
name 链接命名，定义锚
定义锚：
<a href = "#mao1"> 1</a>
<a href = "#mao2"> 2</a>
<a name = "mao1"> content1</a>
<a name = "mao2"> content1</a>
定义锚（不同页面）：
first.html <a href = "second.html#mao1"> 1</a>
second.html <a name = "mao1"> content</a>
电子邮件链接：
<a href = "mailto:e-mail_address"> 1</a>
文件下载：
<a href = "download_address"> 1</a>
5. HTML basic summary Firstly, we
must know the basic structure of html.
Header information, web content constitutes html file
The content in the head is not displayed in the page
Syntax: <tag name></ tag name>
Specification:
enclosed in <and >, tags generally appear in pairs, the end tag is one more than the start tag/
single tag: no end tag, for example,
use <!doctype> to declare Must be placed in the first line of the html document.
Web page encoding is set to utf-8, gb2312, gbk, etc.
Text and paragraph tags,
special symbols,
list tags,
image and hyperlink tags
to be continued…