HTML novices can understand -1
Introduction to HTML
What is HTML?
HTML refers to Hyper Text Markup Language, which is not a programming language but a markup language.
Hypertext: A web text that uses hyperlinks to organize text information in various spaces.
Markup language: Use tags to mark the content of the webpage, and the browser can display the corresponding format according to the markup when running the webpage.
What can HTML do?
Make web pages.
html basics
Basic HTML tags-four examples
HTML title
HTML title is <h1> - <h6>defined by the tag
Instance
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h6>这是6级标题</h6>
operation result
HTML paragraph
HTML paragraphs are <p>defined by <p>tags. The content in the same set of tags can be called a paragraph, and there will be a larger line spacing with the next paragraph.
Instance
<p>这是一个段落</p>
<p>这是另一段</p>
operation result
HTML link
HTML links are <a>defined by tags, and you can jump directly to the corresponding web page by clicking the name of the hyperlink.
Instance
<a href="http://www.baidu.com">百度</a>
operation result
HTML image
HTML images are defined by tags.
Instance
<img src="img/Female.gif" />
<img src="img/Female.gif" width="75" height="75" />
operation result:
Note: The inserted picture must be in the same project as the created file to run successfully.
The name and size of the image are provided as attributes.
HTML element
HTML documents are defined by HTML elements.
HTML elements refer to all codes from the start tag to the end tag.
HTML attributes
Attributes provide additional information for HTML elements.
Example 1:
<a href="http://www.baidu.com">百度</a>
HTML links are <a>defined by tags. The address of the link is specified in the href attribute.
Example 2:
<h1 align="center">一级标题居中对齐</h1>
<!-- 拥有对齐方式的附加信息 -->
operation result:
Example 3:
<body bgcolor="bisque">
<!-- 拥有背景颜色的附加信息 -->
</body>
operation result:
Example 4:
<table border="1">
</table>
<!-- 用有表格表框的附加信息 -->
HTML title
The title tag is not just to use the title to produce bold or large text.
Search engines use titles to index the structure and content of web pages.
Because users can quickly browse web pages through title tags, it is important to use titles to present document structure.
Program example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <h1>到<h6>代表标题标签,一共六级 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<!--
标题标签可直接占一行
align="center" 文本居中对齐
align="right" 文本向右对齐
align="left"文本向左对齐（默认）
-->
<h1 align="center">一级标题居中对齐</h1>
<!-- 注释用"Ctrl+/"表示，插入注释可提高代码的可读性，使人更容易理解-->
</body>
</html>
operation result:
HTML paragraph
Program example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 段落标签,在<p>标签内的话即可称为一个段落,下一段落会有较大行间距 -->
<p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
<p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
<!-- 换行标签<br/> -->
<p>这是一段话这是一行字符这是一段话<br/>这是一行字符这是一段话这是一行字符</p>
<!-- 空格标签  -->
这是一段话这是一行字符 这是一段话这是一行字符
<!-- 大于号>,小于号< -->
<b >是一个加粗符号
<!-- 注册商标 -->
®
<!-- 版权 -->
©
<!-- 空格 -->
</body>
</html>
operation result:
HTML list:
Lists can be divided into two categories: ordered lists and unordered lists.
Program example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--有序列表前的标注默认类型是阿拉伯数字-->
<ol>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
<!--有序列表前的标注默认类型也可使用大小写英文字母或者是大小写罗马数字，如下以大写字母为例。
-->
<ol type="A">
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
<!--无序列表前的标注默认类型是实心原点-->
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
<!--无序列表前的标注也可使用空心原点或者是方形，如下以空心原点为例。-->
<ul type="circle">
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
</body>
</html>
operation result:
HTML hyperlink
The link HTML code is very simple, it looks like this:
<a href="ur1">Link text</a>
The href attribute specifies the target of the link.
The text between the start tag and the end tag is displayed as a hyperlink.
Examples:
<a href="http://www.baidu.com">百度</a>
The above line of code is displayed as: Baidu
HTML link-target attribute
Using the target attribute we can define where to display the linked document.
The following line of code will open the document in a new window. If there is no special instruction, it will default to target=_self to open on this page.
<a href="http://www.baidu.com" target="blank">百度</a>
Note: "Link text" does not have to be text. Images or other HTML elements can become hyperlinks.
Program example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- target=""默认为从当前网页打开即和target="_self"效果一
样,若想新建网页打开可用target="_blank" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="baidu.html" target="_blank">自建百度</a>
<a href="http://www.qq.com">
<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
<img src="img/qq.ico" width="100" height="100"
alt="正在努力加载"
title="本产品由腾讯公司开发"
/>
</a>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 当没有互联网时可以在本项目中新建一个html文件也可练习超链接操作，
如下方的自建百度 -->
<!-- target=""默认为从当前网页打开即和target="_self"效果一
样,若想新建网页打开可用target="_blank" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="baidu.html" target="_blank">自建百度</a>
<a href="http://www.qq.com">
<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
<img src="img/qq.ico" width="100" height="100"
alt="正在努力加载"
title="本产品由腾讯公司开发"
/>
</a>
</body>
</html>
</html>
operation result:
Hyperlink defines anchor
Program example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--
超链接定义锚点
超链接找锚点
<a href="#锚点名称">链接名称</a>
定义锚点
<a name="名称">aaa</a>
-->
<body>
<h3> <a name="top"></a></h3>
<a href="#p1">产品1</a>
<a href="#p2">产品2</a>
<a href="#p3">产品3</a>
<a href="#p4">产品4</a>
<a href="#p5">产品5</a>
<hr >
<h3> <a name="p1">产品1</a></h3>
<img src="img/nike/1.png" />
<h3> <a name="p2">产品2</a></h3>
<img src="img/nike/2.png" />
<h3> <a name="p3">产品3</a></h3>
<img src="img/nike/3.png" />
<h3> <a name="p4">产品4</a></h3>
<img src="img/nike/4.png" />
<h3> <a name="p1">产品5</a></h3>
<img src="img/nike/5.png" />
<!-- 设置“返回顶部”的锚点点击可以迅速返回最顶部 -->
<h3 align="right"><a href="#top">返回顶部</a></h3>
</body>
</html>