HTML5
HTML5( HyperText Markup Language 5 )超文本标记语言,是构建Web内容的一种语言描述方式,在 2008 年正式发布.HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息
第一章 网页的构成
1.1 概念 b/s c/s
b/s 浏览器/服务器(重点)
- 优点：无需占用本地资源，维护方便。
- 不足：如果请求与响应数据量较大，需要占用大量的网络带宽。
c/s 客户端/服务器
- 优点：性能稳定，无需占用大量网络带宽。
- 不足：必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，占用本地资源，便携性差，维护成本高。
1.2 网站构成
- HTML(结构) :HTML是网页内容的载体可以包含文字、图片、视频等。
- CSS(表现):CSS样式是表现。网页的美化。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。
- JS(行为):JavaScript(jquery)是用来实现网页上的特效效果。
如：鼠标滑过弹出下拉菜单、轮播图 ,或鼠标滑过表格的背景颜色改变,还有购物网站中图片的轮换。
第二章HTML概述
2.1 HTML简介
- 用来描述网页的语言
- HTML超文本标记语言,超文本指的是可以包含图片,链接甚至音乐,视频,程序等
- 文件后缀为.html
2.2 HTML结构
<!DOCTYPE html>
<html>
<head>
<title>我是一个HTML页面</title>
</head>
<body>
<h1>标题</h1>
<div >主要内容</div>
</body>
</html><!DOCTYPE html>html5文件声明<html></html>为HTML页面中的根标签，所有的HTML网页中的标签都在<html></html>中。- 这里
<head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。 - 在
<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
2.3 HTML语法
- 标签不区分大小写,但建议小写
- 标签可以嵌套,但不能交叉嵌套 (但不会报错,浏览器有一定容错能力)
- 标签必须正确关闭
- HTML注释
<!-- -->不能嵌套
2.4 标签分类
成对标签
<div> </div> <span> </span> <!--成对出现-->自关闭标签
<br/> <img/> <!--单个标签-->
2.5 常用标签
标题符一共六级标题 h7正常字体大小没效果
<h1></h1>到<h6></h6>- 换行符 h5以后可以简写为
<br> div标签
- 本身没有特殊的语意
- div声明的文本内容会独占一行
- 最重要的元素，div就像一个容器，里面可以装很多内容（容器|盒子），用于设置内部复杂的布局
<div></div>段落标签
<p>单独占一行 上下均会换行</p>- 分割线
<hr/> 加粗标签
<b>加粗</b>内联标签 同div标签搭配使用 无换行效果
<span></span>字体标签 (已过时 不建议使用)
<font color="red" size="7" face="宋体">内容</font>
2.6 转义字符
- 语法: 以&开头 以;结尾
常用转义字符
- 空格
普通空格 ` `中文字符空格 - 大于号
>> - 小于号
<< - 版权号
©©
- 空格
2.7 插入图片
<!--图片标签-->
<img alt="设置(图片路径有误时)的提示文本" scr="图片路径" title="设置(鼠标移动到图片上时)的提示文本" width="20%" height="100" border="1"/>
<!--宽高可用百分比 也可以用像素值-->
<!--border设置图片边框大小--->路径问题(相对路径)
- ./当前路径(可以省略)
- ../当前路径的上级路径
- ../../当前路径的上上级路径
2.8 超链接
<a href="设置超链接的目标路径" target="连接方式">
<!-- _self 跳转网页 默认-->
<!-- _blank 新开网页-->2.9 列表
列表分类
无序列表
<ul> </ul>定义子列<li> </li>type属性：可以修改列表项前面的符号样式
disc：实心圆（默认值）square:实心方circle:空心圆
- none:设置类型为空
<!--无序列表标签--> <ul type="square"><!--type属性定义列表样式--> <!-- 定义导航栏 --> <li>网页</li><!--每列标签--> <li>新闻</li> <li>视频</li> <li>贴吧</li> </ul>
有序列表
<ol> </ol>定义子列<li> </li>type属性：可以修改列表项前面的符号样式
- 1（默认值）
- a|A
- i|I(罗马数字)
<!--有序列表标签--> <ol type="A"> <li>二阶</li> <li>三阶</li> <li>四阶</li> </ol>
2.10 表格
标签种类
- <table> 定义表格
- <tr> 定义一行
- <th>定义表头内容 默认会加粗居中
- <td>定义表格内容 默认靠左
Table标签属性
- border边框
- width 表格宽度
- height 表格高低
单元格间距
- cellspacing 每个表格之间的间距
- cellpadding 文本内容与所在表格的间距
th td 标签属性
align 设置对齐方式
- center 居中
- left左对齐
- right右对齐
表格合并
- 跨行 rowspan="格数" 上下的格子合并
- 跨列 colspan="格数" 左右的格子合并
<table width="300px" height="300px" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="2"> <td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td><td ></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>2.11 表单
表单声明标签
<form></form><form action="success.html" method="post">表单</form>form属性
- action="提交位置 可以为网页 也可以为servlet"
- alion对齐方式
method="提交方式"
- get(默认) 发送的请求数据附着在url后面 不安全大小也有限制 4kb
- post 请求数据放在请求体中
表单种类
文本框 text
用户名:<input type="text" name="user" value="张三" placeholder="请输入用户名"><br>密码框 password
密码:<input type="password" name="user" value="1234" >单选框 radio
性别:男<input type="radio" name="sex" checked="checked" value="men">女<input type="radio" name="sex" value="woman"><br>复选框 checkbox
兴趣爱好:魔方<input type="checkbox" name="hobby" checked="checked" value="magic_cube "> 围棋<input type="checkbox" name="like" value="weiqi"> 魔术<input type="checkbox" name="like" value="magic"> 绘画<input type="checkbox" name="like" value="drawing"><br>隐藏域hidden
<!--需要表单数据又不需要显示时 可以用隐藏域--> <input type="hidden" value="login" name="method">下拉框 select 下拉项option
<select name="area"><!--下拉框--> <!-- 如果option中没有指定value属性值，提交的是option中的文本值 如果option中指定了value属性值，提交的是value属性值 --> <option value="china">中国</option><!--下拉选项--> <option>美国</option> <!--selected="selected"默认选中--> <option selected="selected">法国</option> <option>英国</option> </select>提交 submit
<!--单击提交按钮时 默认触发表单的提交时间--> <input type="submit" value="确认">重置 reset
<input type="reset" value="撤销">文件域
<input type="file"> <!--文件上传-->隐藏域
<input type="hidden"> <!--需要数据但是不需要数据显示时-->
表单属性
- placeholder="文本密码框提示信息"
- type 选框属性
- name 数据提交都是以ky键值对的形式传递
需要提交数据的选框需要name属性值
选框名 同选框name必须相同 (密码框除外 一个是密码 一个是确认密码 两个不能相同)
- value 默认值 对选框来说 就是选择以后提交的值
- checked 默认选中 checked="checked" 也可以直接使用checked
- selected 默认下拉项 selected="selected" 也可以直接使用selected
2.12 其他
iframe标签 功能:在当前页面中单独加载一个页面
<iframe src="http://www.atguigu.com" width="500" height="430" ></iframe>
评论 (0)