在html语言中指定单选框时,htmlcss
其实就是用于开发网页的一门语言
关于HTML:
1)HTML开发的网页文档,通常是以 .htm、.html 为后缀
2)HTML开发的网页文档,可以通过浏览器打开并显示(浏览器就是一个HTML解析器)
3)HTML本质就是一个文档(html/txt/word/ppt等)
2、HTML结构
HBuilderX快捷键:
ctrl+鼠标滚轮, 可以放大或缩小字体
ctrl+insert, 可以将鼠标所在的行,或者将鼠标选中的行快速赋值到下方
ctrl+/ 或 ctrl+shift+/, 可以快速生成注释符号
: 用于声明当前文档是一个html格式的网页,并且版本是html5.0版本。
: 根标签,所有的html内容都应该放在根标签内部
: 头部分,用于存放网页的基本属性信息(例如:网页标题,网页的编码,引入的css文件,或JS文件)
: 体部分,用于存放网页的可视化内容
我的第一个网页: 指定网页标签的标题
~: 指定网页内容的标题,例如文章/新闻等标题
: 通知浏览器当前网页使用的编码,如果不指定这一行,网页文件保存使用utf-8,浏览器在打开这个网页时,如果不使用utf-8,就可能会出现乱码问题。
3、HTML语法
二、HTML标签
1、图像标签
img标签可以在网页中插入一幅图像,例如:
其中,src属性: 用于指向图片的路径(相对路径,网络路径)
width属性: 指定图片的宽度
height属性: 指定图片的高度
关于路径问题:
1)不建议写带盘符的绝对路径,因为将来换一个发布环境,这个路径很可能是错的,所以不建议
2)建议写相对路径
./: 表示当前文件所在的位置,可以省略不写
../: 表示当前文件所在目录的上一级目录
表示在当前文件(html)所在的目录找img目录,在img目录下找meinv01.jpg文件
2、超链接标签
a标签用于在网页中实现一个超链接
点击超链接后,会跳转到另外一个位置(网页、图片、下载地址等),例如:
百度一下,你就不知道
其中href属性,用于指向所跳转到的url地址
target属性,用于指向以何种方式打开超链接
_self: 在当前窗口打开超链接
_blank: 在新窗口中打开超链接
3、表格标签
table: 用于定义一个表格,其中可以包含tr标签
tr(table row): 用于定义表格中的行, tr中可以包含td/th
td/th(table data cell): 用于定义表格中的单元格
th(table header cell): 用于定义表头中的单元格,其中的文本默认会加粗并且居中。
colspan属性:设置单元格横跨的列数,例如:
11
colspan="2": 设置当前单元格横跨两列
rowspan属性:设置单元格竖跨的行数
21
rowspan="2": 设置当前单元格竖跨两行
4、表单标签
4.1.表单的作用
表单的作用: 用于向服务器发送数据
向服务器发送数据的两种方式:
1)使用表单向服务器发送数据
表单中往往存在表单项标签(用户名、密码、昵称、邮箱、验证码等),在表单项中可以输入数据,再提交表单就可以将输入的数据提交给相应的服务器。
2)使用超链接也可以向服务器发送数据
http://www.baidu.com?user=张三&age=20&like=篮球
在URL地址后面可以拼接问号,问号之前是url地址,问号之后可以拼接参数,参数包括参数名(user,age,like),和参数值(张三,20,篮球),多个参数之间用&分隔。在输入地址后访问服务器,就可以将地址后面拼接的参数一并带给服务器
4.2.form标签
...
其中action属性:用于指定表单中的数据将会提交到哪个地址。
例如:action属性指向百度服务器的网址,就意味着,表单中的所有数据都会提交到百度服务器。
method属性:指定提交方式,常用提交方式为GET和POST(区别后面会讲到)
如果不指定method,默认是GET提交。
5、表单项标签
1)文本输入框(用户名/验证码/邮箱/昵称)
2)密码输入框(密码/确认密码)
3)单选框(性别/单选题选项)
男
女
4)多选框/复选框(多选题选项/岗位/爱好)
篮球
5)下拉选框(省份/城市/市区选择)
北京市
上海市
广东省
...
6)多行文本输入框
7)按钮/提交按钮
普通按钮本身没有功能,可以通过js为按钮添加功能(比如点击后,换一张图片)
提交按钮用于提交表单,将表单中的数据提交给action属性所指向的服务器
6、注册表单案例
表单项的细节问题:
1)表单项上的name属性有什么作用?
要提交数据的表单项(例如:用户名/密码/性别/爱好/昵称/邮箱/验证码等)都必须得有name属性,如果没有name属性,在表单提交时,该项会被忽略(即无法提交数据)
2)为什么单选框可以多选?
所有单选框的name属性值必须相同,值相同则说明是一个组,一个组中的单选框只能选一个(即单选)
男
女
3)为什么单选框或复选框提交时的值为on?
因为单选框或复选框不像文本输入框,输入在框中的内容就会作为value提交
单选框或复选框不能输入,所以只能通过value属性来指定提交时的值
男
女
篮球
4)如何设置单选框或复选框默认选中某一项?
男
足球
在单选框或复选上可以添加checked属性来设置某一项默认被选中
5)如何设置下拉选框中的某一项默认被选中?
下拉选框默认选中第一项, 如何要设置第一项以外的其它选项默认被选中
可以在option标签上添加一个selected属性。
北京
上海
广州
深圳
6)option标签上的value属性的作用是什么?
例如: 如果"上海"选项被选中,而"上海"的option上面没有value,则会提交city=上海;
如果在"上海"选项上有value属性,在"上海"被选中被提交时,就会提交value属性的值。
北京
上海
广州
深圳
7、音频、视频标签
7.1.音频标签
audio可以在网页中插入音频流
如果您看到这段内容,则说明您的浏览器不支持此标签
src属性: 指定所要插入的音频的url地址
controls属性: 为用户添加播放、暂停、音量控制等插件
autoplay属性: 在音频加载完成后,立即播放(自动播放)
width、height: 设置元素的宽度和高度
7.2.视频标签
video可以在网页中插入视频流
如果您看到这段内容,则说明您的浏览器不支持此标签
src属性: 指定所要插入的视频的url地址
controls属性: 为用户添加播放、暂停、音量控制等插件
autoplay属性: 在视频加载完成后,立即播放(自动播放)
width、height: 设置元素的宽度和高度
7.3.div/span/p标签
div/span/p标签是非常普通的但是又很常用的标签
这三个元素都是容器标签,可以用来包裹其他的标签或者文本
在标签上设置样式,就可以作用在其中的内容上。
文本文本文本
这是一个p元素
div、p:是块元素,默认独占一行,都可以设置宽高
同是块元素的还有: h1~h6,form,table,div,p等
span:是行内元素,多个行内元素可以显示在同一行,不能设置宽高
同是行内元素的还有: span,b,i,u,input,img
CSS总结:
一、CSS概述
1、什么是CSS
CSS:层叠样式表,是用于美化、渲染网页的一门语言
和传统的html标签属性设置样式相比,使用CSS设置样式可以实现:将展示数据的html代码和设置样式的CSS代码进行分离,可以增强网页的展示能力。
2、如何在html中引入CSS
2.1.在标签上的style属性内部添加css样式
这是一个div...
这种方式是将css样式直接写在标签上的style属性内部,只对当前标签有效,无法实现代码的复用,而且容易造成页面结构的混乱,不利于后期的扩展和维护。所以不建议大量使用。
2.2.在head标签内的style标签内部添加css样式
这种方式是将所有的css样式在一个style标签内部统一管理,没有将css代码写在标签上,因此不会造成页面结构的混乱,而且可以实现代码的复用
2.3.通过link标签引入外部的css文件
这种方式是将所有的css代码写在一个css文件中统一管理,真正的实现了: 将html代码和CSS代码进行分离。可以实现代码的复用,也不会造成页面结构的混乱。
推荐使用这种方式(特别是在企业开发中)
二、CSS常用选择器
所谓的选择器,就是可以帮我们在html中选中元素进行修饰的一门技术
1、元素名/标签名选择器
通过元素的名字或者标签的名字选中指定名称的所有标签
格式: 元素名/标签名{ css样式.. }
span{} -- 选中所有的span元素
div{} -- 选中所有的div元素
2、class类选择器
可以在标签上添加一个通用的属性--class,为元素设置所属的分组,class值相同的则为一组, 通过class值可以选中这一组的元素。
格式: .class值{ css样式.. }
.s1{} -- 选中所有class值为s1的元素
另外,一个元素可以同时设置多个class值,例如:
span111
表示当前这个span元素同时属于s1分组和s2分组,如果s1和s2给这个span设置背景(但值不同),写在后面的会覆盖前面的(针对同一类选择器)。
如果是不同类的选择器,例如:使用元素名、类选择器、id选择器选中同一个元素,设置相同的属性,但值不同,优先级顺序是:
id选择器(100)>类选择器(10)>元素名选择器(1)
如果一个选择器中包含多个选择器类别,可以通过权重值相加,权重值大的优先级高
如果权重值相同,书写在后面的会覆盖前面的!
3、id选择器
在标签上可以添加一个通用的属性--id,id是编号,要求在整个网页中是独一无二的。通过id值,可以唯一的选中一个元素。
格式:#id值{ css样式.. }
4、后代选择器
在父选择器选中的元素内部,选中指定的后代元素
格式: 父选择器 后代选择器{ css样式... }
div span{} -- 选中所有div内部的span元素
#d1 p{} -- 选中id值为d1元素内部的p元素
5、属性选择器
可以通过元素的属性或属性值匹配元素
格式: 选择器[属性条件][属性条件]..{ css样式 }
input[type="password"]{} -- 选中所有的密码输入框
input[type="checkbox"]{} -- 选中所有的复选框
div[id]{} -- 选中所有具有id属性的div元素
三、CSS常用属性总结
1、文本、字体相关属性
text-align:设置文本水平排列方式
left(居左,默认)、center(居中)、right(居右)
text-indent:设置文本首行缩进,百分比或像素值
text-shadow:设置字体阴影
letter-spacing:设置字符间隔/间距
font-siz:设置字体大小
font-weight:设置字体粗细,
100~900,bold,bolder,normal
font-family:设置字体,"微软雅黑","宋体","楷体"等
color:设置字体颜色
2、背景相关属性
background是一个综合属性,可以同时设置背景颜色/背景图片/背景图片是否重复/背景图片的位置等
background-color: 设置背景颜色
background-image: 设置背景图片
background-repeat: 设置背景图片是否以及如何重复排列
backgronnd-position: 设置背景图片的位置
backgournd-size: 设置背景图片的大小
3、边框属性
border: 2px solid red; -- 同时设置边框的宽度、样式、颜色
border-width: 2px;
border-style: solid;
border-color: red;
border-radius: 设置圆角边框
4、其他属性
width: 设置元素的宽度
height: 设置元素的高度
--------------------------------
margin: 设置元素的外边距
margin-top: 设置元素的上外边距
margin-left: 设置元素的左外边距
margin-right: 设置元素的右外边距
margin-bottom: 设置元素的下外边距
margin: 10px 20px 30px 40px; /* 上 右 下 左 */
margin: 10px 20px 30px; /* 上 左右 下 */
margin: 10px 20px; /* 上下 左右 */
margin: 10px; /* 上下左右 */
--------------------------------
5、补充内容:颜色取值方式
方式一: 使用颜色的名称(英文单词)
red green blue black yellow pink
方式二: #六位十六进制数(AABBCC==ABC)
#FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF
#F00 #0F0 #00F #000 #FF0 #FFF
方式三: rgb(255,255,255)
rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
四、网页综合实战:京淘登录页面
详细见代码!
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved.
京ICP备09083238号
在html语言中指定单选框时,htmlcss相关推荐
- 使用easypoi和原生poi接口实现导出excel时选中指定单选框
使用easypoi和原生poi接口实现导出excel时选中指定单选框 工程需求:导出excel时,选中指定的单选框 步骤一:在excel模板中插入三个单选框 步骤二:设置单选框的单元格连接 我们发现 ...
- angularjs中的单选框绑定数据注意事项
这里说的是angularjs 1.x 在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定, ...
- 在c语言中引用数组元素时,其数组下标的数据类型允许是什么
在c语言中引用数组元素时,其数组下标的数据类型允许是:整型常量或整型表达式.C语言规定只能逐个引用数组元素而不能一次引用整个数组,数据元素的表示形式为"数组名[下标]",下标可以是 ...
- 【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框 基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
- 我点击一个单选框时另外一个单选框里的内容属性隐藏掉_一个交通工程专业硕士研究生的总结与独白(二):交通生成预测及TransCAD操作...
上一次发表了我的第一篇知乎文章,后来也看了大家的评论,虽然评论不多,但好在大家都比较温柔,没有出现什么所谓的网络暴力,当然也有可能是我这个内容本身也没有太大的话题性.也有小伙伴私聊我说让我多讲讲交通工 ...
- c++语言中如果调用函数时,需要改变实参或者返回多个值,应该采取,C++综合练习题2...
C++程序设计综合练习题(二) 一.单项选择题 1. 静态成员函数没有() A. 返回值 B. this指针 C. 指针参数 D. 返回类型 2. 假定AB为一个类,则执行"AB a(2), ...
- html中表单元素中的单选框,Html表单元素及表单元素详解
大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素--文本框 5.表单元素button 6.表单元素--单选.多选 7.表单元素--select 8.表单元素--textarea ...
- Linux进程调用execve,关于linux:在C语言中使用execve loader时子进程如何终止
我是C语言的初学者,我在理解C语言中的execve函数以调用一个子进程来加载和运行可执行对象文件时感到很挣扎. 我们知道execve仅在出现诸如找不到文件名之类的错误时才返回到调用程序,因此它被调用一 ...
- C语言中使用scanf函数时应注意的问题
[注意事项] scanf 函数的一般形式: scanf(格式控制, 地址列表): 如果在格式控制字符串中除了格式声明以外还有其他字符,则在输入数据时在对应的位置上应输入与这些字符相同的字符. 例如,对 ...
最新文章
- 鸿蒙系统开发者公测,公测尝鲜开启!华为Mate40/P40开始和安卓渐行渐远
- SAP UI5 初学者教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter) 试读版
- Multisim14仿真入门笔记
- MyBatis.Net 学习手记
- linux 下清空回收站命令
- 云网管—云上构建网络自动化体系
- GBDT和XGBoost
- 利用Kubernetes名称空间来管理内存和CPU资源(二)
- JavaTPoint 数据科学和人工智能中文教程【翻译完成】
- 【读书笔记】【独立思考】2018-04-03(2)
- 【ZJOI 2018】 历史(lct)
- C#【必备技能篇】注册dll+批量注册dll
- Java 版本6下载大全
- linux系统怎么修改数据库密码,Linux系统修改数据库密码相关
- 初中英语语法(014)-现在完成时
- VS编译器下一个源文件出现多个mian函数
- 浅谈计算机专业的毕业生如何提高自身素质
- 优享短视频训练营:这些好用的视频剪辑APP,你知道吗?
- 新产品如何推广?推广新产品的方法和技巧
- ZOJ 2975-K - Kinds of Fuwas-暴力+bitset
热门文章
- Android6.0 Sensor架构和问题分析
- 鼠标悬停之hover选择器
- 深圳Java培训学习:Java8.0新特性之Lambda表达式--【千锋】
- Error:java: java.lang.OutOfMemoryError:insufficient memory,Java heap space, GC overh
- 解决SSH连接不上的问题
- 议程公布!2021年MongoDB中文社区杭州大会
- 百度视频发布年度大数据报告 揭晓热播影视综艺动漫
- 盈亏计算html,外汇交易中如何计算盈亏? -
- 永久免费VPS推荐:Evolution Host 最高可得4H/4G/80G/1G带宽
- 为什么登陆研招网显示服务器错误,研招网崩溃,研究生考试预备报名第一天,考生一起挤爆服务器...