目录
[一. HTML](#一. HTML)
[2. 安装前端开发工具](#2. 安装前端开发工具)
[3. HTML基础](#3. HTML基础)
[(1). 表单概述:](#(1). 表单概述:)
[(2). 常见用法](#(2). 常见用法)
1)文本表单文本表单)
2)常见表单常见表单)
3)下拉框下拉框)
4)文本域文本域)
5)按钮按钮)
[(3). 代码举例:](#(3). 代码举例:)
一. HTML
1.概述
HTML (HyperText Markup Language)是超文本标记语言, XML 是可扩展标记语言 ,用来存储数据. 二者都是以ML (Markup Language) 标记语言结尾
HTML 用来标记网页内容,里面提供了各自不同功能的标签, 例如在网页中显示超链接,图片.
通过使用标签来修饰网页内容,在浏览器中运行解释网页,最终运行出我们想要的效果.
2. 安装前端开发工具
(1)HBuilderX下载
(2)创建html项目和使用
内容解释
(1)文档声明:
声明html语言版本 例如html5,主要就是告诉浏览器如何解析 ,可以避免产生一些不可预期的行为
html4的文档声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5的文档声明:<!DOCTYPE html>
(2)头部
头部区域的标签为:<title>, <style>, <meta>, <link>, <script> 例如:
<title> 定义网页的标题
**<meta>**位于文档的头部, 提供有关页面的元信息(meta-information) 例如针对搜索引擎和更新频度的描述和关键词。<meta charset="utf-8" />
**<link rel="icon" href="ico地址">**标题处添加图标
运行代码 
3. HTML基础
1.标签
(1).标签定义:
用于描述网页
(2).标签结构:
-
<标签名> 标签内容 </标签名> 闭合标签(有标签内容)
-
<标签名/> 自闭合标签 (无标签内容)
(3).标签属性:
-
定义: 用来说明当前标签的显示或使用 例如:<body text="red">
-
格式: 属性名 = "属性值"
-
位置: <标签名 属性名 = "属性值" >xxx</标签名>
-
注意: 一个标签可以添加多个属性:<标签名 属性名 = "属性值" 属性名 = "属性值"... >
2.常用标签:
(1)标题标签 <h1>一级标题</h1>.....<h6>六级标题</h6>
(2)段落标签 <p></p>
(3)换行标签 <br/>
(4)分割线标签 <hr/>
(5)列表 标签 无序 列表<ul><li></li></ul> 有序列表<ol><li></li></ol>
(6)超链接 <a></a>
超链接: 通过链接访问其他网页资源
例如: <a href="http://www.baidu.com" target="_blank">百度</a>
<a href="地址" target ="窗口">内容</a>
target: 默认值为_self 当前窗口 _blank 新窗口
href (Hypertext Reference 超文本引用) : 规定链接指向的页面的URL(页面地址)
URL (Uniform Resource Locator) : 统一资源定位符
(7)图像标签 <img/>
例如 : <img src ="img/demo.jpg" width ="300" height ="150" border= " 1 "/>
src: 图像的路径
width / height: 图像的宽度 / 高度
border: 图像边框的粗度
px: 像素单位
3.特殊符号:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="yellow"><!-- 设置背景颜色 -->
<b>我的<b/>第一<br/>张网页
<!-- <font color="red" size ="7">百度<font/> -->
<font color="red" >百度<font/><!-- 设置字体颜色 -->
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>.....
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
</p>
<p>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
</p>
<p>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落
</p>
<!-- 换行 添加在谁后面就从哪里换行 -->
换行<br>这是一个段落,这是事实<br>上是一段落
<!--列表 分为<ul></ul> 无序列表 和 <ol></ol有序列表
-->
<ul>
<li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li>
<li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li>
<li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li>
</ul>
<ol type="I">
<li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li>
<li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li>
<li>这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落</li>
</ol>
<!--图像-->
<img src ="img/baidu.ico" />
<img src ="img/baidu.ico" width="300" height="100" boder="2"/>
<!-- 超链接 -->
<!-- 在当前窗口打开 -->
<a href="https://www.bilibili.com/" target="_self" >哔哩哔哩</a>
<!-- 在新窗口打开 -->
<a href="https://www.bilibili.com/" target="_blank" >哔哩哔哩</a>
<!-- 特殊符号 -->
<!-- <小于号 >大于号 -->
<b>---->
<hr/>分割线
<!-- 空格 -->
aaaaa bbbbbbb
<!-- 注册商标 ®-->
®
<!-- 版权 © -->
©
</body>
</html>页面展示:
4.表格(table)
(1)基本标签:
table标签：表格标签
tr标签：表格中的行
th标签: 表格的表头
td标签：表格单元格
(2)基本结构:
<table>定义表格
<tr>定义表行,一个tr就是一行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td> 当前行的列
</tr>
</table>
(3)表格属性:
width 宽度 可以设置 表格 单元格...
height 高度 可以设置表格 单元格...
cellspacing 单元格之间的距离
cellpadding 内容到单元格边框的距离
align 对齐方式
valign 内容位置
cospan 跨列合并单元格
rowspan 跨行合并单元格
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表格 -->
<table border="1" width="800" height="400" cellspacing="10" >
<!-- border边框 width宽度 height高度 cellspacing单元格之间的距离 -->
<tr height="60" align="center">
<!-- align(对齐方式): center水平居中对齐 right右边对齐 left左边对齐-->
<td>项目</td>
<td colspan="5">上课</td>
<td colspan="2">休息</td>
</tr>
<tr align="center" >
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr align="center">
<td rowspan="4">上午</td><!-- rowspan(跨行合并单元格)= "合并的个数" -->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" valign="bottom">休息</td><!-- valign(文本位置): bottom底部 top顶部 -->
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>化学</td>
<td>历史</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>语文</td>
<td>数学</td>
<td>历史</td>
<td>计算机</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>化学</td>
<td>历史</td>
<td>计算机</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>化学</td>
<td>历史</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>化学</td>
<td>历史</td>
<td>计算机</td>
</tr>
</table>
<table border="1" width="500" cellpadding="5"><!-- cellpadding 文本到单元格边框的距离 -->
<tr >
<td>姓名</td>
<td> </td><!--  空格 -->
<td>性别</td>
<td> </td>
<td rowspan="5" width="80" align="center">照片</td>
</tr>
<tr>
<td>出生年月</td>
<td> </td>
<td>籍贯</td>
<td> </td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>民族</td>
<td></td>
</tr>
<tr>
<td>将康状况</td>
<td></td>
<td>婚姻情况</td>
<td></td>
</tr>
<tr>
<td>联系电话</td>
<td></td>
<td>电子邮箱</td>
<td><www class="51jianli"></www></td>
</tr>
<tr>
<td>求职意向</td>
<td colspan="4"></td> <!-- colspan(跨列合并单元格)="合并的个数" -->
</tr>
<tr >
<td height="250">工作经历</td>
<td colspan="4"></td>
</tr>
<tr>
<td height="60">教育经历</td>
<td colspan="4"></td>
</tr>
<tr>
<td height="60">英语水平</td>
<td colspan="4"></td>
</tr>
<tr>
<td height="60">计算机水平</td>
<td colspan="4"></td>
</tr>
<tr>
<td height="60">自我评价</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>页面展示:
5.表单(form)
(1). 表单概述:
网页的表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器
(2). 常见用法
1)文本表单
2)常见表单
3)下拉框
4)文本域
5)按钮
(3). 代码举例:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="server.html" method="get">
<!-- action:指定提交后，由服务器上那个处理程序处理(java程序)
method: 指定向服务器提交的方法,一般为post或get方法, post方法比较安全-->
用户名:<input type="text" name="count" value="zhangsan" readonly="readonly"/><br/>
<!-- readonly="readonly"只读,提交表单时,可以提交数据
value就是输入的值 在输入框输入的内容,会赋给value属性-->
密码:<input type="text" name="password" placeholder="请输入密码" disabled="disabled"/><br />
<!-- placeholder="提示内容,当输入框输入内容后提示自动消失" -->
<!-- disabled="disabled"禁用 ,禁用之后不能提交数据 -->
性别:<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
<!--type="radio"单选框 ; name="gender"通过name属性分组,值相同时就是一组,会互斥 ,避免出现同时勾选上男和女-->
<br />
课程:<input type="checkbox" name="couse" value="java"/> java
<input type="checkbox" name="couse" value="c++"/> c++
<input type="checkbox" name="couse" value="python"/> python
<input type="checkbox" name="couse" value="高数"/> 高数
<!-- type="checkbox" 复选框(多选)-->
<br />
省份:<select name ="provice"><!-- 下拉选择框 -->
<option>请选择</option>
<option value="1001">北京</option>
<option value="1002" selected="selected">天津</option><!-- selected="selected"下拉选择框默认值 -->
<option value="1003">上海</option>
</select>
<br />
附件:<input type="file" name="file"/> <br/><!-- 选择文件 -->
备注:<textarea cols="30" rows="5" name="mark"></textarea><!-- 文本域 -->
<br />
<br />
<input type="submit"/><!--提交按钮 可以触发表单的提交 -->
<input type="reset"/><!-- 重置按钮 -->
<input type="button" value="保存"/>
</form>
</body>
</html>页面展示:
