HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45131319/article/details/104356663

文章目录

一、HTML介绍
二、HTML元素
三、HTML基本标签
四、HTML格式
五、HTML实体
六、HTML链接
七、HTML框架
八、HTML表格
九、HTML列表
十、HTML表单

介绍

HTML文件是什么？

HTML表示超文本标记语言（Hyper Text Markup Language）。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。

<html> #告诉浏览器这是html文档
<head>#头信息中间填标题
<title>Title of page</title>#在浏览器标签中展示title of page
</head>
<body>#会被显示在浏览器中的内容
This is my first homepage.#显示的内容内容
<b>This text is bold</b>#加粗标签
</body>
</html>

Title of page This is my first homepage. This text is bold

元素

HTML文档是由HTML元素组成的文本文件。
HTML元素是预定义的正在使用的HTML标签。

标签

HTML标签用来组成HTML元素。
HTML标签两端有两个包括字符：“<”和“>”,这两个包括字符被称为角括号。
HTML标签通常成对出现，比如<b>和始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。
HTML标签是大小写无关的， <b>跟<B>表示的意思是一样的。

下面是一个html元素

<b>This text is bold</b>#此html元素以<b>开始，内容是this text is bold,以</b>结束

标签属性

标签可以拥有属性，属性可以为页面上的html提供附加信息。
标签<body>定义了html主体，使用附加的bgcrlor属性和text，可以使浏览器的背景和文字添加颜色

<html>
<body bgcolor="red" text="yellow">
This is a paragraph.
<p>This is another paragraph</p>
</body>
</html>

在这里插入图片描述

引号样式
属性值应该被包含在引号中,双引号最常用,但是单引号也可以用，在某些情况下，比如：
name=‘Lisa “Adam” Allen’
注:引号样式需为英文

基本标签

<h1>hello</h1>#h后面数字有关文本大小关系
<h2 align="center">hello</h2>#align=""可以传入排列方式如:left(靠左)center(剧中)right(靠右)
<p><h3>hello</h3></p>#<p></p>为双换行，开始一次，结尾一次
hello
<br>#换行
<hr>#水平线

hello

格式标签

HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。

格式化文字

<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small><br>
This text contains
<sub>subscript</sub><br>
This text contains
<sup>superscript</sup><br>
<address>BOX 666<address><br>
<abbr title="Hypertext markup language">HTML<abbr><br><br>
<bdo dir="rtl">I was reversed</bdo><br>
<del>del<del><br>
<ins>insert<ins><br>

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains
_subscript

This text contains
^superscript

China

HTML

I was reversed

~~del~~

insert

预格式化文本

<pre>#将标签之间的格式按照原格式输出
for i in range(6):
	print(i)
</pre>

for i in range(6):
	print(i)

块引用

<p>This is a long quotation</p>
<blockquote>
this is text thi is text thie is text thi is text
this is text thi is text thie is text thi is text
this is text thi is text thie is text thi is text
<blockquote>

在这里插入图片描述

实体

在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。

一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）

想要在HTML文档中显示一个小于号，我们必须这样写：<或者<

使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。

注意：实体名是大小写敏感;的。

常用的字符实体

显示	描述	实体名	实体号
	空格	&nbsp；	&#160；
<	小于	&lt；	&#60；
>	大于	&gt；	&#62；
&	逻辑与	&amp；	&#38；
“	双引号	&quot；	&#34；
‘	单引号	null	&#39；

链接

HTML使用超级链接来连接到网络上的其他页面。

文本链接

<a href="https://avatar.csdnimg.cn/7/9/4/1_weixin_45131319.jpg" target="_blank">My headportrait </a>#target="_blank"新窗口打开,_top跳出框架

图片链接

<a href="http://baidu.com">
<img border="0" alt="my headportrait" align="middle" width="100" height="100" src="https://avatar.csdnimg.cn/7/9/4/1_weixin_45131319.jpg">
</a>#border属性调节图片边框，alt属性图片加载不了时说明，

锚标签和name属性

<a id="pagehome">文章目录</a>#锚点
<a href="#pagehome">return pagehome</a>

return pagehome

邮箱链接

<a href="mailto:csdn@163.com?&subject=This%20is%20the%20title&body=This%20is%20the%20content">Send mail !</a>

Send mail !

框架

使用框架，可以在一个浏览器窗口中显示不止一个页面，并可以嵌套

垂直分栏

<frameset cols="25%,50%,25%">#定义如何将窗口拆分为框架
	<frame src="https://baidu.com">#定义框架放入什么文件
	<frame noresize="noresize" src="https://baidu.com">#noresize说明无法调节框架大小
	<frame src="https://baidu.com">
</frameset>

在这里插入图片描述

水平框架

<frameset rows="https://baidu.com">
	<frame src="https://baidu.com">
	<frame src="https://baidu.com">
	<frame src="https://baidu.com>
</frameset>

在这里插入图片描述

noframes标签
当某些浏览器不支持框架时，noframes标签里面的文本会被显示

<noframes>
Your browser does not handle frames!
</noframes>

Your browser does not handle frames!

内联框架

用于网页内显示网页

<iframe src="http://baidu.com" width="200" height="200"></iframe>

使用框架导航跳转指定章节

pagehome

<frameset cols="200,*">
	<frame src="1.htm">
	<frame src="2.html" name="showframe">#框架命名为showframe，使1.html能用target操作目标
</frameset>

1.html

<a href ="2.html#s1" target ="showframe">

2.html

<h1><a name="s1">锚</a><<h1>

表格

使用html可以创建表格

<table  border="1">#border可以控制边框粗细
<caption><h3>My note</h3></caption>#表格标题
<tr>
	<th>number</th><th>content</th><th>content</th>#th标签用来创建表格头
</tr>
<tr>
	<td>First</td><td>mull</td><td>null</td>
</tr>
<tr>
	<td>Second</td><td colspan="2">null</td>#colspan合并表格
</tr>
</table>

My note
number	content	content	conten
First	mull	null	null
Second	null		null

列表

HTML支持有序、无序和自定义列表，列表之间可以嵌套

无序列表

<ul>
	<li>This is number one</li></br>
	<li>This is number two</li>
</ul>

This is number one
This is number two

有序列表

<ol>
	<li>This is number one</li>
	<li>This is number two</li>
</ol>

This is number one
This is number two

自定义列表

<ol type="A">
	<li>This is number one</li>
	<li>This is number two</li>
</ol>

在这里插入图片描述

表单

HTML表单用来选择不同种类的用户输入。

输入框和按钮

<from>
username:
	<input type="text" name="user"><br>
password:
	<input type="password" name="password"><br>
<input type="submit" name="submit" value="submit">
</form>

在这里插入图片描述

复选框

<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>

在这里插入图片描述

单选按钮

<form>
male:<input type="radio" name="sex"><br>
female：<input type="radio" name="sex">
</from>

在这里插入图片描述

下拉框

<select name="one">#name属性预选
<option value="one">one
<option value="two">two
</select>

在这里插入图片描述

文本域

<textarea rows="10" cols="30">
This person was writeing blog
</textarea>

在这里插入图片描述

从表单发送电子邮件

<from action="mailto:csdn@163.com"  method="post" antype="text/plain">
<h3>This form sends an e-mail to csdn<h3>
Name:<br>
<input type="text" name="name" value="yourname" size="20"><br>
Mail:<br>
<input type="text" name="mail" value="yourmail" size="20"><br>
Comment:<br>
<input type="text" name="comment" value="yourcoment" size ="40"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</from>