搜索到
1
篇与
HTML+CSS
的结果
-
HTML5 HTML5HTML5( HyperText Markup Language 5 )超文本标记语言,是构建Web内容的一种语言描述方式,在 2008 年正式发布.HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息第一章 网页的构成1.1 概念 b/s c/sb/s 浏览器/服务器(重点)优点：无需占用本地资源，维护方便。不足：如果请求与响应数据量较大，需要占用大量的网络带宽。c/s 客户端/服务器优点：性能稳定，无需占用大量网络带宽。不足：必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，占用本地资源，便携性差，维护成本高。1.2 网站构成HTML(结构) :HTML是网页内容的载体可以包含文字、图片、视频等。CSS(表现):CSS样式是表现。网页的美化。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。JS(行为):JavaScript(jquery)是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单、轮播图 ,或鼠标滑过表格的背景颜色改变,还有购物网站中图片的轮换。第二章HTML概述2.1 HTML简介用来描述网页的语言HTML超文本标记语言,超文本指的是可以包含图片,链接甚至音乐,视频,程序等文件后缀为.html2.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|Ai|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后面 不安全大小也有限制 4kbpost 请求数据放在请求体中表单种类文本框 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" 也可以直接使用checkedselected 默认下拉项 selected="selected" 也可以直接使用selected2.12 其他iframe标签 功能:在当前页面中单独加载一个页面<iframe src="http://www.atguigu.com" width="500" height="430" ></iframe>
