本篇文章主要介绍HTML入门基础，感兴趣的朋友参考下，希望对大家有所帮助。
标记、标签、元素
标签和元素通常是描述同样的意思，但是严格来说，一个html元素包含了开始标签和结束标签。
一个标准的HTML页面
<!--可以插入脚本，样式文件(css)以及各种meta信息页面标题 <!--可视化网页内容（文档的主体）
常用标签
①HTML标题：
标题是通过
~
标签来定义的，h是”header”的缩写。h1是主标题，只能使用一次，h2是副标题，h3~h6一次递减字体大小。
立即学习“前端免费学习笔记（深入）”；
②HTML段落：
段落是通过标签
来定义的，p是”paragraph”的缩写，经常被用来创建一个段落。
③HTML连接
链接是通过标签来定义的。a标签也叫archor(锚点)元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的内部导航功能。
href=”网址导航” target=”_self”：在当前页面进行跳转（默认） target=”_blank”：新开页面跳转
锚点：是文档中某行的一个记号，用于链接到文档中的某个位置。
定义锚点：
链接到锚点： 回到顶部
如果只写 默认回到页面顶部
④HTML图像
图像通过单标签来定义。
src指“source”。源属性的值是图像的URL地址。
alt属性用来为图像定义一串预备的可替换的文本。
title属性可以让鼠标悬停在图像上时显示title内容（通常是图像标题）。
⑤特殊字符与标签
标签可以进行换行操作
标签可以定义水平线 空格 <
⑥HTML文本格式化
可以使用标签与对输出的文本进行粗体或斜体转换。通常可以使用和代替前者。然而，这些标签的含义不同：
与定义粗体或斜体文本。
与意味着这段文本是重要的，所以要突出显示。
缩小文本 放大文本
下标 上标
保留文本里所有的空格和换行操作
对于HTML，无法通过在HTML代码中添加额外的空格和空行，所有连续的空格（换行）会被合并为一个。
⑦HTML区块
HTML可以通过
和将元素组合起来。大多数HTML元素被定义为块级元素或内联元素（行内元素）。
块级元素：独占一行，元素前后自动换行。例如：、
、
、
、
内联元素：在显示时通常不会以新行开始。例如：、、、、、、@@##@@
p是块级元素，它是可用于组合其他元素的容器。如果与CSS一同使用，p可用于对大的内容块设置样式属性。
span是内联元素，可用于作为文本内容的容器。当与CSS一同使用时，span可用于为部分文本设置样式属性。
⑧HTML列表
无序列表（unorderlist）：此列项目使用粗体圆点进行标记。
@@######@@
· Coffee
· Milk
有序列表（orderlist）：此列项目使用数字进行标记。
@@######@@
1.Coffee
2.Milk
自定义列表（definedlist）：不仅仅是一列项目，而是项目及其注释的组合。
@@######@@
Coffee
– black hot drink
Milk
– white cold drink
⑨HTML表格
表格由
标签来定义。每个表格均有若干行（tablerow），每行被分割为若干单元格（tabledata）。可以为表格指定width和height属性，如果不定义边框属性，表格将不显示边框。@@######@@
在浏览器显示如下：
@@##@@
跨行和跨列的表格单元格
@@######@@
浏览器中显示如下：
单元格跨两格:
Bill Gates555 77 854555 77 855
单元格跨两列:
Bill Gates
555 77 854555 77 855
Cell spacing 增加单元格之间的距离
- Coffee
- Milk
⑩HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签
多数情况下被用到的表单标签是输入标签（）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
- Coffee
- Milk
浏览器显示如下：
First name:
Last name:
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
密码字段
密码字段通过标签 来定义:
- Coffee
- - black hot drink
- Milk
- - white cold drink
浏览器显示效果如下:
Password:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）
标签定义了表单单选框选项
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
浏览器显示效果如下:
Male
Female
复选框（Checkboxes）
| Name | Telephone | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
单元格跨两列:
| First Name: | Bill Gates |
|---|---|
| Telephone: | 555 77 854 |
| 555 77 855 |
浏览器显示效果如下:
I have a bike
I have a car
上传文件
没有单元格间距:
| First | Row |
| Second | Row |
单元格间距="0":
| First | Row |
| Second | Row |
单元格间距="10":
| First | Row |
| Second | Row |
下拉列表/滚动列表
First name:
Last name:
文本域（Textarea）
Password:
Label标签
label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
“for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。
Male
Female
带边框的表单（Fieldset）
定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。I have a bike
I have a car
按钮
普通按钮
提交按钮
VolvoSaabFiatAudi
重置按钮
HTML5的button标签
在button元素内部可以放置内容，比如文本或图像。这是该元素与使用input元素创建按钮之间的不同之处。请始终为button元素规定type属性。
相关推荐：
HTML基础之选择器
几个HTML基础知识点
在前端中的html基础知识
以上就是HTML入门基础的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546182.html
微信扫一扫 
支付宝扫一扫 
