目录
概述
HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是组成Html页面的基本元素,因此对标签特性的理解在HTML的学习过程中比较重要
1、HTML
<!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
</head>
<body>
内容
</body>
</html>
<html>
最外层的标签 ,表示网页内容的开始–</html>
<head>
网页的头部声明标签,不会显示在网页内容中–</head>
<body>
网页内容标签,包含网页中所有可见元素–</body>
常用标签
1、h1–h6 一般用来写标题
效果:换行、加粗
2、p标签 段落标签,呈现段落格式
3、strong标签与em标签;都是强调文本的作用
<!--加粗强调 -->
<strong>文本text</strong>
<br>
<!-- 斜体强调 -->
<em>文本text</em>
效果图:
4、单闭合标签(单个存在)
br
-------换行
img
-----显示图片
hr
-------水平分割线
5、列表标签
5.1无序列表
<!--unordered 无序列表-->
<h2>热门要闻</h2>
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
效果图:
5.2有序标签
<!--有序列表-->
<h2>新闻热搜</h2>
<ol>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ol>
效果图:
5.3、定义标签
<!--definition list 定义列表-->
<dl>
<!-- definition title 定义标题 -->
<dt>帮助中心</dt>
<!-- definition description 定义的描述-->
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
效果图
6、table标签
<table border="1" cellspacing="0">
<!-- 表格标题-->
<caption>商品清单</caption>
<!-- 行 -->
<tr>
<!-- 第一行 --> <!-- 表头 -->
<th>产品名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
</tr>
<tr>
<td>电视机</td>
<td>海尔</td>
<td>200</td>
<td>Sep-17</td>
</tr>
<tr>
<td>空调</td>
<td>美的</td>
<td>100</td>
<td>dec-01</td>
</tr>
</table>
效果图
属性一:border =“1”–表示外边框
属性二:cellspacing=“0”–表示单元格的间距
合并单元格
<!-- 横向合并:合并的列数 -->
<th colspan="2">数量和入库时间</th>
<!-- 纵向合并:合并行数 -->
<td rowspan="2">美的</td>
7、超链接
<a href="http://www.baidu.com" <!-- 属性1:链接 -->
title="点击一下,了解更多"<!-- 属性2:超链接提示消息 -->
target="_self"<!-- 属性3:默认链接在当前页面打开 -->
=“_blank”--<!-- 属性3:链接在新网页中打开 -->
>百度一下</a>
7.1超链接其他用法
页面内跳转
<!--跳回顶部-->
<p id="top <!--唯一ID-->></p>
<a href="#top<!--回到跳转ID处-->>标题(回到top)</a>
8、img标签
<img src=“1.jpg” ----属性1:图片路径(相同目录下直接命名表示)
=…\1.jpg --//相对路径,上一级目录
=…\1.jpg --//相对路径,上上级目录
=“E:\sublime\images\1.jpg”–//绝对路径
width=“100” height=“100” --属性2:图片大小 alt=“人物” --属性3:图片显示失败时,显示的提示文本
title=“看什么看” --属性3:图片标题>
显示任意网站任意图片–复制图片地址即可
9、form标签
<form action="http://www.baidu.com" method="get/post">
<p>
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</p>
<p>
<input type="password" placeholder="请输入密码">
</p>
</form>
效果图:
9.1单选框(radio)
<p>
男<input type="radio" name="sex" checked="checked">
<!-- checked表示默认选择 -->
女<input type="radio" name="sex">
</p>
效果图:
9.2多选框(checkbox)
<h2>购买课程</h2>
<p>
web前端<input type="checkbox" name="课程" checked="checked">
Python开发<input type="checkbox" name="课程">
Java编程<input type="checkbox" name="课程">
</p>
效果图
9.3下拉单选框
<h2>下拉框单选</h2>
<p>
<select>
<option>JavaScript</option>
<option selected="selected">HTML</option>
<option>css</option>
<option>vue</option>
</select>
</p>
效果图:
9.4、下拉多选框
<h2>下拉多选框</h2>
<p>
<select multiple="multiple">
<option>JavaScript</option>
<option selected="selected">HTML</option>
<option>css</option>
<option>vue</option>
</select>
</p>
效果图
9.5 文本框
<textarea rows="1" cols="1">输入个人描述</textarea>
效果图:
9.6、按键
<input type="submit" value="注册">
<input type="reset" value="重置">
效果图
还有一种不常用的按钮button
<button>按钮</button>
10、div标签
表示一片区域、一个容器;
<div>
<a href="http://">顶部栏目</a>
</div>
<div>
<a href="http://">购物车</a>
</div>
效果图