HTML5网页设计-day01
每日一句:成功不是将来才有的,而是从决定去做的那一刻起,持续累积而成。
**学习内容:**静态和动态网页、标签、css样式
-
静态和动态网页
-
静态网页
- 没有前后端交互的网页叫做静态网页
-
动态网页
- 有前后端交互的网页叫做静态网页
-
HTML默认模板代码
<!DOCTYPE html> <html lang="en"> 网站的头部 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> 网站的身体部分,存放内容 <body> </body> </html>
-
-
认识网页中的标签
-
如果我们想要在网页中去画东西,可以通过已经制定好的标签去使用
-
标签
-
1.<div></div> ------------> 块元素,在浏览器中独占一行 2.<p></p> ------------> 块元素,在浏览器中独占一行 3.<a href="" target=""></a> ------------>又叫做超链接 主要用于跳转页面的 herf 属性:设置跳转路径 target属性:目标 _blank:打开一个新浏览器窗口 _self: 默认在当前浏览器窗口跳转 4.<span></span> ------------> 通常用来设置比较短的文字或者添加一些符号 小标记 5.<img src="" alt=""> ------------>用来显示图片的标签 src属性:设置图片的所在的路径 alt属性: 如果图片未找到,则显示alt里面的内容 6.<input type="text" checked> ------------>输入框 type属性:input标签会根据type属性值的不一样,呈现出来状态不一样 type="text" 表示输入框 type="password" 表示密码输入框 placeholder属性:设置输入框的背景提示语句,输入内容后自动消失 type="button" 表示按钮和value属性连用,value表示设置按钮内容 type="radio" 表示单选框,通常是和name属性连用,如果name属性值系统的,认为这几个但选 框是一组 checked 默认选中 type="checkbox" 表示多选框, type="hidden"隐藏输入框 通常和form表单连用 注意:当我们进行前后端交互的时候是需要使用form表单,将数据提交到后台的,而表单中能够提 交内容的标签只有input,如果提交的内容不想让用户看见,只供开发者使用,则我们可以使用 隐藏输入框 type="submit"提交按钮 必须和 form表单连用 type="reset" 重置按钮,必须和form表单连用 7.<form action="" method=""></form> ------------>表单标签 action属性,表单提交的路径,(将form中的input内容提交到那) method属性表单的提交方式两种get和post 8.<ul><li></li></ul> ------------>无序列表 9.<ol><li></li></olol> ------------>有序列表 10.<table> ------------>表格标签 tr表示行 td表示列 <th><td></td></th> <tr><td></td></tr> </table> 11.<select><option></option></select> ------------>下拉选项框 12.<h1></h1> ------------>h1-h6标题标签
-
-
-
css样式
-
css样式就像是给我们新买的房子装修一样,通过css的修饰使整个网页的布局和样式更加好看
-
<!-- 去除小圆点 --> list-style: none; <!-- 去除下划线 --> text-decoration: none; <!-- 增加下划线 --> text-decoration: underline; <!-- 修改字体大小 --> font-size:20px; <!-- 设置字体颜色 --> color:red; <!-- 设置字体 --> font-family:微软雅黑; <!-- 设置字体加粗 --> font-weight:bold; <!-- 设置外边距 --> margin: 两个值分别是 上下 左右 margin: 四个值分别是 上 右 下 左 margin: 一个值 分别是 上右下左 margin-left: 左边 margin-right: 右边 margin-top: 上边 margin-bottom 下边 <!-- 鼠标变手指 --> cursor:pointer; <!-- style1,style2 可以同时选中两个样式 --> <!-- 设置圆角 --> border-radius:8px; <!-- 相对定位绝对定位 --> <!-- 相对定位 --> position: relative; left: 20px; <!-- 绝对定位 --> position: absolute; <!-- 浮动 --> <!-- 图片旋转 --> img:hover{ border-radius: 50%; /* 让图片旋转720度,并且放大两倍 */ transform: rotate(720deg) scale(1.5); /* 所有的效果在2秒完成 */ transition: 2s all; } #d p下面的后代p标签 #d>p下面的儿子p标签 img : 导入图片的标签 可以直接在网页上右键另存为 background: 样式贴入背景图 不能直接图片另存为 <!-- 10px 是x轴 30px 是y轴 no-repeat: 不重复出现图片内容(实际多大就占多大) --> background:url("图片.jpg") 10px 30px no-repeat;
-
-
新手上路,以上内容仅供参考,如有不对的地方,望指出!