html5css3网站设计基础教程电子书pdf html5 css3网站设计基础教程

转载

小咪咪 2023-10-19 09:33:47

文章标签 css html5 学习前端 html 文章分类 HTML5 移动开发

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;