HTML介绍
HTML(Hyper Text Markup Language):超文本标记语言。以.html结尾的文件。 HTML标签规则：
1.单标签 2.双标签 HTML基本结构
<!DOCTYPE html><!--声明是一个html文档-->
<!-- html基本结构-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个html程序</title>
</head>
<body>
hello world!!!!!!!
</body>
</html>
HTML标题标签
hn（1——6）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>HTML加粗标签
<b>我的第一个首页</b>
我是一个对比
<strong>加粗</strong>HTML斜体标签
<i>斜体</i>
<em>斜体2</em>
HTML段落标签
<p>我是一个段落</p>
<p>我是另一个段落</p>HTML分割标签
<hr width="50%" align="left"/>
<hr width="200px" align="right">
<!--
width:宽度
align:水平方向的位置
-->HTML图片标签
<!--
title:鼠标悬浮上去的提示文字
alt:图片加载不出来时的替代文字
-->
<!--显示当前项目中的图片-->
<img src="../img/a.png" title="杨琪的练习" alt="找不到杨琪的练习"/>
<!--显示服务器上的图片-->
<img height="20px"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcssl.duitang.com%2Fuploads%2Fitem%2F202003%2F20%2F20200320212335_ojeyq.jpg&refer=
http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?
sec=1684993320&t=b2784bf116188a70aee4c66b257d4a90"
title="网页上的花"/>
HTML列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--无序列表-->
<!--
type:默认disc
circle:空心圆
练习
1.实现页面显示当前项目中的图片
2.实现页面显示百度上的图片
3.实现有序列表，根据年龄显示员工信息
4.实现无序列表，显示学科信息
5.实现自定义列表，显示课表
HTML表格标签
square:方形
-->
<ul type="square">
<li>杨</li>
<li>杜</li>
<li>王</li>
<li>张</li>
</ul>
<!--有序列表-->
<!--type:1默认
A、a、I、i
start:从第几个开始
-->
<ol type="A" start="5">
<li>java基础</li>
<li>mysql</li>
<li>javaweb</li>
<li>servlet</li>
<li>ssm</li>
<li>springboot</li>
</ol>
<!--自定义列表-->
<dl>
<dt>服装</dt>
<dd><a href="https://www.jd.com/" target="_blank">T恤</a></dd>
<dd>衬衫</dd>
<dd>牛仔裤</dd>
<dt>鞋子</dt>
<dd>运动鞋</dd>
<dd>拖鞋</dd>
</dl>
</body>
</html>HTML表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!--
border:边框
align：水平方向的位置 left、center、right
valign：垂直方向的位置 top、middle、bottopm
rowspan:跨行
colspan:跨列
-->
<table border="1px" width="500px" height="200px" align="center">
<caption>表格的标题</caption>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr align="center">
<td colspan="3">2-1</td>
<!-- <td>2-2</td>
<td>2-3</td> -->
</tr>
<tr align="center">
<td>3-1</td>
<td>3-2</td>
<td align="right" valign="bottom">3-3</td>
</tr>
</table>
</body>
</htmlHTML文本标签
<span><font color="red">用户名或密码 &g错误</font>
</span>
<span><font color="red">用户名或密码错误</font></span>HTML块标签
<div style="color: red; background-color: aqua; width: 200px; height:
200px;">111</div>
<div>222</div>HTML5常用的语义标签
<!--表示一个缩写-->
<abbr title="Hyper Text Markup Language">HTML</abbr>
<!--表事一个地址-->
<address>科技路36号</address>
<!--表事引用-->
<span>培根说：<q>读史使人明智，读诗使人巧慧，数学使人精细，物理学使人深刻，伦理学使人
高尚，逻辑修辞使人善辩。</q></span>
<br>
床前明月光
疑是地上霜
<!--表示纯文本-->
<pre>
举头望明月
低头思故乡
</pre>
<!--表示定义作品的标题-->
<cite>《富春山居图》</cite>
HTML表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<form action="poem.html" method="get">
<!--输入框-->
学生姓名：<input type="text" placeholder="请输入你的姓名" name="stuName"
maxlength="6"/><br>
<!--密码框-->
密码：<input type="password" name="password" placeholder="密码格式为字母
与数字" /><br>
<!--单选框-->
性别：<input type="radio" value="man" checked="checked" name="sex"/>男
<input type="radio" value="woman" name="sex" />女<br>
<!--复选框-->
爱好：
<input type="checkbox" name="hobby" value="paino"/>钢琴
<input type="checkbox" name="hobby" value="voiln"/>小提琴
<input type="checkbox" name="hobby" value="zither"
checked="checked"/>古筝
<input type="checkbox" name="hobby" value="erhu"/>二胡<br>
<!--日期框-->
生日：<input type="date" /><br>
<!-- 文件框-->
上传毕业证书：<input type="file" /><br>
选择喜欢的颜色：<input type="color" /><br>
<!--多行文本域-->
请同意以下协议：<input type="checkbox" />
<textarea cols="80" rows="6" readonly="readonly">
1.不准迟到
2.不准上课吃饭
3.不准上课睡觉
1.不准迟到
2.不准上课吃饭
3.不准上课睡觉
1.不准迟到
2.不准上课吃饭
3.不准上课睡觉
</textarea><br>
<!--下拉框-->
学历：
<select>
<option>--请选择--</option>
<option>小学</option>
<option>初中</option>
<option selected="selected">高中</option>
<option>本科</option>
<option>硕士</option>
</select><br>
<!--提交-->
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<!--按钮-->
<!-- button可以自动提交-->
<button>注册2</button>
<input type="button" value="注册3" />
</form>
</body>
</html>
HTML标签分类
1.块级标签：独占一行，并且可以设置高和宽 div、p、hn
2.行内块标签：不独占一行，但是可以设置高和宽 img
3.行内标签：不独占一行，也不可以设置高和宽 input span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签分类</title>
</head>
<body>
<!--块级标签-->
<div style="width: 100px;height: 100px;background-color: pink;display:
inline;">111</div>
<div style="width: 100px;height: 100px;background-color: green;display:
inline;">222</div>
<!--行内块标签-->
<img width="200px" src="../img/a.png" />
<img width="20px" src="../img/a.png" />
<!--行内标签-->
<span style="width: 100px;height: 100px;background-color:
aqua;">111</span>
<span style="display: block; width: 100px;height: 100px;backgroundcolor: blue;">222</span>
<span style="display: block; width: 100px;height: 100px;backgroundcolor: yellow;">333</span>
</body>
</html
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
