javaweb实训第一天上午——HTML和CSS（2)-阿里云开发者社区

javaweb实训第一天上午——HTML和CSS（1)https://developer.aliyun.com/article/1414801

4.7 列表标签

列表标签分为有序列表与无序列表：

4.7.1无序列表

代码格式

    <!-- 
    代表一个列表标签 ul，li都是快标签
    ul：是一个无序列表
    注意：ul里面只能放li，li里面可以放随便元素 
-->
<ul>
    <li>淘气喜羊羊</li>
    <li>臭美美羊羊</li>
    <li>舔狗沸羊羊</li>
</ul>

注意：无序列表的嵌套

<ul>
    <li>淘气喜羊羊</li>
    <li>臭美美羊羊</li>
    <li>舔狗沸羊羊</li>
    <li>其他
        <ul>
            <li>我会回来灰太狼</li>
            <li>时好时坏包大人</li>
        </ul>
    </li>
</ul>

4.7.2 有序列表

格式（所有的格式和ul是完全一致的）

   <!-- 
    代表一个列表标签 ul，li都是快标签
    ul：是一个无序列表
    注意：ol里面只能放li，li里面可以放随便元素 
-->
<ol>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ol>

4.7.3定义列表（dl、dt、dd）

<dl>
    <dt>名词</dt>
    <dd>名词的解释</dd>
 </dl>
<dl>
    <dt>英雄联盟</dt>
    <dd>一款竞技游戏</dd>
    <dt>王者荣耀</dt>
    <dd>一款手游</dd>
</dl>

4.8 表格标签

表格的组成：固定的列与可变的行组成

table,tr,td(td里面可以放任何元素)

th(表头使用，效果为加粗居中)

thead,tbody,tfoot（表格的结构标签）

完成一个最简单的表格

一行一列

 <!-- 代表他是一个表格 -->
    <table>
        <!-- tr 代表行 -->
        <tr>
            <!-- td 代表列 -->
            <td></td>
        </tr>
    </table>

注意：

1 表格默认是没有边框的(加上边框在table框架里用border属性)

2 它的宽和高默认是由里面的内容决定

3 所有行里面的列必需保证一致(下图为错误演示)

4 如果一个格子没有内容，请加上& nbsp;

今天会用到的一个属性：cellspacing:将单元格合并

th标签

    <table>
        <tr>
            <th>用户名 </th>
            <th>概况 </th>
            <th>性别 </th>
            <th>爱好 </th>
        </tr>
        <tr>
        <td>灰太狼红太狼</td>
        <td>夫妻</td>
        <td>555</td>
        <td>只能吃草</td>
    </tr>
    <tr>
        <td>山东菏泽曹县</td>
        <td>牛皮</td>
        <td>666</td>
        <td>我的宝贝</td>
    </tr>
    </table>

table中的跨行与跨列：

跨行（rowspan）：

    <table border="1px" width="500px" cellspacing="0">
        <tr>
            <td rowspan="2">山东菏泽曹县</td>
            <td>牛皮666</td>
            <td>我呢宝贝</td>
        </tr>
        <tr>
            <td>钵钵鸡</td>
            <td>真香</td>
        </tr>
     </table>

跨列（colspan）

  <!-- 
     跨列使用的属性是colspan
     它一样放在td里面
     如果进行跨列，那么它对应的位置(列)去删除一个格子
      -->
    <table border="1px" width="500px" cellspacing="0">
        <tr>
            <td colspan="3"> <center>山东</center> </td>
        </tr>
        <tr>
            <td>菏泽曹县</td>
            <td>牛皮666</td>
            <td>我呢宝贝</td>
        </tr>
    </table>

4.9特殊符号

我们来了解一下一个标签他的名字是 <b>，主要用能是加粗

发现没有了！！！
问题是，我们怎么在页面上把显示出来？？
这种情况我们就需要用到特殊符号：

4.1 form表单

表单的主要功能：可以让我们和用户进行交互

4.10.1 form表单

<form action="#" method="get"></form>

4.10.2 input标签

默认就是一个普通的文本框

标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。

name name名定义input元素的名称

value 任何字符控件初始显示的文字内容（数据）

size 整数定义输入字段的宽度

maxlength 整数规定输入字段中的字符的最大长度

checked checked 指定控件处于被选取状态，此布尔属性仅适用于type属性设置为radio或checkbox时生成的控件

注意：readonly会向后台提交数据 disabled不会向后台提交数据

readonly readonly 指定控件处于只读状态

disabled disabled 当 input 元素加载时禁用此元素

input标签属性的值type 预定义值规定 input 元素的类型。

text 单行文本输入框

password 密码输入框

checkbox 复选框

radio 单选框

submit 提交按钮

reset 重置按钮

image 图片提交按钮

src URL type属性设置为image时，此属性指定图片来源，此图片用于修饰图形化的提交按钮

button 普通按钮

hidden 隐藏控件

file 文件选择控件

4.10.3select

select：选择标签 -->格式如下（不要忘记了 name属性）

   <select name="chensghi" id="">
        <option value="1">曹县</option>
        <option value="1">北京</option>
        <option value="1">上海</option>
        <option value="1">广州</option>
        <option value="1">纽约</option>
    </select>

<select name="chensghi" id="" multiple>

注意的地方：

当有value的时候，传将value传到后台

没有value的时候，将它显示的内容传到后台

4.10.4 textarea标

简介：

Rows: 代表行（多少个字符）

Cols:代表列（多少个字符）

注意中间什么都不加

下面为表单元素的内容演示与解释

<!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>textarea标签</title>
</head>
<body>
    <!-- 
    input是一个表单元素
    type：当type时不同的值的时候，他的类型，显示方式都是不一样的
    text 单行文本输入框 <input type=“text” />
    password 密码输入框 <input type=“password” />
    checkbox 复选框 <input type=“checkbox” />
    radio 单选框 <input type=“readio” checked=“checked” />
    submit 提交按钮 <input type=“submit” value=“提交” />
    reset 重置按钮 <input type=“reset” value=“重置” />
    image 图片提交按钮 <input type=“image” src=“URL” />
    src URL type属性设置为image时，此属性指定图片来源，此图片用于修饰图形化的提交按钮
    button 普通按钮 <input type=“button” value=“普通按钮” />
    hidden 隐藏控件 <input type=“hidden” name=“” value=“” />
    file 文件选择控件 <input type=“file” name=“” /> 
    -->
    <form action="#" method="GET">
        <input type="hidden" value="id">
        用户名：<input type="text" name="uname" value="曹县小伙" readonly="readonly"><br>
        昵称：<input type="text" name="username" maxlength="5"><br>
        密码：<input type="password" name="pwd"><br>
        爱好：<input type="checkbox" name="likes" checked="checkde" value="干饭">干饭
        <input type="checkbox" name="likes" checked="checkde" value="装逼">装逼
        <input type="checkbox" name="likes" checked="checkde" value="喊666">喊666
        <input type="checkbox" name="likes" checked="checkde" value="老铁没毛病">老铁没毛病
       <br> 性别：<input type="radio" name="sex" checked = "checkde">男<input type="radio" name="sex" checked = "checkde">女<br>
        国籍：<select name="gj" multiple id="">
            <option value="1">中国</option>
            <option value="2">美国</option>
            <option value="3">加拿大</option>
        </select>
        头像：<input type="file" name = "heading"><br>
        简介：<textarea name="intro" id="" cols="30" rows="10"></textarea>
        <input type="reset" value="重置">
        <input type="submit" value="注册">
    </form>
</body>
</html>

5 CSS

5.1 认识CSS

5.1.1 WEB标准介绍

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）html、表现（Presentation）css和行为（Behavior） js。

内容，结构，表现和行为

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）html、表现（Presentation）css和行为（Behavior） js。

内容，结构，表现和行为

1.内容：就是制作者放在页面内真正想要让访问者浏览的东西(内容为王)

2.结构：使内容更加更加具有逻辑性与易用性

3.表现：用于修饰内容的外观的样式的东西称为表现

4.行为：对内容的交互及操作效果，如通过javascript判断表单的提交等

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

ECMAScript：javascript ,actionscript(flash)

WEB标准的目的

在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容

结构 HTML

样式CSS

行为JS

5.1.2 什么是CSS

CSS是(Cascading Style Sheets)层叠样式表的缩写，简称样式表。

网页设计者使用CSS可以定义元素的样式，包括字体，颜色及其它的高级样式。

5.1.3 为什么要使用CSS

采用标准的优点：

1.提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的尽寸。

2.缩短改版时间，将表现与内容相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万个网页。

3.降低网站流量的费用。带宽要求降低(代码更简洁),成本更低

4.理想容易被搜寻引擎搜索到。提高网站在百度或google中的排名

5.内容能被更广泛的设备所访问。包括屏幕阅读机，手持设备，搜索机器人，打印机，电冰箱等等。

5.2 CSS入门

5.2.1 写第一个SCC样式

<!-- 
所有的标签都有style属性, 这个属性代表的就是修改当前这个元素的样式
    color:前景色(字体颜色)  font-weight:加粗    font-size：字体大小
   -->
<span style="color:red; font-weight: bold; font-size: 120px;">想要变成红色加粗</span>

5.2.2 CSS的语法

单个：样式属性名：样式属性值 ; 比如 color:red;

多个：样式属性名：样式属性值 ; 样式属性名：样式属性值 ;

比如 color:red;font-size:120px;

示例：

5.2.3 CSS属性

在格式声明语句中，属性名称与属性值之间以冒号“：”隔开，属性值不需要使用引号括起来，除非属性值是由多个单词组成。

有的属性可以指定多个属性值，多个属性值间以“,”隔开。

当定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。

如果值为若干单词，则要给值加引号： p {font-family: "sans serif";}

5.2.4 CSS中的注释

/* 注释的内容  */

5.2.5 注意事项

注意1：一个CSS样式表由一个或多个规则组成；

每一条格式声明语句由“属性名:属性值”对组成，属性名和属性值间以冒号隔开，每条声明语句以分号“;”结束。

注意2：CSS对大小写不敏感。（大家尽量都用小写）

5.3 选择器

5.3.1 什么是 CSS选择器

Css选择器：把设置的“样式”作用于网页中的哪些元素；就是使用选择器

5.3.2选择器的写法与格式

5.3.3 基本选择器

*（所有，全部）

*通用选择器

/*通用选择器*/
*{
    color: red;
}

通用选择器一般我们不会使用，因为它会对页面上所有的元素的样式进行渲染，这样就会使页面的渲染速度变慢。

标签选择器

如果所有的(或者说大部分的)标签都要使用某一个样式,那么我们可以全用标签选择器

*{
    color: red;
}
/* 标签选择器  */
div{
    width: 300px;
    background-color: red;
}
input{
    width: 300px;
}
h1{
    font-size: 10px;
}

javaweb实训第一天上午——HTML和CSS（3)https://developer.aliyun.com/article/1414813?spm=a2c6h.13148508.setting.24.4d4d4f0erzCTC6

javaweb实训第一天上午——HTML和CSS（2)

4.7 列表标签

4.7.1无序列表

4.7.2 有序列表

4.7.3定义列表（dl、dt、dd）

4.8 表格标签

4.9特殊符号

4.1 form表单

4.10.1 form表单

4.10.2 input标签

4.10.3select

4.10.4 textarea标

5 CSS

5.1 认识CSS

5.1.1 WEB标准介绍

5.1.2 什么是CSS

5.1.3 为什么要使用CSS

5.2 CSS入门

5.2.1 写第一个SCC样式

5.2.2 CSS的语法

5.2.3 CSS属性

5.2.4 CSS中的注释

5.2.5 注意事项

5.3 选择器

5.3.1 什么是 CSS选择器

5.3.2选择器的写法与格式

5.3.3 基本选择器

*通用选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

javaweb实训第一天上午——HTML和CSS（2)

4.7 列表标签

4.7.1无序列表

4.7.2 有序列表

4.7.3定义列表（dl、dt、dd）

4.8 表格标签

4.9特殊符号

4.1 form表单

4.10.1 form表单

4.10.2 input标签

4.10.3select

4.10.4 textarea标

5 CSS

5.1 认识CSS

5.1.1 WEB标准介绍

5.1.2 什么是CSS

5.1.3 为什么要使用CSS

5.2 CSS入门

5.2.1 写第一个SCC样式

5.2.2 CSS的语法

5.2.3 CSS属性

5.2.4 CSS中的注释

5.2.5 注意事项

5.3 选择器

5.3.1 什么是 CSS选择器

5.3.2选择器的写法与格式

5.3.3 基本选择器

*通用选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景