本文介绍了HTML的基本概念，包括它作为标记语言的性质，网页元素的组成以及常见的HTML标签，如标题、段落、图像和链接等。此外，还涵盖了HTML标签的嵌套和并列关系，路径的使用，锚点定位，列表，表单以及表格的创建方法。通过对这些基础知识的掌握，读者可以初步构建和理解网页结构。
一.HTML初识
- html不是一种编程语言而是一种标记语言。（标记语言是一套标记标签）
- 网页由网页元素组成，这些元素是利用html标签描述出来的，然后通过浏览器解析最后显示出来。
二.HTML骨架标签
<html>
<head>
<title></title>
</head>
<body></body>
</html>
总结
- HTML标签：页面中最大的标签，我们称之为根标签。
- head标签：文档的头部，head标签中必须设置title标签。
- title标签：文档的标题。
- body标签：文档的主体，元素包含文档的所有内容。
三.HTML分类
-
常规元素(双标签)
<标签名> 内容 </标签名> -
空元素（单标签）
<标签名/>
四.HTML标签的关系
- 嵌套关系 （父子)
<head>
<title></title>
</head>
- 并列关系（兄弟）
<head></head>
<body></body>
五.常用的标签
- 排版标签
1.1 标题标签（大小依次递减）
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
1.2 段落标签
<p>文本内容</p>
1.3水平线标签
<hr/>
1.4换行标签
</br>
1.5 div和span
两者都是用来布局的 一行只能放一个div，而一行可放多个span。
<div>这是头部</div>
<span>今日价格</span>
- 文本格式化标签
<strong></strong> 字体加粗强调
<em></em> 文字斜体显示
<del></del> 加删除线
<ins></ins> 加下划线
- 标签属性
<标签名 属性1="属性值1"属性2="属性值2">内容</>
- 图像标签
<img src="图像URL"/>
- 链接标签
外部链接需要加http://www.baidu.com
<a href="跳转目标" traget="目标窗口弹出方式"> 文本或图像</a>
- 注释标签
快捷键：ctrl+ / ctrl+shift+/
<!--注释语句-->
六.路径
- 相对路径
同一级路径：只需要输入图像名称即可 。
下一级路径："/" 图像文件位于HTML同级文件夹下。
上一级路径："…/" 在文件名前面加…/ 若为上两级 则为"…/ …/" - 绝对路径 （了解即可）
当所有网页使用同一个文件时
七.锚点定位
步骤：
（1）使用相应的id名 标注跳转目标的位置。（下面的）
（2）使用<a href = "#id名">链接文本</a> 创建链接文本 （上面的标题）
八.列表标签
- 无序列表 ul
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
2.有序列表 ol
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
3.自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
九.表单标签
1.input 控件
<input type="属性值" value="你好"></input>
type：用来指定不同的控件类型
value：表单里面默认显示文本
name：表单名字，用于区别不同表单
checked：默认选中
2. textarea控件 （文本域）
<textarea>文本内容</textarea>
3.select下拉列表
<selsct>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
十.创建表格
<table>
<tr>
<td></td>
</tr>
</table>
1.table 用于定义一个表格
2.tr 表格中的行
3. td 表格中的单元格
十一.合并单元格
1.两种方式
跨行合并：rowspan =“合并单元格个数”
跨列合并： colspan = “合并单元格个数”
2. 合并顺序
先上后下 先左后右
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
