目录
HTML基础
html语言基本格式：
常用的HTML标签
（一）段落、行内和换行标签
（二）文本样式标签
在HTML中，使用<font>标签控制网页中文本的样式，如字体、字号和颜色
<font>标签的基本语法格式：<font 属性="属性值">文本内容</font>
颜色可以用英文单词来设置，也可以用十六进制来表示，比如green就可以用#00ff00表示，purple可以用#ff00ff表示
常见颜色：
综合练习：
html部分：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo01</title>
<link rel="stylesheet" href="ds.css" type="text/css" />
</head>
<body>
<div class="dis">
<div class="ss">
<p class="dsjk">相思</p>
<p class="hj">唐.王维</p>
<p class="nk">
<span>红豆生南国<br />春来发几枝<br />劝君多采撷<br />此物最相思</span>
</p>
</div>
<div class="ss">
<p class="dsjk">黄鹤楼送孟浩然之广陵李白</p>
<p class="hj">李白.唐</p>
<p class="nk">
<span>故人西辞黄鹤楼<br />烟花三月下扬州<br />孤帆远影碧空尽<br />唯见长江天际流</span>
</p>
</div>
<div class="ss">
<p class="dsjk">送元二使安西</p>
<p class="hj">王维.唐</p>
<p class="nk">
<span>渭城朝雨渴轻尘<br />客舍青青柳色新<br />劝君更尽—杯酒<br />西出阳关无故人</span>
</p>
</div>
<div class="ss">
<p class="dsjk">春日</p>
<p class="hj">朱熹.宋</p>
<p class="nk">
<span>胜日寻芳泗水滨<br />无边光景—时新<br />等闲识得东风面<br />万紫千红总是春</span>
</p>
</div>
<p class="dkds">xxx学校 张三</p>
<p class="dkds">xxx学校 张三</p>
<p class="dkds">xxx学校 张三</p>
</div>
</body>
</html>
css部分：
具体代码：
p{
text-align: center;
}
.dsjk{
font-family: 'Times New Roman', Times, serif;
font-size: 30px;
font-weight: 800;
}
.hj{
font-size: 18px;
font-weight: 400;
color: #0000ff;
}
.nk{
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
font-weight:300;
letter-spacing: 7px;
}
.ss{
width: 25%;
float: left;
/* margin: 0px 40px; */
}
.dis{
width: 100%;
height:500px;
background: url(hj.jpg) no-repeat;
background-size: 100% 100%;
}
.dkds{
float: left;
font-size: 40px;
font-weight: 800;
color:rgba(01, 01,01,0.2);
transform: rotate(-25deg);
}
最后效果图：
（三）表格标签
在HTML网页中创建表格的基本语法格式<table> <tr> <td>单元格内的文字</td> </tr> </table>
<table>、<tr>和<td>是创建表格的基本标签，缺一不可。<table>用于定义一个表格，<tr>用于定义表格中的行(table row)，必须嵌套在<table>标签中，<td>用于定义表格中的单元格（table data），也可称为表格中的列，必须嵌套在<tr>标签中。
具体案例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
margin: auto;
border: 3px solid #739096;
width: 400px;
height: 180px;
}
tr{
border: 1px solid;
}
td{
text-align: center;
margin: 0px;
border: 1px solid;
}
.sfs{
font-size: 20px;
font-weight: 600;
}
table{
background-color:#d2f8ff;
}
.sfs:hover{
background-color:#566a21;
color: #ffffff;
}
td:hover{
background-color:#55aa7f;
color: #ffffff;
transform: scale(1.1,1.1);
transition: all 0.5s;
}
</style>
</head>
<body>
<table>
<tr class="sfs">
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>张三丰</td>
<td>95</td>
<td>80</td>
<td>98</td>
</tr>
<tr>
<td>张九龄</td>
<td>96</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>赵星名</td>
<td>86</td>
<td>69</td>
<td>88</td>
</tr>
</table>
</body>
</html>
效果图：
（四）表单标签
表单域<form>
<form>标签基本语法：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
action属性：用于指定表单提交的地址。
method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。
2、表单控件<input>
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用<input>控件可以在表单中定义这些元素。
<intput>控件基本语法格式：<input type="控件类型" />
type属性为<input>控件最基本的属性，用来指定不同的控件类型。
<input>控件还可以定义很多其他属性，其中，比较常用的有id、name、value、size，它们分别用来指定<input>控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。
具体案例：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo05</title>
</head>
<body>
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>
<td>
<!--1. 文本输入框控件-->
<input type="text" id="username" name="username" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<!--2. 密码输入框控件-->
<input type="password" id="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input type="checkbox" name="interest" value="film"/> 看电影
<input type="checkbox" name="interest" value="code"/> 敲代码
<input type="checkbox" name="interest" value="game"/> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</body>
</html>
效果图：
（五）多行文本标签
HTML提供了<textarea></textarea>标签，通过此标签可以创建多行文本框。
<textarea></textarea>标签基本语法格式
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
（六）列表标签
1、无序列表
- 无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。
- 定义无序列表的基本语法格式
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul> <li>Web前端开发</li>
<!-- 指定type属性值 , disc为默认值-->
<li type="disc">Java高级程序设计</li>
<li type="square">Python面向对象</li>
<li type="circle">Spring Boot框架</li>
效果：
2、有序列表
有序列表是一种强调排列顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
定义有序列表的基本语法格式
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
效果：
3、定义列表
定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。
定义列表的基本语法格式
<dl>
<dt>名词1</dt>
<dd>dd是名词1的描述信息1</dd>
<dd>dd是名词1的描述信息2</dd>
<dt>名词2</dt>
<dd>dd是名词2的描述信息1</dd>
<dd>dd是名词2的描述信息2</dd>
</dl>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo09</title>
</head>
<body>
<dl>
<dt>红色</dt>
<dd>光谱的三原色和心理四色之一</dd>
<dd>代表着吉祥、喜庆、火热、幸福、豪放、
斗志、革命、轰轰烈烈、激情澎湃等</dd>
<dt>绿色</dt>
<dd>自然界中常见的颜色</dd>
<dd>绿色有无公害，健康的意思</dd>
<dd>绿色代表着生命，象征着希望</dd>
</dl>
</body>
</html>
效果：
（七）超链接标签
超链接只需用<a></a>标签环绕需要被链接的对象即可。
使用<a></a>标签创建超链接的基本语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">
文本或图像
</a>
<a>标签是一个行内标签，用于定义超链接，href和target是<a>标签的常用属性
| 属性 | 含义 |
| href | href属性用于指定链接指向的页面的URL，当在<a></a>标签中使用href属性时，该标签就具有了超链接的功能。 |
| target | target属性用于指定页面的打开方式，其值有_self、_blank、_parent和_top（_self和_blank较为常用）。其中，_self为默认值，意为在原窗口打开，_blank为在新窗口打开，_parent是在父框架集中打开被链接文档，_top是在整个窗口中打开被链接文档。 |
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo10</title>
</head>
<body>
在新窗口打开：
<a href="http://www.lzy.edu.cn/" target="_blank">泸州职业技术学院</a><br />
在原窗口打开：
<a href="http://www.chinaskills-jsw.org/" target="_self">全国职业院校技能大赛</a>
</body>
</html>
效果：
（八）图像标签
要想在HTML网页中显示图像就需要使用图像标签<img>
<img>标签基本语法格式：<img src="图像URL" />
案例：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexg</title>
</head>
<body>
本地图片：
<img src="../img/img01a.jpg" width="256px" height="140px" border="1px"/><br />
网络图片：
<img src="https://img1.baidu.com/it/u=2231820758,601427063&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500"width="256px" height="140px" border="1px"/><br />
</body>
</html>
效果图：
