html与css课件

最新推荐文章于 2022-10-20 14:51:38 发布
最新推荐文章于 2022-10-20 14:51:38 发布
阅读量1.1k 收藏 4
点赞数
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sonicbin/article/details/122887918
版权

第一章——初始HTML

HTML—百科

  • HTML全称 : Hyper Text Markup Language
  • HTML的全称为超文本标记语言，是一种标记语言。
  • 它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
  • HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
  • HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的
    蒂姆·伯纳斯·李
  • 自1990年以来，HTML就一直被用作万维网（World Wide Web Consortium万维网联盟W3C）的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。
  • HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
  • HTML是对大小写不敏感的,HTML与html是一样的；但是我们一般规定：书写时一律小写
  • HTML不需要编译,直接由浏览器执行
  • HTML文件必须使用html或htm为文件名后缀
HTML发展史

1989年，Tim Berners-Lee伯纳斯-李，规定HTML规则，并在1990年底写出浏览器和服务器软件。

  • HTML 1.0 – 在1993年6月发为互联网工程工作小组(IETF)，工作草案发布(并非标准)
  • HTML 2.0 – 1995年11月发布,于2000年6月发布之后被宣布已经过时
  • HTML 3.2 – 1996年1月14日,W3C推荐标准
  • HTML 4.0 – 1997年12月18日,W3C推荐标准
  • HTML 4.01(微小改进) – 1999年12月24日,W3C推荐标准（太过于松懈）
  • XHTML 1.0 – 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
  • XHTML 1.1 – 于2001年5月31日发布
  • XHTML 2.0 –2002年发布
  • HTML 5.0 – 2008年发布
标签格式
<!-- 1、双标签 --> 
<开始标签>标签修饰的内容</结束标签>
<!-- 2、单标签 -->
<标签/>
<!-- 3、特殊字符 -->
&nbsp;
标签关系

包含关系：(父子关系)

<外标签>
	<内标签></内标签>
</外标签>

并列关系：（兄弟关系）

<标签一></标签一>

<标签二></标签二>

示例：对一段文本进行标记，超文本标记语言-HTML

文本：今天是<加粗>2022</加粗>年的<变金黄>第一节课</变金黄>

样式：今天是2022年的第一节课

HTML—网页结构

主要组成部分：
<html>		</html>			网页的根标签
<head>		</head>			网页头部标签
<title>		</title>		网页标题标签
<body>		</body>			网页的内容标签

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        内容
    </body>
</html>
小试牛刀：用新建文本文档写一个html网页
  1. 新建文本文档
  2. 在文本文档中搭建基本网页结构
  3. 在搭建好的网页结构中添加内容
  4. 更改文本文档的文件后缀
  5. 打开更改后的网页即可
使用vscode新建html页面
<!DOCTYPE html>
<!-- 这是给浏览器看的，大致意思为这个文件是一个HTML5的文件 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- charset=字符集  UTF-8=中文的字符集 -->
    <title>标题</title>
</head>

<body>
    内容
</body>

</html>
更改标题图标
<link rel="icon" type="image/x-ico" href="图标路径">
  • rel : relation 联系 就是与此html网页有什么联系，是它的什么
  • href : 路径，图标从哪里来的
  • type : 固定格式（经本人测试，加不加都不影响效果，可能对代码的可移植性有影响）加上最好

HTML — 常用标签

块状标签
  • 纵向排列，独占一行
  • 长宽可调，默认情况下：宽自动向浏览器最左最右延伸。
  • 块可以套块和行（例：div）
行内标签
  • 水平排列，长宽不可调
  • 默认情况下：长宽以内容大小进行调节
  • 行只能套行（例：span）
基本常用标签
  • div div标签，一个没有任何默认属性的块状标签
  • span span标签，一个没有任何默认属性的行内标签
  • <h1>~<h6> h标题标签，自带加粗和字号，而且独占一行上下有间隔
  • <p> p段落标签，独占一行上下有间隔
  • <hr/> 水平线标签
  • <br/> 换行标签
  • &nbsp; 特殊字符，不需要加间括号
图像标签
  • <img> 属性：
    • src：路径
      • 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）
        • 下级路径：<img src="文件夹/image.png">
        • 同级路径：<img src="./image.png">
        • 上级路径：<img src="../image.png">
      • 绝对路径（不推荐使用）
      • 网络路径
    • width：宽
    • height：高
      • 调宽不调高，调高不调宽。建议调图像的宽！！！
    • alt：当图像路径出错时，提示文字
    • title：可以悬浮提示
超链接标签
  • <a> 属性：
    • href：路径
    • target：跳转页面模式
    • name：锚点
<!-- 直接返回到顶部 -->
<a href="#top"></a>

<!-- 返回到锚点 -->
<a name="名字"></a>
<a href="#名字"></a>

<!-- 跨页面返回到锚点 -->
<a name="名字"></a>
<a href="网页路径#名字"></a>

注释和特殊符号

注释   方便阅读代码   浏览器自动忽略注释内容
vscode 常用快捷键： ctrl+/     ctrl+shilt+/
特殊符号字符实体示例
空格&nbsp;百度 | 新浪
大于号(>)&gt;如果时间>晚上6点，就坐车回家
小于号(<)&lt;如果时间<早上7点，就走路去上学
引号&quot;W3C规范中，HTML的属性值必须用成对的"引起来
版权符号&copy;© 2003-2013 阿里巴巴

HTML特殊字符编码对照表
http://www.jb51.net/onlineread/htmlchar.htm

W3C标准

标签名称、属性名称必须小写
标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
属性值必须用引号引起来

html书写规范

  • 标签换行写法

    <div><span>span标签</span><p>段落标签</p></div>	<!-- 错误示范 -->
<div>
	<span>span标签</span>
	<p>段落标签</p>
</div>											<!-- 正确示范 -->

  • 标签需要关闭

    <div>
    <span>span标签	 <!-- 错误示范,错误原因：没有结束标签 -->
    <p>段落标签<p>		<!-- 错误示范,错误原因：结束标签书写不正确 -->
</div>
<div>
	<span>span标签</span>		 <!-- 正确示范 -->
	<p>段落标签</p>				<!-- 正确示范 -->
</div>
章节问题：
  1. 行标签是否能包含行标签？
  2. img是什么标签？行还是块？
  3. 网页内最基本的四个结构标签分别是什么？
  4. 图像路径属性名和超链接路径属性名分别是什么?
  5. 代码标签的两种关系分别是什么？

第二章 —— 初识CSS

为什么要使用css

使用css，可以让原始的页面即黑色文字页面变得丰富起来，漂亮起来，实现我们想要的排版布局的效果

s

CSS的优势

  • 内容与表现分离
  • 网页的表现统一，容易修改
  • 丰富的样式，使页面布局更加灵活
  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS语法规则

CSS 规则集（rule-set）由选择器和声明块组成：

CSS 选择器

h1 {
    color: red;			/* 这就是一个声明 */
    font-size: 16px;
}

**提示：**在规则的最后一个声明后也加上分号是一个好习惯。

在向规则增加另一个声明时，就不必担心忘记再插入一个分号。

CSS文件配置

1、内联式

head标签的内部，写法在同一文件里，写在head里面，写style标签里面。

<html>
	<head>
        <title>Document</title>
        <style>
            h1{
                color: red;
            }
        </style>
    </head>
    <body>
    </body>
</html>
2、外联式

需要新建一个css 文件【.css 后缀的文件】使css和html关联起来即可。一个html文件，引入的CSS文件数量不限

  1. 链接式：使用link标签来链接css和html

    <link rel="stylesheet" type="text/css" href="./index.css">

  2. 导入式

    @import url('./index.css')     /* @import规则必须在CSS文档的开头 */

/* 文件名：index.css */
h1{
    color: blue;
}

<!-- 链接式  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <h1>我是h1</h1>
</body>
</html>

<!-- 导入式  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('./index.css');
    </style>
</head>
<body>
    <h1>我是h1</h1>
</body>
</html>

链接式和导入式的区别

  • <link/>标签属于XHTML，@import是属于CSS2.1
  • 连接时符合html标签的，导入不是html标签
  • 连接样式表中不能在引入样式，而导入样式中还可以导入其他的样式表
  • 连接样式按他的位置加载的，而导入是先加载完标签才加载样式的
3、行内样式
<body>
    <h1 style="color:green;">我是h1</h1>
</body>
文件配置的层级关系

行内样式表>内部样式表=外部样式表

同级关系时，谁的执行顺序靠下执行谁

CSS 基础选择器

CSS通配符选择器

通配符选择器可以选中HTML内的所有元素

*{
    font-size:20px;
	color:red;
}
CSS 元素选择器
p {
    text-align: center;
    color: red;
}
CSS 类选择器

注：类选择器命名为英文，不能用中文不能以数字开头

使用 class 属性去标记要选择的元素

使用 . 声明类选择器

.center {
    text-align: center;
    color: red;
}
CSS id 选择器

注：id选择器名为为英文，不能用中文不能以数字开头

注：页面内不能有相同的 id 名

使用 id 去标记要选择的元素

使用 # 声明id选择器

#para1 {
    text-align: center;
    color: red;
}

类选择器和ID选择器允许以一种独立于文档元素的方式来指定样式。只有适当地标记文档后，才能使用这些选择器

所以使用这种选择器通常需要先做一些构想和计划。

总结：级别关系：ID > class > 元素

文本/字体样式

  1. color：文本颜色
    p {
	color: red;
}
  2. text-align：对齐方式
    p {
	text-align: left;
	text-align: center;  /* ★ */
	text-align: right;
}
  3. text-decoration：文字装饰（横线）
    p {
    text-decoration: none;  		/* 超链接去下划线 */
    text-decoration: overline;		/* 上横线 */
    text-decoration: line-through;	/* 中横线 */
    text-decoration: underline;		/* 下横线 */
}
  4. line-height：行高（文字垂直居中）
    p {
    line-height: 30px;
}
  5. font-size：字体大小
    p {
    font-size: 20px;
    font-size: 10vw;	/* vw固定文字在页面的大小，文字大小不随着页面的缩放而改变 */
}
  6. font-family：字体风格
    p {
    font-family: "Times New Roman", Times, serif,楷体,宋体,隶书;
}
  7. font-weight：字体粗细
    p {
    font-weight: bold;
}

背景属性

  1. background-color：背景颜色
    body {
    background-color: lightblue;
}
  2. opacity：透明度
    body {
    background-color: lightblue;
    opacity: 0.3;
}
  3. background-image：背景图像

    注：默认情况下，图像会重复，以覆盖整个元素。

    body {
    background-image: url("");
}
  4. background-repeat：消除背景重复
    body {
    background-repeat: no-repeat;	/* 无重复 */
    background-repeat: repeat-x;	/* 横向重复 */
    background-repeat: repeat-y;	/* 纵向重复 */
}
  5. background-position：背景定位
    body {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: right top;
}
    属性值描述top
    top bottom left right center上下左右中
    20px 30px离左边20px 离上边30px
  6. CSS background - 简写属性★★★★★
    body {
	/* background: 颜色 路径 重复 定位 固定; */
    background: #ffffff url("tree.png") no-repeat right top;
}

伪类选择器语法

div:hover{
    background-color:red;	/* 悬浮时背景颜色变红 */
}

鼠标形状 cursor：

值说明
pointer小手
text文字光标
wait转圈
a:hover{
    cursor: pointer;	/* 悬浮时变小手 */
}

光标形状表：https://www.w3school.com.cn/cssref/pr_class_cursor.asp

光标形状演示：http://w3school.com.cn/tiy/t.asp?f=eg_csse_cursor

练习：

  1. 分别使用不同的方式分别对<h1>、<h2>、<h3>标签调整不同的大小和颜色 (使用内联，外联，行内)
  2. 台历——使用背景图像的纵向平铺制作台历效果
  3. 竹子——使用背景图像的垂直平铺制作竹子效果
  4. 摩托车——使用背景固定制作效果
  5. 光标形状

第三章 —— 列表、表格

1、有序列表

width="50px"

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

示例：

<body>
    <ol>
        <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
        <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
        <li>中国进入“两会”时间 外国记者最关注啥？</li>
        <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
    </ol>

    <!-- type 的取值为 A a I i  -->
    <ol type="a">
        <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
        <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
        <li>中国进入“两会”时间 外国记者最关注啥？</li>
        <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
    </ol>

    <!-- start 规定了起始的数字  reversed表示从起始位置降序排列-->
    <ol start="4" reversed>
        <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
        <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
        <li>中国进入“两会”时间 外国记者最关注啥？</li>
        <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
    </ol>
</body>

2、无序列表

s

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

示例：

<ul>
    <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
    <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
    <li>中国进入“两会”时间 外国记者最关注啥？</li>
    <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
</ul>

<!-- type ='circle' 空心圆:square  实心正方形:disc  默认样式:实心圆-->

<ul type='circle'>
    <li>代表委员建议降低个税最高边际税率，该降吗？怎么降？</li>
    <li>国药董事长：5000多名两会代表委员已接种国药新冠疫苗</li>
    <li>中国进入“两会”时间 外国记者最关注啥？</li>
    <li>“外交老将”张业遂将第四次以全国人大大会发言人身份亮相</li>
</ul>
  1. <ul></ul>或 <ol></ol>中的子元素只能嵌套<li></li>
  2. 直接在 <ul></ul>或 <ol></ol>标签内输入其他标签或者文字的做法是不可以的哦！
  3. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  4. 列表会带有自己样式属性，可以使用CSS搞定！

3、自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ......
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ......
</dl>

4、列表样式 （通过css 来修改列表的样式）

注意：ul 和 ol 本身带有 外边距和内边距。使用列表做布局的话，需要把内外边距清零！

list-style-type 属性指定列表项标记的类型。

ol{
	list-style-type:decimal-leading-zero;
}
值描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal默认是数字。
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic汉字一二三
hiragana标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

list-style-image 属性将图像指定为列表项标记：

默认图标宽高为15*20px

ul{
    list-style-image: url("");
}

list-style-position 修改列表标识的位置

值描述
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
<style type="text/css">
    ul.inside{
        list-style-position: inside
    }

    ul.outside{
        list-style-position: outside
    }
</style>
<!-- inside列表样式 -->
<ul class="inside">
    <li>曾经有一份真挚的爱情摆在我面前，但我没有珍惜，等到失去了我才后悔莫及，尘世间最痛苦的事莫过于此。如果上天可以给我再来一次的机会，我会对那个女孩说三个字：“我爱你!”如果非要在这份爱前加一个期限的话，我希望是一万年。</li>
    <li>Life is like a box of chocolates, you never konw what you're going to get. — — 生活就像一盒巧克力，你永远不知道你会得到什么。</li>
</ul>
<!-- outside列表样式 -->
<ul class="outside">
    <li>曾经有一份真挚的爱情摆在我面前，但我没有珍惜，等到失去了我才后悔莫及，尘世间最痛苦的事莫过于此。如果上天可以给我再来一次的机会，我会对那个女孩说三个字：“我爱你!”如果非要在这份爱前加一个期限的话，我希望是一万年。</li>
    <li>Life is like a box of chocolates, you never konw what you're going to get. — — 生活就像一盒巧克力，你永远不知道你会得到什么。</li>

list-style 简写属性,在一个声明中设置所有的列表属性，可以按顺序设置如下属性：

  • list-style-type
  • list-style-position
  • list-style-image

注意，列表会自带一些padding和margin属性。在必要时需要清除掉

表格

表格的基本结构：行、列、单元格

标签描述
<table></table>表格标签
<tr></tr>行标签
<td></td>单元格标签
<th></th>表头标签
<!-- 表格基本结构 -->
<table>
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        ......
    </tr>
    ......
</table>
属性描述
border=“1px”表格边框
cellspacing=“10px”边框与边框之间的间距
cellpadding=“10px”边框与内容之间的间距
align=“center”行内或单元格内内容横向对齐方式
valign=“center”行内或单元格内内容纵向对齐方式
width=“600px”宽
height=“200px”高
<!-- 表格基本结构 -->
<table border="1px" cellspacing="10px"  cellpadding="10px" width="600px" height="200px">
    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td align="center">单元格1</td>
        <td valign="top">单元格2</td>
        ......
    </tr>
    ......
</table>
属性描述
colspan跨列合并
rowspan跨行合并
<style>
    table {
        border: 1px solid black;
        width: 500px;
        height: 200px;
    }
    td {
        border: 1px solid black;
    }
</style>
<table>
    <!-- 第一行 -->
    <tr align="center">
        <th colspan="3">老一们的电话号码</th>
        <!-- <td>被第一个单元格合并掉了</td> -->
        <!-- <td>被第一个单元格合并掉了</td> -->
    </tr>

    <!-- 第2行 -->
    <tr>
        <td rowspan="2">普京大帝</td>
        <td>座机</td>
        <td>0379-8888 9999</td>
    </tr>

    <!-- 第3行 -->
    <tr>
        <!-- <td>被普京大帝顶掉了</td> -->
        <td>手机号</td>
        <td>169-3489-1548</td>
    </tr>

    <!-- 第4行 -->
    <tr>
        <td rowspan="2">窜西拜登</td>
        <td>座机</td>
        <td>0714-3399 4488</td>
    </tr>

    <!-- 第5行 -->
    <tr>
        <!-- <td>被窜西拜登顶掉了</td> -->
        <td>手机号</td>
        <td>177-9476-8246</td>
    </tr>
</table>

练习

  1. 制作品牌闪购效果

第四章 —— 表单

1、什么是表单

  • 表单用于收集用户的信息，是浏览器和用户之间沟通的桥梁。
  • 就是你在注册账号时，让你输手机号，输密码那个小框框，明白了吧
  • 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
  • HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

2、表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="服务器url地址" method="提交方式get/post" name="表单名称">
  各种表单控件
</form>
例如：你需要把数据提交到 www.aaa.com 这个域名所对应的服务器上  http://www.aaa.com

常用属性：

  1. Action
    在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method
    用于设置表单数据的提交方式，其取值为get或post。
  3. name
    用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

3、input 控件(重点)

<input type="控件类型" name="" value="" />
  • <input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。
  • 除了type属性之外，<input />标签还需要定义很多其他的属性，其常用属性如下表所示。
属性值描述
typetext单行文本输入框
typepassword密码输入框
typeradio单选框
typecheckbox复选框
typebutton普通按钮
typesubmit提交按钮
typereset重置按钮
typeimage图像形式的提交按钮
typefile文件域
typenumber数字文本框
checkedchecked预先选定复选框或单选按钮。
disableddisabled禁用 input 元素
maxlengthnumber规定输入字段中的字符的最大长度。
valuevalue属性规定输入字段的初始值
readonlyreadonly只能读 不能修改
hiddenhidden隐藏元素，用于接受值，但不显示在页面
autocomplete（H5）off属性规定表单或输入字段是否提示历史记录
form（H5）formname规定输入字段所属的表单
placeholder（H5）文本规定在文本框内提示输入的内容
<form action="bujibuji">
    <!-- 输入框 -->
    姓:
    <input type="text" name="firstname" value="" placeholder="请输入您尊贵的姓氏:"><br>
    名:
    <input type="text" name="lastname" value="SIR" disabled><br>
    字:
    <input type="text" name="lastname" value="二世嗣" readonly><br>

    <!-- 密码框 -->
    银行卡密码:
    <input type="password" name="bank" maxlength="6"><br>

    <!-- 单选框 -->
    <!-- 一组单选框可以写一样的name，这样一组内同时只能选择一个 -->
    性别:
    <input type="radio" name="sex" value="man" checked>男
    <input type="radio" name="sex" value="woman">女<br>

    <!-- 复选框 -->
    娱乐:
    <input type="checkbox" name="play" value="chicken">炸鸡
    <input type="checkbox" name="play" value="beer">啤酒
    <input type="checkbox" name="play" value="NBA">NBA<br>

    <!-- 文件选择器 -->
    <input type="file" name="file" id="file" value="文件" />

    <!-- 提交按钮 -->
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

4、label标签

label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得焦点

for 属性规定 <label> 与哪个表单元素绑定。 for属性和被绑元素的id属性的值要一致

<label for="allName">姓名：</label>
<input type="text" name="allName" value="Yo Da Lee" id="allName"><br>

请选择性别：
<input type="radio" name="sex" id="man">
<label for="man">男</label> 
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>

5、textarea 控件 (多行文本域 )

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="20" rows="20">
  	这是一个文本域内的初始内容
</textarea>
  • rows可以控制文本域的宽度
  • cols可以控制文本域的高度

6、下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option selected>选项3</option>
  ...
</select>

注意：

  1. <select></select>中至少应包含一对<option></option>。
  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
button 元素
<button type="button" onclick="alert('快到碗里来')">点击我！</button>
<button type="button" onclick="console.log('你才到碗里去')">点击我！</button>

第五章 —— CSS 盒子模型

什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像 width height。

边框-border

边框可以设置：

情形效果
一个值四条边
两个值上下→左右
三个值上→左右→下
四个值上→右→下→左

  • 边框样式

    border-style:solid;
    属性描述
    dotted定义点线边框
    dashed定义虚线边框
    solid定义实线边框
    double定义双边框
    groove定义 3D 凹槽边框
    ridge定义 3D 凸线边框
    inset定义 3D inset 边框
    outset定义 3D outset 边框

  • 边框颜色

    border-color:red;

  • 边框宽度

    border-width:5px;

  • 边框简写

    • 注意简写时一定要写边框样式才有效果

    • 可以同时设置边框颜色、粗细、样式。前后没有顺序区别

    • border: 9px #F00 solid;

自适应宽度-width

  1. 内容最大宽度：max-content
  2. 内容最小宽度：min-content（不常用）

内边距-padding

内边距就是 盒子边框 与 盒子内容 之间的距离：

可以设置单个方向的内边距：

方向描述
padding-left左内边距
padding-top上内边距
padding-right右内边距
padding-bottom下内边距

并且如果你觉得一个边一个遍的设置过于麻烦，padding 同时支持简写方式。

padding: 5px 10px;
padding: 5px 10px 15px 20px;

百分比数值：

可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。

所以，如果父元素的 width 改变，它们也会改变。

padding: 10% 20%;

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

padding对行、块元素的影响

行内元素：只能左右设置，上下无效，虽然背景图增大，但是对文档流没有影响

块级元素：正常设置，没有影响，不会重叠

外边距-margin

外边距就是紧挨着 盒子边框 之外的空间：

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

外边距可以设置元素的单方向的边距：

方向描述
margin-left左外边距
margin-top上外边距
margin-right右外边距
margin-bottom下外边距

并且如果你觉得一个边一个遍的设置过于麻烦，margin 同时支持简写方式。

margin: 5px 10px;

margin扩展用法：

margin:auto;
/* 使元素水平居中 */

有些元素自带内外边距属性值，所以我们可以在不需要默认属性的时候用通配符去除他们自带的属性值：

* {
    margin: 0;
    padding: 0;
}

外边距合并：

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将合成伪一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

常见合并方式为：

  1. 同级元素外边距合并：p标签的外边距合并
  2. 父子元素外边距合并：父元素和子元素同时拥有外边距且外边距相遇时子元素外边距合并到父元素外边距中

注：只有普通文档流中块儿级元素的垂直外边距才会发生外边距合并。

解决方法：将相遇的外边距隔开

盒子模型的分类

box-sizing属性

  • content-box：盒子的实际宽度和高度仅作用于元素内容，不包括内边距和边框 【标准盒模型】

  • border-box： 盒子的实际高度和宽度包括元素内容、边框和内边距 【怪异盒模型】

display

行内元素和块级元素区别
  • 块级元素会独占一行，其宽度自动填满其父元素宽度
  • 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
  • 块级元素可以设置 width, height属性，行内元素设置width, height无效
  • 块级元素可以设置margin 和 padding
display属性

  • 控制元素的显示和隐藏

  • 块级元素与行内元素的转变

  • 行内块元素可以在一行内显示，并可调宽高

  • 值说明
    none设置元素不会被显示
    inline元素会被显示为行内元素
    block元素会被显示为块级元素
    inline-block行内块元素（缺点：元素间有间隔）

练习

  1. 使用外边距让元素水平居中

  2. 使用box-sizing让四个长宽为50px的子元素，在长宽为50px * 200px的父元素中不超出

  3. 0
  4. 0

    鼠标悬浮在内容上的时候，背景颜色，文本颜色，鼠标样式都要有效果

  5. 小米头部导航栏

第六章：浮动

1.为什么需要浮动？

网页布局要求，标准流(页面的默认布局)不能满足我们的需要了，因此我们需要浮动来完成网页布局。

举例子：前面学过行内块，行内块可以一排显示；但是中间会有缝隙，所以不能满足我们的开发需求。

2.浮动可以写出什么效果

可以使块元素标签横向排列 👉演示一下

可以使两个或多个元素在一行内左右排列 👉演示一下

对比 inline-block 没有中间的间隙 👉演示一下

浮动元素需要搭配一个标准流的父元素进行使用 👉演示一下

浮动-float属性

属性值说明
left元素向左浮动
right元素向右浮动
none默认值，元素不浮动
/* 浮动写法示例 */
.layer01 {
	float:left;
}

浮动的原理及特性

  • float 先浮后动

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4QloYP2j-1644581670693)(C:\Users\Hugai\Desktop\我的课件\HTML课件\课件\assets\image-20210420205710193.png)]

  • float 属性用于创建浮动框，将其移动到一边，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    • 具有float属性的元素在父标签中是不占空间的（脱离标准文档流-脱标），需要手动设置父元素高度

  • 浮动的元素会在一行内显示，并且元素之间顶部对齐

  • 浮动的元素会在父元素顶部对齐排列，多余的元素会换行顶部对齐继续排列

浮动对行级元素和块级元素的影响

  • float 对行内属性标签的影响
    • float之后能设置width和height属性，并支持margin和padding属性
  • float 对块属性标签的影响
    a：在没有设置宽高的情况下浮动后，内容撑开宽度高度，如果设置了宽高，那就按照设置的宽高来显示
    b：可以使块属性元素并排排列

浮动练习：

  1. 四个浮动效果，见课件

清除浮动(扩展盒子高度)的方式

消除浮动用于解决当子元素浮动后，超出包含元素区域时脱标问题。

  1. overflow如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

    • 然后我们可以向包含元素添加 overflow: hidden;，来解决此问题
    • 语义化

  2. clear属性

    clear 属性必须写在块元素内，隔断设置方向的浮动脱标效果

    属性值说明
    left在左侧不允许浮动元素
    right在右侧不允许浮动元素
    both在左、右两侧不允许浮动元素
    none默认值。允许浮动元素出现在两侧

    1. 使用w3c推荐，添加隔断标签

      1. 添加标签的写法，效果和overflow是一样的，但是更加有语义化。

        <div class="fixclear"></div>

    2. 使用 ::after 伪元素

      1. ::after 伪元素必须加上content属性才可以使用

      2. div::after{
	content:'';
    display:block;
    clear:both;
}

溢出-overflow

知识点：基本上带有隐藏效果的动画或者过渡都使用的是overflow属性

属性值说明
visible默认值。内容不会被修剪，会呈现在盒子之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，

溢出练习：

  1. 设置列表，当鼠标悬浮在一级列表项的时候，显示二级列表项

第七章：定位

本章目标

  • 会使用 position 进行网页元素的布局
  • 会使用 z-index 属性调整 定位元素 的堆叠次序

position：属性

属性值说明
static默认值，没有定位，标准流
relative相对定位
absolute绝对定位
fixed固定定位

偏移量：

属性值说明
left距离左方向，有多少个像素值
right距离右方向，有多少个像素值
top距离上方向，有多少个像素值
bottom距离下方向，有多少个像素值

偏移量的值可以为负

定位元素：

声明了 position 属性，并且属性值不为 static 的元素：相对定位，绝对定位，固定定位

.div1{
	position:static;
    /* 这不是一个定位元素 */
}
.div2{
	position:absolute;
    /* 这是一个定位元素 */
}

static属性值

没有定位和偏移量，以标准流方式显示

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

relative属性值※

  • 相对自身原来位置进行偏移（也就是相对于标准流偏移）

  • #div1 {
	position:relative;
	left:20px;
     top:-20px;
}

  • 设置相对定位的盒子会相对它原来的位置，通过指定偏移量，到达新的位置

  • 相对定位网页元素原来的位置保留（不脱标），不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移

absolute属性值※

  • 绝对定位相对于定位祖先元素定位，偏移量为距离父元素边框有多远

  • #div1 {
	position:absolute;
	right:30px;
}

  • 如果没有已经定位的祖先元素，那么会以body为基准进行定位

  • 绝对定位的元素从标准文档流中脱离(脱标)

  • 子绝父相：子元素需要绝对定位的时候，他的父元素一般配合着使用相对定位。

fixed属性值

  • .pos_fixed{
	position:fixed;
	top:30px;
	right:5px;
}

  • 元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的它也不会移动
    Fixed定位使元素的位置与文档流无关，因此不占据空间

z-index属性

  • 首先声明：z-index只能在定位元素上有效。
  • 调整元素定位时重叠层的上下位置
  • z-index属性值：整数，默认值为0，而且可以为负值
  • z-index值大的层位于其值小的层上方（值越大越靠上，值越小 越靠下）
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIUY83EE-1644581670694)(C:\Users\Hugai\Desktop\我的课件\HTML课件\课件\assets\image-20210420221128310.png)]
反射狐
关注
html+css 课件
11-09
前端入门课件
HTML与CSS课件
09-26
HTML5 CSS 软件开发PPT
html +css 课件
12-15
html基础 html列表与菜单的制作 html表格属性及布局 框架与表单 css核心基础 盒子模型 浮动与定位 文字与图像、圆角的制作 导航与菜单 综合应用修饰表单
html和css学习课件（新版）
sonicbin的博客
02-26 1980
第一章：初识HTML 本章目标： 理解HTML 掌握HTML标签的应用 掌握超链接的应用 什么是HTML HTML是用来制作网页的标记语言 HTML是HyperText Markup Language的英文缩写,即超文本标记语言 HTML不是一种编程语言，而是一种标记语言 [标记语言是一套标记标签 (markup tag)] ，描述网页的语言 HTML使用标签描述网页中图片、文本、音乐、视频、超链接 在HTML中，虽然有文本，但是这些文本需要使用html语言中的标记来标识。 当被HTML中的标记标识之
html和css基础教程课件
10-17
html和css基础教程课件,基础，基础基础基础基础基础基础
html与css课件,HTML与CSS讲解.ppt
weixin_29516495的博客
06-21 285
HTML与CSS讲解3.1 静态网页HTML简介 3.2 Dreamweaver 3.3 HTML的常用标记 3.4 表单设计 3.5 框架式网页 3.6 层叠样式表CSS 表单的提交方式get和post两种方式的区别 表单的提交方式有get和post两种方式 : 简单来说： post传递数据量较大，较安全，用request.form(“”)取值。 get传递数据量较小，没有post安全...
HTML与CSS前台页面设计ppt课件(完整版).ppt
05-02
本课件从HTML与CSS的基本概念开始，逐步深入到网页设计的各个方面，涵盖了HTML与CSS的基本概念、网页与网站、HTML与CSS网页的开发环境、HTML代码的结构、HTML网页的构成、HTML网页的浏览与测试等多个方面。...
HTML基础与层叠样式单CSS课件
最新发布
06-21
HTML基础与层叠样式单CSS课件 HTML基础知识点： 1. HTML文档的基本结构：HTML文档由一个<HTML>和</HTML>标记包含，分为和两大部分，页面的标识一般都是在标识中定义的。 2. HTML文档的头元素（HEAD）：每个HTML...
CSS+HTML教学课件ppt.rar_CSS+HTML教学课件ppt_css 课件_html css 课件_html 教学 课
09-23
**CSS与HTML基础教程** 本教学课件是针对初学者设计的一套全面的CSS和HTML学习资源，旨在帮助用户从零开始掌握这两种重要的网页设计语言。通过这些PPT课件，您将能够深入理解HTML的基本结构，以及如何利用CSS来美化...
html+css3+javascript课件
09-09
HTML(Hypertext Markup Language)超文本标记语言是表示网页的一种规范或标准，通过标记符定义描述页面的文本、图片、声音和影视动画 —用于设计静态网页.html文件。 所谓超文本主要是指它对图片、声音和影视的超链接功能。 1、HTML 目前版本是html4.0，传统HTML对语法非常宽松，例如标记可以不闭合、标记名不区分大小写、属性值可不加引号。 html文件运行环境—双击html文件即可由浏览器自动运行： Microsoft的Internet Explorer—IE浏览器 Netscape 的Navigator浏览器、Firefox浏览器 查看“源文件”：点击浏览器“查看”菜单的“源文件”或在页面点击鼠标右键选择“查看源文件”。
HTML5 + CSS3 标准课件 PPT
02-17
HTML5 + CSS3 标准课件 ppt （包括 canvas 、多媒体、本地存储、Geolocation地理位置 等）
HTML+CSS PPT
02-28
电子教案HTML+CSS 相关学习资料. 帮助您快速了解HTML CSS.
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} <p class=“student”>张三<p> 类名的前边一定要加上一个小数点(.)以表示这是个类选择器而不是重定义标签 类名建议起得有意思，避免起abcd等没有意思的名字 在需要应用类选择器的标签内用上class属性套用 在标签内用class属性套用时不需要加上小数点 一个标签要套用多个类的样式，可以使用空格隔开。例如<p class=“student name”>张三</p>
html5+css3课件打包
05-31
包含了一整套html5和css3的最新课件
html和css常见标签汇总
03-23
html和css的常见标签汇总，便于web前端学习中查阅
html,css,javascrip...,全套课件 网页设计与制作（HTML+CSS+JavaScrip）.ppt
weixin_32667011的博客
06-22 231
操作符、表达式 JavaScript的操作符(双目运算符) 运算符 说 明 + “加”运算符，应用在算术运算当中。 - “减”运算符，应用在算术运算当中。 * “乘”运算符，应用在算术运算当中。1 / “除”运算符，应用在算术运算当中。1 % “取模”运算符，也就是求余数，应用在算术运算当中。 < “小于”运算符，应用在比较运算当中。 > “大于”运算符，应用在比较运算当...
HTML+CSS系列教程（第1—20课）
lxq13308302836的博客
10-20 2104
HTML+CSS系列教程（第1—20课）
html语言教程ppt,HTML语言教学课件.ppt
weixin_34874119的博客
05-31 150
HTML语言教学课件HTML语言 一 HTML入门 1.1 网络的基本概念 计算机网络就是利用通讯线路将分布在不同地点的具有独立功能的多台计算机系统相互连接，按照网络协议进行通信和实现资源共享的系统。 网络协议：网络中进行通信的规则或约定 什么是网页和网站 什么是网页 什么是网站 什么是网页 网页是由HTML(超级文本标识语言)或者其他语言编写的，通过IE浏览器编译后供用户获...
CSS教程(ppt)
02-27
css ppt 教程 样式表 样式表样式表
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值