位置: IT常识 - 正文

前端(一)-Html(html前端开发教程)

编辑:rootadmin
1、网页基本信息 | <!DOCTYPE html> | 浏览器使用的规范 | | | | | <head> | 网页头 | | <body> | 主体部分 | | <meta> | 元数据 | meta的name属性(了解) | Keyword(关键字) | 为搜索引擎提供的关键字列表 | | | ... 1、网页基本信息<!DOCTYPE html>浏览器使用的规范<head>网页头<body>主体部分<meta>元数据

推荐整理分享前端(一)-Html(html前端开发教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html&js+前端,前端 html,html5前端,html&js+前端,html前端开发教程,前端 html,前端 html,html5前端,内容如对您有帮助,希望把文章链接给更多的朋友!

meta的name属性(了解)

Keyword(关键字)为搜索引擎提供的关键字列表Description(简介)description用来告诉搜索引擎你的网站主要内容author(作者)标注网页的作者copyright(版权)标注版权generator说明网站采用什么编辑器制作。2、网页基本标签<h1></h1> ...<h6></h6>标题标签,序号越小字体越大<P></p>段落标签<br/>换行标签<hr/>水平线<strong></strong>字体加粗<em></em>斜体3、特殊符号&nbsp;空格&gt;大于号 >&lt;小于号 <&apos;单引号'&quot;双引号“&copy;@版权符号&amp;和&4、块元素与行内元素块元素:独占一行,比如:段落标签(p),标题标签(h1~h6),自带换行;行内元素,可以在一行写多个的标签,靠内容撑开宽度;(a,strong,em...)

注意:块元素可以嵌套多个行内元素标签,但行内元素不能嵌套块元素,会改变行内元素的布局,且标签之间不可以交叉;

5、图像标签<img src="https://www.cnblogs.com/xiaoqigui/p/img/girl01.png" alt="动漫女孩" title="小女孩" width="200px" height="300">scr图片的资源路径alt图片显示不时显示此文字title标悬停图片显示文字width宽度hight高度6、链接标签

超链接标签,a,是对标签,也是行内元素 ,可以链接到任意可以访问的资源,标签可以使用文本或者图片;

<a href="https://www.baidu.com" target="_blank">百度</a> <br/>href资源路径target在页面打开资源还是新页面

target

target="_self"本页面打开资源target="_blank"新页面打开资源6.1 页面链接<a href="https://www.baidu.com"">6.2 锚链接 (例如回到顶部功能)

本页面的锚链接跳转 (回到顶部)

<!--目标位置:<a href="#" name="目标位置的名字"><a href="#目标位置的名字">--><a href="#" name="head_a">顶部</a>...<a href="#head_a">回到顶部</a>

不同页面的锚链接跳转(跳转到指定页面的指定位置)

<!--目标位置:<a href="#" name="目标位置的名字">demo10.html--><a href="#" name="footer"></a><!--<a href="https://www.cnblogs.com/xiaoqigui/p/%E7%9B%AE%E6%A0%87%E9%A1%B5%E9%9D%A2#%E7%9B%AE%E6%A0%87%E4%BD%8D%E7%BD%AE"></a>demo09.html--><a href="https://www.cnblogs.com/xiaoqigui/p/demo10.html#footer">跳转到demo10的底部</a>6.3 功能链接<a href="mailto:2663092414@qq.com">功能链接 联系我们</a>6.4 内联框架

iframe 单页面内联

<!--src:引用页面地址name:框架标识名--><iframe src="https://www.cnblogs.com/xiaoqigui/p/path" name="mainFrame" ></iframe>

iframe属性(实现页面间的相互跳转)

<!--在被打开的框架上加name属性--><iframe name="mainFrame"></iframe>在超链接上设置target目标窗口属性为希望显示的框架窗口名<a href="https://www.baidu.com/" target="mainFrame">加载</a>7、列表7.1 无序列表<h2>无序列表</h2><ul> <li>行宫</li> <li>登黄鹤楼</li> <li>相思</li> <li>静夜诗</li></ul>行宫登黄鹤楼相思静夜诗7.2 有序列表<h2>有序列表</h2><ol> <li>行宫</li> <li>登黄鹤楼</li> <li>相思</li> <li>静夜诗</li></ol>行宫登黄鹤楼相思静夜诗7.3 自定义列表<h2>自定义列表</h2><dl> <dt>王维</dt> <dd>相思</dd> <dd>杂诗</dd> <dt>李白</dt> <dd>静夜诗</dd></dl>王维相思杂诗李白静夜诗8、表格8.1 基本标签<table> </table>表标签<tr> </tr>行标签<th></th>表头标签<td></td>列标签8.2 表格一些属性align="center"居中border="1px"边框粗细cellspacing="0"表格间隙width="90%"长度8.3 跨行跨列rowspan="x"跨行clospan="x"跨列

案例

<!--CSS中等价于cellspacing="0" 的属性border-collapse: collapse;border-spacing:0;--><table border="1px" align="center" width="90%" cellspacing="0"> <tr align="center"> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>操作</th> </tr> <tr align="center"> <td>001</td> <td>张三</td> <td>18</td> <td rowspan="2">KH96</td> <td><a href="#">修改</a>&nbsp;<a href="#">删除</a></td> </tr> <tr align="center"> <td>002</td> <td>李四</td> <td>20</td> <!-- <td>KH96</td> --> <td><a href="#">修改</a>&nbsp;<a href="#">删除</a></td> </tr> <tr align="center"> <td colspan="5"> <a href="#">首页</a> <a href="#">上一页</a> <a href="#">下一个</a> <a href="#">尾页</a> </td> </tr></table>学号姓名年龄班级操作001张三18KH96修改| 删除002李四20修改|删除首页上一页下一个尾页9、媒体元素9.1 音频<!--src:指定要播放的视频文件的路径controls:提供播放、暂停和音量的控件autoplay:自动播放属性loop:视频的循环播放--><video src="https://www.cnblogs.com/xiaoqigui/p/%E8%A7%86%E9%A2%91%E8%B7%AF%E5%BE%84" controls autoplay></video>9.2 视频<!--src:指定要播放的音频文件的路径trols:提供播放、暂停和音量的控件--><audio src="https://www.cnblogs.com/xiaoqigui/p/%E9%9F%B3%E9%A2%91%E8%B7%AF%E5%BE%84" controls autoplay></video>10、表单10.1 method

规定如何发送表单数据常用值:get post 在实际网页开发中通常采用post方式提交表单数据;

get不安全,在搜索栏提交,有大小限制post安全,在请求体中提交,没有大小限制10.2 action

表示向何处发送表单数据;

10.3 表单元素10.3.1 text 文本框<!--type="text"name:文本框名称(必填)value:文本框初始值size:文本框长度maxlength:文本框可输入最多字符--><input type="text" name="userName" value="用户名" size="30" maxlength="20"/>10.3.2 password 密码框前端(一)-Html(html前端开发教程)

向密码框中输入字符时,显示的效果,密码字符以黑色实心的圆点来显示。

<!--type="password"name:密码框名称(必填)size:密码框长度--><input type="password" name="pass" size="20"/>10.3.3 单选按钮

同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥;

<!--type="radio"name:单选框名称(必填),一组的名称需要相同checked:单选按钮选中状态value:单选框的值--><input name="gen" type="radio" value="男" id="nan"/><label for="nan">男</label><input name="gen" type="radio" value="女" id="nv"/><label for="nv">女</label><!-- label点击文字的时候也可以选中 -->10.3.4 checkbox复选框

同一组复选框,根据需要可设置name属性值相同;

<!--type="checkbox"name:复选框名称(必填),一组的名称需要相同checked:复选按钮选中状态value:复选框的值--><input type="checkbox" name="interest" value="sports"/>运动<input type="checkbox" name="interest" value="talk" checked />聊天<input type="checkbox" name="interest" value="play"/>玩游戏10.3.5 select下拉列表

希望在页面加载时有默认选中的选中项,则必须使用selected属性,如果没有默认选中项则第一个选项 默认被选中;

<!--select:下拉列表框--><!--option:选项--><select name="列表名称" size="行数"><option value="选项的值" selected="selected">…</option ><option value="选项的值">…</option ></select>10.3.6 按钮<!--重置按钮--><input type="reset" name="butReset" value="reset按钮"><!--提交按钮--><input type="submit" name="butSubmit" value="submit按钮"><!--普通按钮--><input type="button" name="butButton" value="button按钮"/><!--图片按钮--><input type="image" src="https://www.cnblogs.com/xiaoqigui/p/images/login.gif" />10.3.7 textarea多行文本框<!--textarea:多行文本域cols:显示的列数rows:显示的行数--><textarea name="showText" cols="x" rows="y">文本内容 </textarea>10.3.8 file文件域

在表单中使用文件域时,必须设置表单的“enctype”编码属性为“multipart/form-data”,表示将表单数据 分为多部分提交。

<!--- enctype:表单编码属性 --><form action="" method="post" enctype="multipart/form-data"><p><!--type="file" 文件域--><input type="file" name="files" /><input type="submit" name="upload" value="上传" /></p></form>10.3.9 email邮箱

会自动验证Email地址格式是否正确;

邮箱:<input type="email" name="email"/>10.3.10 url网址

会自动验证URL地址格式是否正确;

请输入你的网址:<input type="url" name="userUrl"/>10.3.11 number数字min:最小值max:最大值step:步长value:默认值请输入数字:<input type="number" name="num" value="18" min="0" max="100" step="10"/>10.3.12 range滑块

type值为range即为滑块。

请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/>10.3.13 search搜索框

type值为search即为搜索框。

请输入搜索的关键词:<input type="search" name="sousuo"/>10.3.14 color颜色喜欢的颜色:<input type="color" name="userColor">10.3.15 日期时间10.3.15.1 dd/MM/yyy<input type="date" />10.3.15.2 yyyy年第xx周<input type="week" />10.3.15.3 yyyy年MM月<input type="month" />10.3.15.4 mm:ss<input type="time" />10.3.15.5 dd/MM/yyyy HH:mm:ss<input type="datetime-local" />10.4 表单的高级应用10.4.1 hidden隐藏域

在浏览器中看不到隐藏域,但是在提交表单时可以看到隐藏域的内容被提交至服务器

<input type="hidden" value="666" name="userid">10.4.2 只读、禁用<!--讲解只读和禁用的语法,强调不能单写readonly或disabled,必须写readonly=”readonly”和disabled=“disabled”,介绍只读和禁用的使用场合--><input name="name" type="text" value="张三" readonly><input type="submit" disabled value="保存" >10.4.3 表单元素的标注,增强鼠标的可用性

增强鼠标的可用性,自动将焦点转移到与该标注相关的表单元素上

<!--它的for属性对应的id与表单元素id一致--><label for="male">标注的文本</label><input type="radio" name="gender" id="male"/>10.5 表单初级验证的方法10.5.1 placeholder

提示语默认显示,当文本框中输入内容时提示语消失;

<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>10.5.2 required

规定文本框填写内容不能为空,否则不允许用户提交表单;

<input type="text" name="username" required/>10.5.3 pattern

用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单;

<input type="text" name="tel" required pattern="^1[358]\d{9}" />11、页面结构元素11.1结构标签header页面或页面中某一区块的页眉,通常是一些引导和导航信息nav可以作为页面导航的连接组section页面中的一个内容区块,通常由内容及其标题组成article代表一个独立的,完整的相关内容块,可独立于页面其他内容使用aside非正文的内容,与页面的主要内容是分开的,被删除而不会影响到页面的内容footer页面或页面中某一个区块的脚注11.2举例<!DOCTYPE html><html><head> </head><body><h2 align="center">网页布局-使用h5新标签</h2><!-- div就是一个盒子,主要用于页面布局,是块元素 --><div class="box"><header class="header">头部header</header><main class="main"><nav class="nav">导航nav</nav><section class="content"><aside class="aside">侧边栏aside</aside><article class="article">正文article</article></section></main><footer class="footer">尾部footer</footer></div></body></html>

运行结果

本文链接地址:https://www.jiuchutong.com/zhishi/310719.html 转载请保留说明!

上一篇:phpcms怎么新建栏目(phpcms建站教程)

下一篇:帝国cms7.0 数据更新批量生成时出错怎么办(帝国cms真的很好用)

  • vivo手机熄屏时间的显示设置在哪(vivo息屏显示在哪里)

    vivo手机熄屏时间的显示设置在哪(vivo息屏显示在哪里)

  • 华为荣耀8c是4g手机吗(华为荣耀8C是什么屏)

    华为荣耀8c是4g手机吗(华为荣耀8C是什么屏)

  • 华为nova4e导航键怎么设置(华为nova4三键导航)

    华为nova4e导航键怎么设置(华为nova4三键导航)

  • 电话被对方拉黑还有什么方法可以联系呢(电话被对方拉黑了怎么破解)

    电话被对方拉黑还有什么方法可以联系呢(电话被对方拉黑了怎么破解)

  • 抖音号养了7天为什么0播放量(抖音号养了7天怎么0播放量)

    抖音号养了7天为什么0播放量(抖音号养了7天怎么0播放量)

  • 微信团队解封申诉辅助验证有风险吗(微信团队解封申诉辅助验证怎么换人)

    微信团队解封申诉辅助验证有风险吗(微信团队解封申诉辅助验证怎么换人)

  • nova7什么时候上市的(nova7预计什么时候上市)

    nova7什么时候上市的(nova7预计什么时候上市)

  • 为什么微信连续闪退(为什么微信连续十天超过5000要上传身份证)

    为什么微信连续闪退(为什么微信连续十天超过5000要上传身份证)

  • 微信逻辑错误登录不了怎么处理(微信号登录显示逻辑错误)

    微信逻辑错误登录不了怎么处理(微信号登录显示逻辑错误)

  • 美图秀秀怎么去水印(美图秀秀怎么去除马赛克)

    美图秀秀怎么去水印(美图秀秀怎么去除马赛克)

  • 华为nova6指示灯在那设置(华为nova6se的指示灯在哪)

    华为nova6指示灯在那设置(华为nova6se的指示灯在哪)

  • 光纤猫24小时开着要多少电(光猫多长时间开关一次比较好)

    光纤猫24小时开着要多少电(光猫多长时间开关一次比较好)

  • 封了的微信怎么取消实名认证(封了的微信怎么解绑银行卡)

    封了的微信怎么取消实名认证(封了的微信怎么解绑银行卡)

  • 怎么在微信里看身份证(怎么在微信里看走了多少步)

    怎么在微信里看身份证(怎么在微信里看走了多少步)

  • 手机蓝牙怎么传软件(手机蓝牙怎么传照片到另一个手机)

    手机蓝牙怎么传软件(手机蓝牙怎么传照片到另一个手机)

  • 快手伴侣闪退怎么解决(快手伴侣app)

    快手伴侣闪退怎么解决(快手伴侣app)

  • 苹果低数据模式有什么用(苹果低数据模式在哪)

    苹果低数据模式有什么用(苹果低数据模式在哪)

  • 美团手机号换了怎么办(美团手机号换了会员还能用吗)

    美团手机号换了怎么办(美团手机号换了会员还能用吗)

  • 三星s10需不需要贴膜(三星s10需不需要换电池)

    三星s10需不需要贴膜(三星s10需不需要换电池)

  • a1432是迷你几(ipadmini型号a1432是第几代)

    a1432是迷你几(ipadmini型号a1432是第几代)

  • 三星s10发热严重如何解决(三星s10发烫)

    三星s10发热严重如何解决(三星s10发烫)

  • 微软正式向用户推送升级Win11准备,允许10天内轻松降级至Win10!(微软的客户主要是什么)

    微软正式向用户推送升级Win11准备,允许10天内轻松降级至Win10!(微软的客户主要是什么)

  • nvm介绍、安装、报错处理以及使用(nvm安装教程)

    nvm介绍、安装、报错处理以及使用(nvm安装教程)

  • VUE2安装初始化步骤(2022)(vue初始化命令)

    VUE2安装初始化步骤(2022)(vue初始化命令)

  • 织梦dedecms整合阿里云oss支持ckeditor|kindeditor|ueditor支持图集(织梦cms要钱吗)

    织梦dedecms整合阿里云oss支持ckeditor|kindeditor|ueditor支持图集(织梦cms要钱吗)

  • 城建税的征税范围不包括农村对不对
  • 土地增值税税率2023
  • 公司老板有钱吗
  • 税法里面的损耗是什么
  • 个体户季报网上怎么报税
  • 劳务费个人所得税怎样计算
  • 税额四舍五入的计算公式
  • 销售商品价格含税吗
  • 个体户生产经营个人所得税
  • 成本占收入比重分析
  • 预付款属于什么结算方式
  • 计提企业所得税怎么计算
  • 企业办自建厂房理房产证需要什么资料
  • 银行和保险公司是什么关系
  • 加计扣除农产品进项税额
  • 附加税零申报怎么申报
  • 收到注册资本需要开发票么
  • 业务招待费有增值税吗
  • 鸿蒙系统垃圾清理
  • 收到的增值税专用发票如何认证
  • 一般纳税人购进农产品如何抵扣进项税额
  • 非货币性资产对外投资会计处理
  • 以太网默认网关怎么查看
  • 既征增值税又征消费税的是
  • 盈余公积科目是什么科目
  • php socket_write
  • 员工离职后公司还用照片
  • 税务局开出来的发票没问题吧?
  • php多图片上传到数据库
  • 本期收入及免税收入怎么填
  • 高通芯片开发
  • btrfs 读取
  • 收到政府扶持资金
  • 什么叫呆账账户
  • 借贷公司借钱给别的公司需要开什么会
  • 合伙股权退出机制
  • 织梦怎么调用当前栏目下的文章
  • 补发去年工资会被扣税吗
  • 印花税按金额还是价税合计交
  • 当月开票可以当月勾选吗
  • 固定资产后续支出一律计入固定资产成本
  • 国有资产无偿划转需要缴税吗
  • 交易性金融资产公允价值变动怎么算
  • 可转债会计分录怎么做
  • 收到政府的资本公积可以投入子公司吗
  • 年度所得税费用
  • 购入商品货款尚未支付
  • 关于单独计价的规定
  • 购买商品发生的费用计入
  • 商品折扣计入哪个科目
  • 为什么营业成本属于费用
  • 公司卖掉软件计入成本吗
  • 房子装修费要交税吗
  • MySQL 5.7.18 release版安装指南(含有bin文件版本)
  • win8.1重置电脑
  • win10系统如何将c盘的软件移到d盘
  • windows自带的碎片整理程序
  • windows10经常假死
  • 新款苹果笔记本测评
  • mac锁定快捷键
  • win7系统怎样
  • win10系统声音怎么打开
  • 保存 linux
  • win8打开蓝牙设置
  • win7系统重装后蓝屏
  • unity3d初学者教程视频
  • js四舍五入两位小数
  • Python+Wordpress制作小说站
  • jquery移动div到另一个div中
  • vim tagbar
  • 游戏unity错误
  • JavaScript中setUTCFullYear()方法的使用简介
  • unity?
  • macbookair安卓系统怎么切换到苹果
  • python的面向对象和模块原理
  • Android系统服务
  • 江苏电子税务局app下载
  • 湖北安徽是一个地方吗
  • 天津海泰南路属于哪个区
  • 电子票据如何报销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设