DAY-1
一,入门案例
1.HTML概述
HTML:超文本标记语言
超文本:相对于普通文本更加强大,能变换更多形式
标记语言:通过一组标签对内容进行描述<关键字>
(1)<h> <\h>标题标签,字号123456写在h后面
(2)<br/>简单标签 换行(没有内容修饰的标题,仅在后面换行)
(3)<p> <\p>段落标签 前后都有换行
(4)<b> <\b>字体加粗
(5)<i> <\i>字体倾斜
DAY-2
2.HIML语法规范
常用快捷键
(1)Ctrl+D删除光标所在一行
(2)Ctrl+Shift+R复制当前行到下一行
(3)Ctrl+Enter将光标移动到下一行
(4)Ctrl+Shift+Enter将光标定位到上一行
(5)Ctrl+Shift+/注释当前行
(6)Ctrl+R运行或者刷新当前网页
3.<!DOCTYPE html>这是一个文档声明
<html>根标签html
<head>
<meta charset-“utf-8"/>网站的配置信息
meta标签:网站配置信息
charset-“utf-8"指定浏览器打开页面的编码方式
utf-8浏览器用什么打开方式
<title></title>指定网站标题(在标签页显示标题)
</head>
<body>
<h123456> 标题(123456) <\h123456>字体的大小
<hr />水平分割线
<p>段落 <\p>
font标签
<font>需要改变属性的文字</font>
<font color="red">改变文字颜色</font>
<font size=“1234567”>改变文字大小</font>
例<size=“1”>
<font face“宋体”>改变字体</font>
<strong>字体加粗,系统读音时语气加重</strong>
<em>字体倾斜,系统更易接受</em>
img标签:在页面中显示一张图片
<img src="../img/图片名称"/>
属性值 src:指定图片路径(路径最好不要用中文)
width:指定图片宽度
height:指定图片高度
<img src="../img/图片名称" width=“***px”height=“***px"/>px:单位
alt:文件加载失败时的提示信息
</body>
</html>
html文件主要包含头部分和体部分
头部分为页面信息
尾部分为页面内容
通过标签对内容进行描述,开始标签和结束标签组成
标签不区分大小写,建议小写
DAY-3
4·路径问题·
相对路径:
·/当前路径
··/上一级路径
··/··/上上级路径
5·友情链接
<ul>无序列表</ul><li>列表项 <li>
<type=”circle,disc,square">属性小圆圈,小方块,默认小黑点
<ol>有序列表</ol>
<type=“标序类型”start="序号多少开始“>
超链接标签(a标签)
<a href=“网址”target=“—self”在当前窗口打开
”—blank“在新起窗口打开页面>
DAY-4
6.表格标签table(显示表格)
<tr>行标签</tr>
<td>列标签</td>
<table border="*px"width="*px"hight="*px">
<tr>
<td>
</td>
</tr>
border:指定边框
width:宽度
hight:高度
7.表格的合成
colspan:跨列
rowspan:跨行
<td colspan="*">
将要合并的下一列删除
8.表格的嵌套
在td可以嵌套一个表格
9.步骤
首先创建一个几行几列的表格
第一部分是logo
第二部分导航栏部分(需要超链接)
第三部分轮播图(直接放置图片)
第四部分嵌套几行几列的表格
第五部分图片
第六部分同四
第七部分图片
第八部分超链接
(黑马的网站)
DAY-10
10.基本表格输入项
<body>
表单标签
<form>提交的地址action
提交的方式method
get方式(默认)会将参数拼接在后面,有大小限制,4k
post方式会将参数封装在请求中,没有限制
隐藏项(存在页面上ID信息)
input标签:
type:指定输入项的类型
name:在表单提交的时候,当作参数的名称
id:给输入项取一个名字易找到便操作
<input type"hidden"value="随便”/>
用户名,邮箱,手机号码<input type="text"/><br/>
密码<input type="password"/><br/>
确认密码<input type="password"/><br/>
相片<input type="file"/><br/>
性别<input type="radio name="sex"/>男
<input type="radio name="sex"/>女
爱好<input type"checkbox/>....
<input type"checkbox/>....
以此类推
大框<textarea>
cols列
rows行
</textarea>
籍贯<selsct>
<option>--请选择--</optian>
以此类推
</select>
出生日期<input type="date"/></br>
提交<input type"submit"value="提交“/>
</form>
DAY-11
11.input标签的扩展
type:指定输入项的类型
text:文本
password:密码框
radio:单选按钮
checkbox:复选框
file:上传文本
submit:提交按钮
button:普通按钮
reset:重置按钮
hidden:隐藏域
date:日期
tel:手机号
number:只允许输入数字
placeholder:指定默认提示信息
12.网站后台
如果使用frameset标签需要将body标签去掉
cols:按列划分
rows:按行划分