概念
最基础的网页开发语言
语法
标签学习
文件标签
概念：构成html最基础的标签
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--注释-->
<!--br 换行-->
白日依山尽，<br/>
<!--语法不是很严谨-->
黄河入海流。<br>
<!--标题标签h1~h6-->
黑马旅游网<br>
<!--自动换行-->
<h1>黑马旅游网 </h1>
<h2>黑马旅游网 </h2>
<h3>黑马旅游网 </h3>
<h4>黑马旅游网 </h4>
<h5>黑马旅游网 </h5>
<h6>黑马旅游网 </h6>
<!--段落标签,段落之间会空一行 paragraph-->
<p>
1.广州大学华软软件学院，电子系通信工程的一个小弟弟高某，到此一游🤭嘻嘻
</p>
<p>
2.广州大学华软软件学院，电子系通信工程的一个小弟弟高某，到此一游🤭嘻嘻
</p>
<!--hr 显示一条水平线,并且下一行-->
<!--width为长度-->
<hr color="purper" width="200" size="2" align="left"/>
<hr>
<!--加粗 b-->
<b>欲穷千里目</b>
<hr>
<!--斜体 i-->
<i>欲穷千里目</i>
<hr color="red">
<!--字体标签 font-->
<font color="aqua" size="10" face="宋体">欲穷千里目</font><br>
<font color="#34FF32" size="10" face="宋体">欲穷千里目</font>
<hr color="purper" width="60%" size="2" align="left"/>
<hr color="purper" width="300" size="2" align="left"/>
<center>欲穷千里目</center>
</body>
</html>
图片标签
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--有序列表ol-->
早上要干的事情：
<ol type="I" start="5">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>穿鞋</li>
<li>洗漱一下</li>
</ol>
<!--无序列表 ul-->
<!--默认type为disc-->
早上起床要干的事情：
<ul type="circle">
<li>睁眼</li>
<li>签到今日校园</li>
<li>下床</li>
<li>穿鞋</li>
</ul>
早上起床要干的事情：
<ul type="disc">
<li>睁眼</li>
<li>签到今日校园</li>
<li>下床</li>
<li>穿鞋</li>
</ul>
早上起床要干的事情：
<ul type="square">
<li>睁眼</li>
<li>签到今日校园</li>
<li>下床</li>
<li>穿鞋</li>
</ul>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--超链接 a-->
<a href="https://www.baidu.com">百度一下</a>
<br>
<!--超链接打开新的窗口 属性为target-->
<p><a target="_blank" href="https://www.baidu.com">点我显示新的窗口哦
</a>
</p>
<a target="_blank" href="./1_HelloWorld.html">点我显示新的窗口哦</a>
<br>
<a target="_blank" href="https://www.baidu.com">
<img src="image/jiangxuan_4.jpg">
</a>
</body>
</html>
div和span
div:每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签 内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!--span-->
<!--一堆文字，最后的文字显示在这一堆文字的后面-->
<span>"中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</span>
<span>高某到此一游</span>
<hr>
<!--div一堆文字，最后空行显示一行文字-->
<div>"中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</div>
<div>传智播客</div>
</body>
</html>
语义化标签
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<!--语义化标签提高可读性 header footer-->
<header>
<div id="header">
<title>黑马程序员简介</title>
</div>
</header>
</head>
<body>
<h1>
公司简介
</h1>
<hr color="ffff00" size="3">
<p>
<font color="red">"中关村黑马程序员训练营"</font>
是由<b>传智播客</b>
联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
</p>
<p>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确
保学员质量，并降低企业的用人风险。 中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，
不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
<hr color="ffff00" size="3">
<footer>
<div id="footer">
<center><font color="bfbfbf" size="2">广州大学华软软件学院<br>
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font></center>
</div>
</footer>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="10" cellspacing="8" bgcolor="aqua" align="center">
<!--定义表格行tr-->
<tr>
<!--表头的单元格th-->
<!--默认居中，以及加粗了-->
<!--<th>编号</th>-->
<!--<th>姓名</th>-->
<!--<th>成绩</th>-->
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<!--表格单元td-->
<td>1</td>
<td>小龙女</td>
<td>25</td>
</tr>
<tr>
<!--表格单元td-->
<td>2</td>
<td>杨过</td>
<td>522</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="10" cellspacing="8" bgcolor="aqua" align="center">
<!--定义表格行tr-->
<caption>学生信息</caption>
<thread>
<tr>
<!--表头的单元格th-->
<!--默认居中，以及加粗了-->
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
<!--<td>编号</td>-->
<!--<td>姓名</td>-->
<!--<td>成绩</td>-->
</tr>
</thread>
<tbody>
<tr>
<!--表格单元td-->
<td>1</td>
<td>小龙女</td>
<td>25</td>
</tr>
<tr>
<!--表格单元td-->
<td>2</td>
<td>杨过</td>
<td>522</td>
</tr>
</tbody>
<tfoot bgcolor="red">
<tr>
<td>2</td>
<td>尹志平</td>
<td>5200</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="10" cellspacing="8" bgcolor="aqua" align="center">
<!--定义表格行tr-->
<caption>学生信息</caption>
<!--在合并单元格的时候，不要使用类似语义标签<tbody>-->
<tr>
<!--表头的单元格th-->
<!--默认居中，以及加粗了-->
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
<!--<td rowspan="2">编号</td>-->
<!--<td>姓名</td>-->
<!--<td>成绩</td>-->
</tr>
<tr>
<!--表格单元td-->
<td>小龙女</td>
<td>25</td>
</tr>
<tr>
<!--表格单元td-->
<td>2</td>
<td colspan="2">杨过</td>
</tr>
</table>
</body>
</html>
表单标签
表单
* 表单：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性：
* action：指定提交数据的URL
* method:指定提交方式
* 分类：一共7种，2种比较常用
* get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
* post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。
* 表单项中的数据要想被提交：必须指定其name属性
标签
* 表单项标签：
* input：可以通过type属性值，改变元素展示的样式
* type属性：
* text：文本输入框，默认值
* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
* password：密码输入框
* radio:单选框
* 注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
* checkbox：复选框
* 注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
* file：文件选择框
* hidden：隐藏域，用于提交一些信息。
* 按钮：
* submit：提交按钮。可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径
* label：指定输入项的文字描述信息
* 注意：
* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
* select: 下拉列表
* 子元素：option，指定列表项
* textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<form action="#" method="post">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签_表单项标签</title>
<form action="#" method="get">
<label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username">
<br>
<label for="password">密码</label>：<input type="text" name="password" placeholder="请输入密码" id="password">
<br>
性别：<input type="radio" name="gender">男<input type="radio" name="gender">女
<br>
爱好：<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="Java" checked>Java
<input type="checkbox" name="hobby" value="game">游戏<br>
图片：<input type="file"><br>
隐藏域：<input type="hidden" name="id" name="id" value="aaa"><br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"><br>
生日：<input type="datetime-local" name="birthday"><br>
邮箱：<input type="text" name="email"><br>
年龄：<input type="text" name="old"><br>
省份：<select name="province">
<option>
--请选择--
</option>
<option value="1">
北京
</option>
<option value="2">
上海
</option>
<option value="3" selected>
陕西
</option>
</select><br>
自我描述：<textarea cols="30" rows="7"></textarea>
<br>
<input type="submit" value="登录">
<input type="button" value="一个按钮">
<br>
<input type="image" src="regbtn.jpg">
</form>
</head>
<body>
</body>
</html>
转载：https://blog.csdn.net/gplili/article/details/113793888
查看评论