2021-07-20

最新推荐文章于 2024-04-26 21:29:15 发布

大山爱打球

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量518

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/zzs11055213/article/details/118926294

版权

学习目标：

掌握HTML

初学CSS

学习内容：

1、 HTML列表，input。

2、CSS简介

学习时间：

早上8:30-11:30

下午2:30-5:30

学习产出：

列表标签：

1、表格是用来显示数据的，那么列表就是用来布局的。

2、列表最大的特点就是整齐，整洁，有序，他作为布局会更加方便和自由。

无序列表：

1、<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ul>
   <li>  列表项</li>
   <li>  列表项</li>
   <li>  列表项</li>
      ... 
</ul>

2、无序列表的各个列表项之间没有顺序级别之分，是并列的。

3、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

4、<li></li>之间相当于一个容器，可以容纳所有元素。

5、无序列表会带有自己的样式属性，在实际使用中，会用CSS来设置。

有序列表

1、在和HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

格式如下：

<ol>
   <li>  列表项</li>
   <li>  列表项</li>
   <li>  列表项</li>
      ... 
</ol>

2、<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

3、<li></li>之间相当于一个容器，可以容纳所有元素。

4、有序列表会带有自己的样式属性，在实际使用中，会用CSS来设置。

自定义列表

1、在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>（描述每一个项目/名字）一起使用。

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

2、<dl></dl>中只能包含<dt></dt>和<dd></dd>.

3、<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

表单标签

为什么需要表单？ --------就是为了收集用户信息。

表单的组成

在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息三个部分组成。

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
   各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用预设值表单数据的图提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

特记：

1、在我们写表单元素之前应该有个表单域把他们进行包含。

2、表单域就是form标签。

表单控件（表单元素）

一、input输入表单元素

1、<input>标签用于收集用户信息。

2、在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种方式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）。

<input type="属性值" />

*<input />标签为单标签

type属性1设置不同的属性值用来指定不同的控件类型

除type属性外，<input>标签还有很多属性，如：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1、name和value是每个表单元素都有的属性值，主要给后台人员使用。

2、name是表单元素的名字，要求单选按钮和复选框要有相同的name值。

type属性的属性值及其描述

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。

<label>标签

<label>标签为input元素定义标注。

<label>标签用于绑定一个表单元格，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：<label>标签中for属性对应<input>标签中id属性。

二、select下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间的话，我们可以使用<select>标签控件定义下拉表单。

语法：

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

1、<select>中至少包含一对<option>

2、在<option>中定义select="selected"时，当前项即为默认选中项。

三、textarea文本域标签

使用场景：当用户输入内容较多时，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

常用于留言板，反馈，评论等。

语法：

<textarea rows="3" cols="20">
   文本内容 
<textarea>

1、通过<textarea>标签可以轻松的创建多行文本输入框。

2、cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。

HTML的局限性

只关注内容的语义

CSS

CSS的主要使用场景就是美化网页，布局页面的。

CSS简介：

CSS是层叠样式表的简称，有时我们也会称之为CSS样式表或级联样式表。

CSS也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图形的外形（宽度，边框样式，边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

CSS规则由两个主要部分组成：选择器以及一条或多条声明。

*选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。

*属性和属性值以键值对的形式出现。

*属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。

*属性和属性值之间用英文":"分开。

*多个键值对之间用英文";"进行区分。

CSS代码风格

1、样式格式书写

①紧凑格式

h3{color：deeppink; font-size:20px;}

②展开格式

h3{ 
    color：deeppink;  
    font-size:20px;
}

2、样式大小写

h3{
     color:pink;   
}

H3{
     COLOR:PINK;
}

推荐样式选择器，属性名，属性值关键字全部使用小写字母。

3、空格规范


h3 {
   color: pink;   
}

①属性值前面，冒号后面，保留一个空格。

②选择器和大括号中间保留空格。

CSS选择器作用

选择器就是根据不同的需求把不同的标签选出来，简单来说，就是选择标签用的。

选择器分类

选择器分为基础选择器和复合选择器两大类。

*基础选择器是由单个选择器组成的。

* 基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器。

标签选择器

是指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式。

作用：可以把某一类标签全部选择出来，比如所有的<p>标签和<div>标签。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器

差异化选择不同的标签，单独选一个或者某几个标签。

语法：

.类名 {
      属性1：属性值1
       ...
}

类选择器口诀：样式点定义，结构（class）类调用，一个或多个，开发最常用

注意

①类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

②可以理解为给这个标签起了一个名字来表示。

③长名称或者词组可以使用中横线来为选择器命名。

④不要使用纯数字，中文等命名，尽量使用英文字母来表示。

⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。

多类名使用方式

<div class="red font20">亚瑟</div>

①在标签class属性中写多个类名。

②多个类名之间必须用空格分开。

③这个标签可以分别具有这些类名的样式。

多类名开发中使用场景：

①可以把一些标签元素相同的的样式（共同的部分）放到一个类里面。

②这些标签都可以调用这个公共得类，然后再调用自己独有的类。

③节省CSS代码，统一修改也非常方便。

id选择器

id选择器可以为标有特定的id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。

语法：

#id名{
    属性1： 属性值1
    ...
}

id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

id选择器和类选择器的区别：

①类选择器可以有多个。

②id选择器是惟一的，不得重复。

③id选择器和类选择器最大的不同在于使用次数上。

④类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

通配符选择器

在CSS中通配符选择器使用"*"定义，他表示选取页面中所有元素（标签）。

语法：

* {
    属性1：属性值1
    ...
}

通配符选择器不需要调用，自动就给所有元素使用样式

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p{color: red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择一个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有的标签签	选择的太多，有部分不需要	特殊情况请使用	*{color：red;}

CSS字体属性

CSS Fonts（字体）属性用于定义字体系列，大小，粗细，和文字样式。

字体系列

CSS使用font-family属性定义文本的字体系列。

p {font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}

*各种字体之间必须使用英文状态下的逗号隔开。

*一般情况下，如果有空格隔开的多个单词组成的字体加引号。

*尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

字体粗细

CSS使用font-weight属性设置文字粗细。

p{
    font-weight: bold;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold，注意这个数字后面不跟单位。

文字样式

CSS使用font-style属性设置文本的风格

p{
    font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

字体复合属性

body{
  font: font-style font-weight font-size/line-height font-family
}

注意：

①必须按照上面顺序书写，不能更换顺序，并且各个属性之间以空格隔开。

②不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。

字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定跟上单位
font-family	字体	实际工作中按照团队约束来写字体
font-weight	字体粗细	加粗是700或者bold，不加粗是normal或者400，数字不跟单位
font-style	字体样式	倾斜是italic，不倾斜是normal，我们常用normal
font	字体连写	字体连写是有顺序的，不能随意换位置，其中字体和字号必须同时出现。

CSS文本属性

文本颜色

color属性用于定义文本的颜色

div{
    color: red;
}

表示	属性值
预定义的颜色值	red,green,blue,还有我们的御用色pink
十六进制	#FF00000,#ff6600,#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

文本属性总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制，简写是#ff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常，我们用于段落首行缩进2个字的距离，text-indext：2em
text-decoration	文本修饰	记住添加下划线underline取消下划线none
line-height	行高	控制行与行之间的距离

大山爱打球

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-07-20

学习目标：掌握HTML初学CSS学习内容：1、 HTML列表，input。2、CSS简介学习时间：早上8:30-11:30下午2:30-5:30学习产出：列表标签：1、表格是用来显示数据的，那么列表就是用来布局的。2、列表最大的特点就是整齐，整洁，有序，他作为布局会更加方便和自由。无序列表：1、<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。<ul>
复制链接

扫一扫