华清远见重庆中心-H5基础阶段总结

本文链接：https://blog.csdn.net/qq_57451341/article/details/127954319

阶段性总结：

通过了一段时间的学习，对于html和css有了一个基本的认识，让我了解到了一个网页的设计过程，从一个全新的角度去看待它。在学习期间，讲师带着我做了一些简单的页面样式，对于网页布局的代码和开发软件的快捷键、功能等也愈发熟练，但还是得抽时间进行大量的练习，才能正真掌握这门技能。

一、Html部分

1.创建一个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>

2.元素

可以使用display来改变元素属性

1.块元素：block

特点：独占一行，可包含其他块元素或行内元素

常见：h1、p

*p元素里不放块元素*

2.行内元素：inline

特点：不独占一行

常见：b、u、i

3.行内块元素：inline-block

特点：独占一行，可以设置宽高

3. 常用标签

1.html常用标签

标题

<h1> </h1>

段落

<p> </p>

换行

<br>

<div>和<span>标签

        无语义，用于装饰内容。

        <div>：块元素，一行只有一个

        <span>：行内块元素，一行可有多个

<div> </div>
<span> </span>

图片与路径

标签的属性

- 格式：属性名="属性值"

- 位置：开始标签里

- 作用：设置标签的附加信息

img元素

- 作用：显示图片

- 属性：

src 必要属性定位图片的路径

alt 图片的描述信息，在图片无法正常显示时提示

title 图片的标题，鼠标悬停在图片上时显示

width 定义图片的宽度

height 定义图片的高度

路径

- 相当于电子路线，定位到计算机上的资源文件

- 相对路径

- 相对当前文件的位置，寻找其他目标资源的路线

- ./或者文件名在当前文件的相同目录下

- ./xxx 进入下一级文件

- 绝对路径

- 文件在计算机上的完整地址，通常以盘符开头

- 注意：通过hbuilder等工具运行的html页面是通过它的内置服务器显示的，

浏览器为了安全，不允许服务器上的html页面访问本地文件

<img src="" alt="">

超链接标签

a标签

- href 定义超链接跳转的路径

- target 定义跳转的方式

_blank 空白页显示跳转之后的内容

_self 在本窗口显示跳转之后的内容默认

_parent 在父页面窗口显示跳转之后的内容

_top 在整个框架的祖先元素的窗口显示跳转之后的内容

锚点

- 定位的点

- 设置id属性，a标签里的href属性= "#对应锚点的id属性值"

<a href="" target=""> </a>

2.表格标签

表格

- 必要的标签

- table标签

- tr标签(table row) 表示一行

- td (table data) 表示一个单元格，没有加粗效果

- th (table headder cell) 表示表头的单元格，有加粗的效果

- 表格常用属性

- border 表格的边框，值是数字，数字越大边框越粗

- cellspacing 单元格之间的空隙，值是像素px

- width 表格的宽度

<table border=" " cellspacing=" " width=" " height=" ">
	<tr>
		<th>1</th>
		<th>2</th>
		<th>3</th>
	</tr>
</table>

3.列表标签

列表

- 无序列表 ul 里面只能放li标签

- li标签表示列表项

- 无序列表前是项目符号

可以通过ul的type属性修改项目符号

- disc 实心圆点默认

- circle 空心圆

- square 正方形

- 有序列表 ol 里面只能放li标签

- li标签表示列表项,li标签里可以放其他任何标签，常用的是a标签

- 可以通过ol的type属性修改序号

- 阿拉伯数字 1 默认

- 英文字母 A/a

- 罗马数字 I/i

- 自定义列表 dl

- dt 表示术语、标题

- dd 表示对术语的解释

- dt 和 dd标签里都可以嵌套其他标签

<ul type=" ">
    <li> </li>
</ul>
			
<ol type=" ">
	<li> </li>	
</ol>
		
<dl>
	<dt> </dt>
	<dd> </dd>
</dl>

4.表单域

        表单元素input

        -表单元素需要放在表单域中

        -type属性

          -text 输入框

          -password 密码框

          -radio 单元按钮

          -checkbox 复选框

          -date 日期

          -datetime-local

          -file 文件选择框

          -color 颜色

          -button 按钮

          -submit 提交

          -reset 重置

          -name定义元素名字

          -value 设置元素的值

          -placeholder 设置输入框中的提示文字

          -required 设置必填项，如果不填会弹出提示信息

          -checked 在打开页面是，让元素是选中状态

          -readonly 设置元素只读

          -disabled 设置元素不可用

<form name="表单名称" action="url地址" method="提交方式" >

</form>

二、CSS部分

1.样式

样式优先级如有重复，首先使用内联样式

行内/内联样式 > 内部样式 > 外部样式

写法规定：

1.外部样式页面加载时，link会同时被加载出来，里面的样式最先读取。

2.内部样式。

3.补充写内联样式。

类选择器：在HTML中以class属性表示，在css中类选择器以“.”表示。

id选择器：在HTML以id属性来设置id选择器，css中id选择器以“#”来定义

复合选择器：建立在基础选择器，对基本选择器进行组合形式的

后代选择器：可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面中间用空格分隔

子代选择器：只能选择作为某元素的最近的一级子元素

并集选择器：选择多组标签，同时为他们定义相同的样式

伪类选择器：用于向某些选择器添加特殊的效果，或选择器第一个，第n个元素，伪类选择器书写的最大特点是用“：”表示

超链接

  <!-- 动态伪类 -->
    <!-- 超链接 
        未点击的一个字体样式:蓝色 
        通过以下格式修改样式 
            标签:link {
                color:green;
            }
    ----改为绿色

        点击时的字体样式:红色   
        通过以下格式修改样式 
            标签:active {
                color:blue;
            }
    ----改为蓝色

        点击后的字体颜色:紫色
        通过以下格式修改样式 
            标签:visited {
                color:black;
            }
    ----改为黑色

        鼠标移动至标签，更改颜色
        标签:hover{

        }
    -->