四川龙网

  1. 首页 > 生活知识 > >

HTML双日期时间控件 HTML时间选择器怎么将日历变大

生活百科

HTML及CSS选择器

  • 一、html基本结构
  • 二、html标签
    • 1、标题标签
    • 2、a标签
    • 3、img标签
    • 4、div和span标签
    • 5、列表标签
    • 6、表格标签
    • 7、form表单
    • 8、select下拉框标签
    • 9、textarea标签
  • 三、CSS
    • 1、css样式引入方式
    • 2、标签嵌套
    • 3、css选择器
一、html基本结构html是一种超文本标记语言 ， 进行网页页面的文本编辑
html注释写法：<!–注释内容–>
基本结构如下：
<!DOCTYPE html><!--文档声明--><htmllang="en"><!--lang="en"表示语言--><head><!--头部信息：网站的配置信息--> <meta charset="UTF-8"><!--解码方式--> <title>我是标题</title><!--网站标题--></head><body></body><!--body体：网站显示内容--></html>
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
link图标：
标题图标：
写法：<link rel=“icon” href=http://www.wokk.cn/“图片路径”>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><link rel="icon" href="http://www.wokk.cn/timg.jpeg"></head><body></body></html>
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
二、html标签标签写法分类：
1、全封闭标签，如<h1>xxx</h1>
标签属性：<h1 xx=“ss”>xxx</h1> xx:属性名 ss:属性值
2、自封闭标签：<meta charset=“UTF-8”>
1、标题标签<h1></h1>-<h6></h6>：表示一级标题到六级标题
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title></head><body>公司<b>Asir</b><!--加粗--><s>Bsir</s><!--加划线--><h1>小王</h1><h2>小李</h2><h3>小赵</h3><h4>小<br>胡</h4> <!--<br>换行--><hr><!--<hr>加分割线--><h5>小周</h5><h6>小李</h6></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
2、a标签跳转对应网址的页面
未访问之前是蓝色字体，访问后变紫色
# 要a标签的效果，但不刷新或跳转页面：
<a href=http://www.wokk.cn/”#”>xxx
<a href=“javascript:void(0);”>xxx</a>
锚点：
页面内容进行跳转
标签设置id属性=值(xx),a标签href属性的值写法href=http://www.wokk.cn/’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title></head><body><div id="top">顶部位置</div><!--设置锚点--><a>公司</a><a href="">potal</a><a href="http://www.baidu.com" target="_blank">百度</a><!--_blank表示在新标签页打开--><a href="http://www.wokk.cn/#">potal</a><a href="javascript:void(0);">potal</a><a href="http://www.wokk.cn/#top">回到顶部</a><!--返回锚点--></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
可通过第二个按钮跳转到百度：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
3、img标签img标签：页面插入图片
src属性：图片路径 必须写
alt属性：图片加载失败或者正在加载时提示的内容
title属性：鼠标悬浮时显示的内容，不是img标签独有的
width：设置图片宽度（建议用css设置）
height：设置图片高度（建议css设置）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title></head><body><img src="http://img.sichuanlong.com/231226/091212J36-5.jpg" alt="图片未成功加载" title="清新办公" width="300" height="500"><img src="http://img.sichuanlong.com/231226/091212K38-6.jpg" alt="图片未成功加载" title="未闻花名"><img src="http://www.wokk.cn/timg.jpeg" alt="图片未成功加载" title="未闻花名2" width="1000" height="500"></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
4、div和span标签没有任何文本修饰效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title></head><body><span>小王</span><p>小李</p><span>小文</span><div>小林</div></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
扩展：标签分类
块级标签(行外标签)：独占一行，h1-h6、p、br、hr、div、ul、li
块级标签可以包含内联标签 ， 以及某些块级标签
内联标签(行内标签)：不独占一行，img/a/span，只能包含内联标签 ， 不能包含块级标签
5、列表标签1）ul标签：
写法：
<ul type="none"> <li>内容1</li> <li>内容2</li> ......<ul>【HTML双日期时间控件 HTML时间选择器怎么将日历变大】2）ol标签
写法：
<ol type="指定标注种类" start="指定标注起始值"> <li>内容1</li> <li>内容2</li> ......</ol>3）dl标签
<dl> <dt>无空位内容</dt> <dd>有空位内容<dd> ......</dl>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
6、表格标签可以在网页中生成表格
写法：
<table border="表框粗细" cellpadding="表格大小" cellspacing="表线宽度"> <thead><!--表头信息--><tr><th>表头1</th><th>表头2</th>...</tr> <thead> <tbody><!--body--><tr><td>内容1</td><td>内容2</td>...</tr> </tbody></table>colspan：横行合并
rowspan：纵列合并
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title></head><body><table border="1" cellpadding="10" cellspacing="8"><thead><!--表头信息--><tr><th>名称</th><th>年龄</th><th>爱好</th></tr></thead><tbody><!--body--><tr><td>小王</td><td>18</td><td>篮球</td></tr><tr><td rowspan="2">小李</td><td>20</td><td>游泳</td></tr><tr><td colspan="2">小王</td></tr></tbody></table></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
7、form表单<form action="http://127.0.0.1:8001"></form>action属性：指定提交路径 ， 提交到哪里去
form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径
input标签 输入框：
input标签，如果要提交数据，一定要写name属性
<input type=“text”> 普通文本输入框
<input type=“password”> 密文输入框
<input type=“submit” value=http://www.wokk.cn/“登陆”> 提交按钮 触发form表单提交数据动作
<input type=“reset”> 重置按钮 清空输入内容
<input type=“button” value=http://www.wokk.cn/“注册”> 不会触发form表单提交数据的操作
<input type=“date”> 时间日期输入框
<input type=“file”> 文件选择框
<input type=“number”> 纯数字输入框
单选框：
<input type=“redio”>
多选框：
<input type=“checkbox”>
单选框和多选框请务必加name属性和value默认值
单选和多选value默认值可将存储的数据变短
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标签</title></head><body><form action="http://127.0.0.1:8001"><div><h1>欢迎来到xxx公司</h1>用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex" value="http://www.wokk.cn/0">女<input type="radio" name="sex" value="http://www.wokk.cn/1">男<br>爱好：<input type="checkbox" name="hobby" value="http://www.wokk.cn/1">篮球<input type="checkbox" name="hobby" value="http://www.wokk.cn/2">足球<input type="checkbox" name="hobby" value="http://www.wokk.cn/3">乒乓球<br><input type="reset"><br><hr>数字：<input type="number"><br><input type="date"><br><input type="file"><br><input type="submit" value="http://www.wokk.cn/点击确认"></div></form></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
8、select下拉框标签<select name="属性"> <option value="http://www.wokk.cn/默认值"></select>示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标签</title></head><body>选择性别：<select name="sex"><option value="http://www.wokk.cn/0">男</option><option value="http://www.wokk.cn/1">女</option></select><br>喜欢的明星：<select name="star" multiple><!--允许多选--><option value="http://www.wokk.cn/1">明星1</option><option value="http://www.wokk.cn/2">明星2</option><option value="http://www.wokk.cn/3">明星3</option></select></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
9、textarea标签多行文本输入框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标签</title></head><body><span>请输入内容：</span><br><textarea name="message" cols="30" rows="10"></textarea></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
三、CSS1、css样式引入方式第一种：
直接在头部添加<style>引入：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><style>span{width:100px;height:100px;background-color:navajowhite;}div{width:100px;height:50px;background-color:red;}</style></head><body><div>hello</div><span>How are you?</span></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
第二种：
外部文件引入
<link rel=“stylesheet” href=http://www.wokk.cn/“css文件路径”>
html文件：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><link rel="stylesheet" href="http://www.wokk.cn/css.css"></head><body><div>hello</div><span>How are you?</span></body></html>css文件：
span{width:100px;height:100px;background-color:navajowhite;}div{width:100px;height:50px;background-color:red;}页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
第三种：
内联样式：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><link rel="stylesheet" href="http://www.wokk.cn/css.css"></head><body><div style="background-color:red;weight:100px;height:100px">hello</div><span style="background-color:wheat">How are you?</span></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
块级标签能够设置高度宽度，能够嵌套某些块级标签和内联标签，p不能嵌套块级标签 ， 也不能嵌套p标签
内联标签不能设置高度宽度 ， 它的高度宽度由内容来决定，只能嵌套内联标签
2、标签嵌套<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title></head><body><div><span>hello</span></div><p><p>how old are you?</p></p></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
3、css选择器
  1. 元素选择器：
    标签名称{css属性:值}
  2. id选择器：
    html写标签时：
<div id="d1">内容</div><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><style>#d1{width:100px;height:100px;background-color:red}#d2{background-color:wheat;}</style></head><body><div id="d1">你好啊</div><span id="d2">最近还好吗</span></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
3）类选择器
class后面跟类，表示一类，可统一改渲染效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><style>.c1{width:100px;height:100px;background-color:red}</style></head><body><div id="d1" class="c1">你好啊</div><span id="d2" class="c1">最近还好吗</span></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
4）属性选择器
可自定义属性选择
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><style>[ss]{width:100px;height:100px;background-color:red}[ss="dd"]{background-color:wheat;}</style></head><body><div id="d1" class="c1" ss="xx">你好啊</div><span id="d2" class="c2" ss="dd">最近还好吗</span></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
  1. 后代选择器
    加>为子代选择器，只渲染子代，不加为后代选择器，子代及所有后代皆渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><style>#d1 > span{width:100px;height:100px;background-color:red}.c2 .c4{background-color:wheat;}</style></head><body><div id="d1" class="c1" ss="xx"><span id="d3" class="c3">hello</span></div><div id="d2" class="c2" ss="dd"><span class="c4">how old are you?</span></div></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
6）组合选择器
后代选择器用逗号组合：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我是标题</title><style>#d1 span,#d2 span{width:100px;height:100px;background-color:red}</style></head><body><div id="d1" class="c1" ss="xx"><span id="d3" class="c3">hello</span></div><div id="d2" class="c2" ss="dd"><span class="c4">how old are you?</span></div></body></html>页面效果：
HTML双日期时间控件 HTML时间选择器怎么将日历变大

文章插图
建议收藏，不然刷着刷着就可能找不到了 。


    以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

    「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：


    上一篇：ps重启设置全部复位 ps如何恢复默认设置快捷键

    下一篇：自带flash的浏览器卸载方式 flash卸载工具是哪个