day01 HTML基础
html:超文本标签语言
超文本:超越了一般文本,描述文本的字体 颜色 图片
标签:标记
html书写规则:
文件的后缀名 .html(建议) 或者 .htm
标签必须用 <> 引起来 已经定义好的标签
属性
格式: key="value"
建议属性的值用引号引起来.
不区分大小写
注意:
最好将所有的内容放在一个标签中 <html></html>
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签的称之为空标签 <br/>
开始标签和结束标签之间的内容称之为标签体.
<!--注释内容--> html页面中的注释
标签必须正常嵌套,
标签最好关闭
文件标签:
html标签: 声明当前网页为html页面
子标签:
<head></head> head:用来存放当前页面的重要信息,一般不展示在html页面上
子标签 <title></title> 网页的标题
<meta charset="UTF-8">指定浏览器用什么编码打开此页面 <body></body>
body:
要展示的数据放在body中
标题标签:
<hn></hn>
n取值 :1~6 h1最大 h6最小, 自动换行 且留白 默认加粗
常用属性:
align:对齐方式 left:左 right:右 center:居中
格式:
<h2 align="center"></h2>
字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
<font></font>
常用属性:
face:字体
size:尺寸
color:颜色
颜色的取值:(RGB)
方式1: #xxxxxx x为16进制
方式2: 英文单词 red green black
段落标签:
<p></p> paragraph
其他标签:
<b></b> bold <strong></strong>加粗
<i></i> 斜体
<hr/> horizon 水平线
<br/> break 换行
//////////////////////////
案例1-步骤分析:
1.新建一个html页面
2.标题标签
3.添加一个水平线
4.4个段落
5.添加字体颜色 加粗 斜体
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>公司简介</title> </head> <body> <h3>公司简介</h3> <hr/> <p> <font color="red">“中关村黑马程序员训练营”</font>是由<b>传智播客</b>联合 <i><strong>中关村软件园、CSDN</strong></i>，并委托传智播客进行教学实施的软件开发高端培训机构， 致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。 </p> <p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、 压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。 百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险 </p> <p> 中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力， 并密切关注技术革新，不断引入先进的技术，研发更新技术课程， 确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念 </p> <p> 一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长， 致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。 </p> </body> </html>
图片标签:★
<img/>
常用属性:
★src:图片的路径
alt:替代文字
title:移上去显示的文字
width:宽
height:高
大小的写法:
1 像素:123px
2 百分比:20%
路径的写法:
相对路径:
./ 或者 什么都不写 当前目录
../ 上一级目录
绝对路径:
带协议的绝对路径:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="./img/logo2.png" title="hiema" alt="logol" height="55px"/> <img src="img/header.jpg" title="header" alt="header" height="55px"/> </body> </html>
列表标签:
<ol></ol> 有序 order list
<ul></ul> 无序 unorder list
常用的子标签
<li></li> 列表项
属性 type
超链接标记
<a></a>
常用属性:
href:跳转路径
target:在那里打开， 默认值:_self ， _blank(在空白页面打开)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h4>友情链接</h4> <ol type="1"> <li> <a href="www.zhong" target="_blank">中关村</a></li> <li> <a href="http://www.itheima.cn" target="_blank">黑马程序员</a></li> </ol> </body> </html>
表格标签★
<table></table>
常用的子标签
<tr></tr> table row
常用子标签:
<td>:列 table data cell 单元格
<th>:表头单元格 默认居中加粗
table常用属性:
border:边框 像素值
align:表格对齐方式
tr 的常用属性:
align:内容对齐
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并
步骤分析:
1.创建一个8行1列的表格
2.在第一行 放logo，嵌套一个1行3列的表格
3.第2行 放菜单
4.第3行 放图片
5.第4行 热门商品，嵌套一个2行7列的表格
6.第5行 放广告图片
7.第6行 最新商品，嵌套一个2行7列的表格
8.第7行 放一个图片
9.第8行 两个段落
表单标签★★★
<form></form>
表单常用属性:
action:信息提交的路径 默认是当前页面
method:表单提交的方式，只需要掌握两种，get(默认)和post
常见的子标签
<input/>
<select> </select>:下拉框
<textarea></textarea>:文本域
input标签
常用的属性:
type:
text:文本框 默认
password:密码框
radio:单选框
checkbox:多选框 这两个不是通过name提交，通过value提交，name可以将几个单选框(复选框)设置为一组
file:文件框
submit:提交
reset:重置
button:普通按钮
hidden:隐藏域 在页面上显示 提交的时候可以提交过去
image:图片提交 替代submit
name:
可以将几个单选框(复选框)设置为一组
要想将信息保存到服务器上必须有name属性
readonly:
readonly="readonly" 只读
disabled:
disabled="disabled" 禁用
select :下拉框，要想将信息保存到服务器上必须有name属性
格式:
<select name="pro">
<option>黑龙江</option>
</select>
textarea:文本域，要想将信息保存到服务器上必须有name属性
常用的属性:
cols:列
rows:行
提交到服务器的内容的格式:
key=value&
对于文本框 密码框 文本域 手写的内容传递过去了
对于单选框和多选框来说,却没有把值传递过去，要想把值传递过去 必须设置value属性
默认值:
文本框 密码框:只需要添加value属性
单选框 多选框:添加 checked="checked"
下拉选:添加selected="selected"
文本域:标签体
当我们提交的时候 发现地址栏变化
?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商城</title> <!-- 作者：offline 时间：2017-08-06 描述：1.常见一个8行1列的表格 2. 3.第2行 放菜单 4.第3行 放图片 5.第4行 热门商品，嵌套一个2行7列的表格 6.第5行 放广告图片 7.第6行 最新商品，嵌套一个2行7列的表格 8.第7行 放一个图片 9.第8行 两个段落 --> </head> <body> <table width="94%" align="center"> <!-- 在第一行 放logo，嵌套一个1行3列的表格 --> <tr> <td> <table width="100%"> <tr> <td><img src="img/logo2.png" title="heima" /> </td> <td><img src="img/header.jpg" /> </td> <td height="100%" align="center"> <a href="#"> login </a> <a href="#"> login</a> </td> </tr> </table> </td> </tr> <!-- 放菜单 --> <tr bgcolor="black" height="50px"> <td> <a href="#"> <font color="white" size="4">首页</font> </a> <a href="#"> <font color="white" size="4">手机数码</font> </a> <a href="#"> <font color="white" size="4">图书音像</font> </a> <a href="#"> <font color="white" size="4">超值量贩</font> </a> <a href="#"> <font color="white" size="4">全球精选</font> </a> </td> </tr> <tr> <td align="center" background="img/regist_bg.jpg"> <form action="#127.0.0.1" method="get"> <table bgcolor="white"> <tr> <td>用户名：</td> <td colspan="2"> <input type="text" name="username" /> </td> </tr> <tr> <td>密码：</td> <td colspan="2"> <input type="password" name="password" /> </td> </tr> <tr> <td>确认密码：</td> <td colspan="2"> <input type="password" /> </td> </tr> <tr> <td>性别：</td> <td colspan="2"> <input type="radio" name="gender" value="man" /> man <input type="radio" name="gender" value="women" />women </tr> <tr> <td>爱好： </td> <td colspan="2"> <input type="checkbox" name="favor" value="runing" />跑步 <input type="checkbox" name="favor" value="swimming" />游泳 <input type="checkbox" name="favor" value="reading" />读书 </td> </tr> <tr> <td>籍贯：</td> <td> <select name="province"> <option>henan </option> <option>beijing </option> <option>guangdong </option> </select > <select name="city"> <option>shznegzhou </option> <option>haidian </option> <option>guangzhou </option> </select> </td> </tr> <tr> <td>自我介绍</td> <td colspan="2"> <textarea name="discribe"> 自我介绍 </textarea> </td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" /> <input type="reset" /> </td> </tr> </table> </form> </td> </tr> <!-- 两个段落 --> <tr> <td> <p align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">友情链接</a> <a href="#">告诉我们</a> </p> <p align="center"> Copyright © 2005-2016 ZZ商城 版权所有 </p> </td> </tr> </table> </body> </html>
案例6-后台管理页面(了解)
需求:
开发一个后台管理页面,通过frameset实现
技术分析:
frameset:框架集
frame:具体实现
frameset:框架集(了解)
常用属性:
cols:垂直切割
例如: cols="40%,60%"
rows:水平切割
常见的子标签:
frame
注意:
最好和body不要共存
frame:具体实现
常用属性:
src:展示的页面的url
name 主页面需要有name属性，其他页面的target绑定此name
转义字符:
三部分构成 &实体;
掌握的转义字符:
> > //great then
< <
& &
空格
