什么是html?
html是一种超文本标志性语言,html不区分大小写。
html重要的标签
- 常用文本标签
<!--
标签可以嵌套,但是不能你中有我,我中有你
常用的 文本标签
1 标题标签:是通过<h1>-<h6> 标签来定义的.数字越小,表示字体越大,级别越高
2 超链接 <a href="http://www.runoob.com"> 描述 </a> 链接的地址在 href 属性中指定
3 段落标签 <p >段落内容</p>
4 hr标签 显示一条水平现 <hr /> 注意 :字结束标签后面的斜杠可以不写 <hr >
4.1 hr标签的属性 color width(宽度) size(高度) [align(对其方式)left right center]
5 b标签 字体加粗 <b></b>
6 i标签 字体斜体 <i></i>
7 font标签 属性 :color size face(字体样式)
8 center标签 让文本居中
标签是可以嵌套的 同一标签的不同属性用空格隔开就可以-->
- 图片标签
<!--
常用的图片标签 展示一张图片
<img src="image/Capture001.png"/>
1. 属性src指定图片的位置
可以是相对位置 所谓相对路径就是相对于资源的路径 ./表示当前目录 ../表示父目录 也可以是绝对路径
2. 属性 alt 指定图片的描述 如果图片加载失败了 就显示alt属性指定的描述内容
3. 属性 宽 :width 高 :height 单位px px :像素
-->
- 表格标签
<!--
表格常用标签 及其属性
1 html的表格没有列的概念 只有行和单元格的概念
2 标签 <table></table> 行标签 <tr></tr> 单元格标签<td></td> 表头标签<th></th> 表的标题<caption></caption>
3 table的属性 3.1 border(规定单元格之间是否有边框) 3.3 cellspacing[属性值 1,0] 规定单元格之间的距离
3.2 width[属性值 可以是数值 单位像素 也可以是百分数 表示占body的百分之多少]
3.3 表格的背景色 【bgcolor】 3.4 表格对齐方式 【align】
4 行标签tr 的属性 4.1 bgcolor 背景色 align 行的对其方式
5 单元格标签td 的属性 5.1 bgcolor 背景色 align 单元格的对齐方式 colspan 合并列 rowspan 合并行
-->
-超链接标签
<!--
超链接标签 <a ></a>
属性 href :指向的访问资源的URL
target 指定打开资源的方式 [_blank 在空白页面打开 ] [_self 默认值 在当前页面打开 ]
-->
- 列表标签
<!--
有序列表 ol li
无序列表 ul li ul标签的属性 【type 三种 disc square circle 】三种不同的标志符号
-->
下周要做的事情
<ol>
<li>等待大数据比赛结果,完善博客</li>
<li>把前端看完</li>
<li>去进行人工智能</li>
</ol>
下周要做的事情
<ul type="square">
<li>等待大数据比赛结果,完善博客</li>
<li>把前端看完</li>
<li>去进行人工智能</li>
</ul>
- 表格标签
<!--
表格常用标签 及其属性
1 html的表格没有列的概念 只有行和单元格的概念
2 标签 <table></table> 行标签 <tr></tr> 单元格标签<td></td> 表头标签<th></th> 表的标题<caption></caption>
3 table的属性 3.1 border(规定单元格之间是否有边框) 3.3 cellspacing[属性值 1,0] 规定单元格之间的距离
3.2 width[属性值 可以是数值 单位像素 也可以是百分数 表示占body的百分之多少]
3.3 表格的背景色 【bgcolor】 3.4 表格对齐方式 【align】
4 行标签tr 的属性 4.1 bgcolor 背景色 align 行的对其方式
5 单元格标签td 的属性 5.1 bgcolor 背景色 align 单元格的对齐方式 colspan 合并列 rowspan 合并行
-->
- 表单
<!--表单
*概念:用于采集用户输入的数据,用于和服务器之间的交互
*form:用于定义表单。可以定义一个范围,范围代表采集用户数据的范围,不在form标签里,就无法被采集提交
属性:*action:用户提交数据的URL action="#" 表示的是提交到当前界面
*method 数据提交的方式
*method分7类 最主要的两类
* get 1.表单的请求参数会在地址栏中显示
2. 请求参数大小有限制
3,不安全
* post
1.表单的请求参数不会在地址栏中显示,封装在请求体中
2. 请求参数的大小没有限制
3.安全
表单项的数据要想被提交,必须指定其name属性
表单项标签
* input
属性type的常见取值
1.text:文本输入框,默认值
1.1 属性 placeholder,指定文本输入框的提示信息,当输入框的内容发生变化时自动消失
2.password 密码输入框
3.radio:单选框
*注意
3.1 要想实现多个单选框实现单选的功能,则多个单选框的name属性值必须一样
3.2 一般给单选框一个value值,显示提交后单选框所显示的值
3.3 属性checked="checked" 当input类型是单选框或者复选框时,可以添加这个属性表示默认选中
4.checkbox:复选框
5.file 文件选择框
6.hidden 隐藏域
7.submit 提交按钮 用来提交表单
8.button 普通按钮
9.image 图片按钮,可以用来提交表单 如<input type="image" src="hello.jpg" height="45">
* textarea文本域
* select 下拉列表
子元素 option 表示选项
-->
- 注册界面综合案例
主要运用了表格标签和表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<table border="1" cellspacing="1" align="center" >
<form method="get" action="#">
<第一行>
<tr >
<td><label for="0">用户</label></td>
<td>
<input type="text" name="name" placeholder="请输入账号" id="0">
</td>
</tr>
<第二行>
<tr>
<td><label for="3">密码</label></td>
<td>
<input type="password" name="password" placeholder="请输入密码" id="3">
</td>
</tr>
<第三行>
<tr>
<td><label for="2">Email</label></td>
<td>
<input type="email" name="Eamil" placeholder="请输入邮箱号" id="2" />
</td>
</tr>
<第四行>
<tr >
<td>手机号码</td>
<td>
<input type="text" name="telephone" placeholder="请输入号码">
</td>
</tr>
<第五行>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</td>
</tr>
<第六行>
<tr>
<td>出生日期</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<第七行>
<tr >
<td >
<input type="submit" value="注册">
</td>
</tr>
</form>
</table>
</body>
</html>
综合案例效果图如下: