HTML第三天

2.列表标签

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

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

2.1无序列表

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

无序列表的基本语法格式如下：

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

1.无序列表的各个列表之间没有顺序级别之分，是并列的。

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

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

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

2.2有序列表

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

基本语法格式如下：

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

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

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

3.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

2.3自定义列表

自定义列表的使用场景：

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

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

其基本语法如下：

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

1.<dl></dl>里面只能包含<dt>和<dd>

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

2.4列表总结

 3.表单标签

3.1为什么需要表单

目的是为了收集用户信息。

3.2表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件和提示信息3部分组成。

3.3表单域

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

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

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

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

常用的属性：

  3.4表单控件

3.4.1<input>表单元素

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

该标签包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式。

<input type="属性值"  />

 <input />标签为单标签

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

input常用属性：

 3.4.2 <label>标签

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

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

语法：

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

 核心：<label>标签的for属性应当与相关元素的id属性相同。

3.4.3 <select>表单元素

多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。

语法：

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

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

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

3.4.4 <textarea>表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时可以使用<textarea>标签。<textarea>用于定义多行文本输入的控件。

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

1.通过<textare>标签可以轻松地创建多行文本输入框。

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

4.综合案例

以下为编写的代码及内容：

 

CSS

1.CSS简介

1.1 HTML的局限性

其只关注内容，很丑，臃肿繁琐。

1.2 CSS-网页的美容师

CSS是层叠样式表的简称，也是一种标记语言，主要用于设置HTML页面中的文本内容、图片外形以及版面的布局和外观显示样式。

简单理解：CSS可以美化HTML、让HTML更漂亮，让页面布局更简单。

总结：

1.HTML主要做结构，显示元素内容。

2.CSS美化HTML，布局页面。

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

 1.3 CSS语法规范

使用HTML时，需要遵从一定的规范，CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。

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

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

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

1.4 CSS代码风格

1.样式格式书写

（1）紧凑型

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

 （2）展开格式

 

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

推荐第二种格式，更直观。

2.样式大小写

h3{
  color: pink;
}

H3{
   COLOR: PINK;
}

推荐使用小写，特殊情况除外。

3.空格规范

h3{
   color: pink;
}

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

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

2.CSS基础选择器

<div>我是div</div>
<div>我是div</div>
<p>我是段落<p>
<ul>
   <li>我是ul里面的小li哦</li>
</ul>
<ol>
   <li>我是ol里面的小li哦</li>
</ol>

2.1CSS选择器的作用

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

以上CSS做了两件事：

1.找到所有的h1标签。选择器（选对人）。

2.设置这些标签的样式，比如颜色为红色（做对事）。

2.2选择器分类

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

基本选择器是由单个选择器组成的

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

2.3标签选择器

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

语法

标签名：{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
    ...
}

作用

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

优点：

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

缺点：

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

2.4类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。

注意

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

（2）可以理解为给这个标签起了一个名字，来表示。

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

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

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

记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

语法：

.类名{
   属性1: 属性值1;
   ...
}

例如，将所有拥有red类的HTML元素均为红色。

.red{
  color:red;
}

语法

结构需要用class属性来调用class类的意思

<div class='red'>变红色</div>

2.4 类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签

简单理解就是一个标签有多个名字。

1.多类名使用方式

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

（1）在标签class属性中写多个类名

（2）多个类名中间必须用空格分开

（3）这个标签就可以分别具有这些类名的样式

2.多类名开发中的使用场景

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

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

（3）从而节省CSS代码，统一修改也非常方便。

以下为相应的练习的代码和结果截图：