整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
1）纯JavaScript下拉框元素是否选中
（2）设置样式
、表单：
网页仅有表单才能接收用户输入信息、并将信息提交到服务器进行处理。
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
二、制作规范的表单
<form name="表单名称" method="提交的方式:get|post" action="处理表单的服务器地址">
一系列的表单对象
提交按钮:<input type="submit" value="提交" name="sum" />
</form>
注意：表单必须要有提交按钮,作用:当点击提交钮时，会自动将表单中的数据提交到表单action属性所指定的地址进行处理.
三、定义表单对象
1.使用input标签定义表单对象
<input type="元素类型" name="表单对象名称" value="表单对象的值">
1.1 type的类型:
text(文本框)、password(密码框)、checkbox(复选框)、radio(单选按钮)
submit(提交按钮)、reset(重置按钮)、file(文件域)、button(按钮)、
image(图片域：具备提交按钮)、hidden(隐藏域)、
date(日期控件:html5新增的)、number(数字调节器:html新增的)
2.使用select标签定义下拉列表
<select name="sel">
<option value="项值">项文本</option>
<option value="研究生">研究生</option>
<option value="本科">本科</option>
....
</select>
3.使用textarea定义文本域:
<textarea cols="80" rows="8">请输入内容</textarea>
四、常用表单对象的属性
1.文本框:
<input type="text" name="uname" value="Admin" maxlength="最大字符数:15" size="文本框长度:10" readonly="只读:readonly"/>
2.设置单选框和复选框的默认选中
checked="checked"属性
3.使用selected属性设置下拉列表的选中项
<option value="本科" selected="selected">本科</option>
来自网络
五、css(Cascading style sheet):级联（层叠）样式表。
1.作用：修饰html标签
2.优势：
内容与表现分离；
网页的表现统一，容易修改；
丰富的样式，使得页面布局更加灵活；
减少网页的代码量，增加网页的浏览速度，节省网络带宽；
运用独立于页面的CSS，有利于网页被搜索引擎收录。
六、在html文档添加css样式的方法。
1.行内样式：使用标签的style属性添加样式
<标签 style="一系列的样式规则">
样式规则的格式:样式属性:样式属性值;
2.内部样式:使用style标签定义样式
<style type="text/css">
一系的样式选择器(选择器必需先定义，后引用)
</style>
注意：通常情况style标签放在head标签中。
2.1基本选择器分类：类选择器、Id选择器、标签选择器
2.2使用类选择器
定义类选择器
.类选择器名{一系列样式}
引用类选择器:使用标签的class属性引用类选择器名称
2.3使用Id选择器
定义id选择器
#id选择器名{一系列样式规则}
引用ID选择器:使用标签的ID属性引用ID选择器名称
2.4定义标签选择器
标签名称{一系列样式规则}
引用标签选择器:当使用该标签时自动套动标签样式
3.外部样式:
外部样式是将一系列样式选择器定义在外部样式文件（**.css）中
3.1在网页使用link标签引用外部样式文件
<link href="index.css" type="text/css" rel="stylesheet" />
七、样式优先级（就近原则）
行内样式>内部样式>外部样式
id选择器>类选择器>标签选择器
八、高级选择器(复合选择器)
1.层选选择器
1.1后代选择器
定义后代选择器
选择器1 选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且选择器存在层次关系
1.2子选择器
定义子选择器
选择器1>选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且选择器存在父子关系
1.3相邻兄弟选择器
定义相邻兄弟选择器
选择器1+选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且相邻的
1.4通用相邻兄弟选择器
定义通用相邻兄弟选择器
选择器1~选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且相邻之后的所有兄弟
2.交集选择器
定义交集选择器
标签选择器类选择器|id选择器
使用：使用标签的同时还引用类或者id选择器
3.并集选择器
定义并集选择器
选择器1,选择器2
使用：使用选择器1 或者 选择器2 都行
九、span标签
文本标签，由内容决定自身大小。
在HTML中，大多数元素都被定义为块级元素或内联元素。
块级元素通常会独立成行，而内联元素会并排显示。
在我们学过的元素中，
块级元素如：<h> <p> <table>这些。
内联元素如<td><a><img>
下面我们通过练习来直观看看他们的区别。
块级元素展示，代码如下：
<body>
<h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
<p>块级元素与内联元素</p>
<p>零基础自学网页制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>如图：
内联元素展示如下
示例代码：这段代码被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>效果如图：
其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。
HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！
熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。
<div>与<span>标签
为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。
<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。
比如这个！
笔者第一个漫画作品
如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样
<div></div>元素的作用就是对页面进行了这样的分割。
实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：
强制为其添加边框分割：
大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。
通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。
这是对块级元素整体改变样式的方法。
但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？
html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：
<p>我有一个<span>梦想</span></p>
通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。
今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
