泉州丰泽建设局网站,步骤流程,微信网页版官网二维码,杭州做网站哪里好一#xff1a;显示相关的HTML基础知识
1. 推荐的前端编写工具 2. VScode的html速写规则#xff08;从a标签开始再用#xff09;
①、#xff01;#xff1a;代表生成html的基本框架元素 ②、html元素#xff1a;直接书写html,不需要加,按回车会自动生成 ③、{}…一显示相关的HTML基础知识
1. 推荐的前端编写工具 2. VScode的html速写规则从a标签开始再用
①、代表生成html的基本框架元素 ②、html元素直接书写html,不需要加,按回车会自动生成 ③、{}配合②快捷键在{}中书写文本会直接在html元素标签内生成文本里面可以添加 一个 一个 一个符号代表0-9 ④、*NN代表个数配合上述儿②、③可以一次生成多个html元素 ⑤、向html的下一级生成html元素 ⑥、同级下生成不同的html元素
3. html5保留的元素
框架元素
!DOCTYPE html
htmlheadmeta charsetutf-8 titlehello/title /headbody/body
/html二HTML元素 !-- H1到H6的代码样例 --
h1疯狂JAVA讲义/h1
h2疯狂JAVA讲义/h2
h3疯狂JAVA讲义/h3
h4疯狂JAVA讲义/h4
h5疯狂JAVA讲义/h5
h6疯狂JAVA讲义/h6
hr
spanspan测试01/span
spanspan测试02/span
spanspan测试03/span
br
divdivtest1/div
divdivtest2/div
divdivtest3/div
pptest001/p
pptest002/p
pptest003/p重点span和div的布局特征及原理 看到的布局表象特征div是竖着布局span是横着布局 div、h1-h6、p等都是块级元素块级盒子块级元素特征独占一行对宽度和高度是支持的 span、a等都是内联级元素内联级盒子内联级元素特征不独占一行对宽度和高度不支持
a元素
①、超链接
a hrefhttp://www.baidu.com target_blank跳转到百度/a相关属性 href:跳转的资源路径 target:代表打开资源的方式默认值是_self本窗口打开其他值_blank新窗口打开_parent,跳出父级框架打开,_top跳出顶级框架打开结合框架之后可以自定义值 ②、锚点 a nameh_elementH1到H6/a相关属性 name:代表锚点的名称 相关方法 如何跳转到指定锚点位置注意记得加上 #锚点name属性的值
a href#h_element跳转到H相关的元素上/a跳转到不同页面上的指定锚点
a hreftest.html#a_element跳转到A相关的元素上/a③、固定锚点效果 相关css position:设置定位模式其值有relative,absolute,fixed,static 默认值为static,其中relative是相对定位absolute是绝对定位fixed是固定 left:代表是主体居左的距离 right:代表是主体居右的距离 top:代表是主体居上的距离 bottom:代表是主体居下的距离 left、right、top、bottom的使用有效必要要让position的值是relative,absolute,fixed三种中的一种
div styleposition:fixed;bottom:10px;right:10px;diva href#h_element跳转到H相关的元素上/a/divdiva href#a_element跳转到A相关的元素上/a/div
/div列表相关元素
①、无序列表常用
ullisdaklgj/lilisdaklgj/lilisdaklgj/li
/ul注意ul里面只能包含li ②、有序列表不常用
ol start3 typealisdaklgj/lilisdaklgj/lilisdaklgj/li
/ol相关属性 start:代表从第几个开始排序 type:使用哪种编码方式其值有 1、A、a等等 注意ol里面只能包含li ③、列表标题摘要
dldt新闻1/dtdd新闻1的摘要1/dddd新闻1的摘要2/dddt新闻2/dtdd新闻2的摘要/dd
/dl注意dl里只能包含dt,dd;dt后紧跟至少一个dd,dt是列表项dd是列表项的详情说明 ④、无序列表卡片效果 额外知识点 ①、引入css样式需要使用标签 相关属性 rel : 代表引入的资源角色stylesheet代表样式单【必要】 href : 代表引入的资源路径可用相对路径和绝对路径【必要】 ②、添加HTML的通用属性比如id,class 1、使用id属性在书写css时需要使用#前缀使用class属性在书写css时需要使用.前缀; 2、使用id属性属性值要求唯一的;使用class属性属性值可以重复。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titletest/titlelink relstylesheet hrefcss/index.css
/head
bodydiv classnews_boxdiv classtitlespan classlf_sp新闻动态/spanspan classrt_spmore/span/divullispan2020-12-23/spanimg srcimages/1.png alt1h3军训常识——管理篇/h3p军事理论学习科生的必事理论理论学事理论课考试记2个学分记入学生教学档案。军事技能训练考评和军事理论考试。/p/lilispan2020-12-23/spanimg srcimages/1.png alt1h3军训常识——管理篇/h3p军事理论学习是我校本科生的必修课完成军训并通过军事理论课考试记2个学分记技能训练考评和军事理论考试。/p/lilispan2020-12-23/spanimg srcimages/1.png alt1h3军训常识——管理篇/h3p军事理论学习是我校本科生的必修课完成军训并通过军事理论课考试记2个学分记技能训练考评和军事理论考试。/p/lilispan2020-12-23/spanimg srcimages/1.png alt1h3军训常识——管理篇/h3p军事理论学习是我校本科生的必修课完成军训并通过军事理论课考试记2个学分记技能训练考评和军事理论考试。/p/li/ul/div
/body
/htmlcss代码
*{margin:0;padding: 0;transition: all 0.5s ease;
}
.news_box{background-color:rgb(243, 243, 243);margin-top:100px;padding-bottom:30px;
}
.news_box .title{width:80%;margin:0 auto 20px;padding-bottom:13px;padding-top: 10px;border-bottom:1px #ddd solid;font-size:21px;
}
.news_box .title .lf_sp{border-bottom:2px #D93124 solid;padding-bottom:12px;
}
.news_box .title .rt_sp{float: right;font-size:14px;color:rgb(170, 170, 170);margin-top: 11px;margin-right: 10px;
}
.news_box .title .rt_sp:hover{color:#910000;cursor: pointer;
}
.news_box ul{overflow: hidden;width:80%;margin:0px auto;}
.news_box ul li{list-style: none;float:left;width:23%;background-color: rgb(255, 255, 255);margin:0 1%; position: relative;
}
.news_box ul li img{width:100%;
}
.news_box ul li h3{color:#D93124;font-size:15px;font-weight: 200;padding:5px;
}
.news_box ul li p{color:#919191;font-size:13px;padding:5px;line-height: 23px;
}
.news_box ul li:hover p{color:#D93124;
}
.news_box ul li span{position: absolute;left:0;top:0;background-color: #F78C83;color:#fff;padding:4px;font-size:12px;
}
.news_box ul li span:hover{padding: 6px;
}最终效果
table元素
①、简单的table
table border1 stylewidth:300px;border-collapse: collapse;trtd1sdgasdgasdgeasgsd/tdtd2/tdtd3/td/trtrtd4/tdtd5/tdtd6/td/tr/table相关html元素 tr:代表行 td:普通单元格 th:表头单元格特征内容居中加粗 col:代表列可以对指定列整体做样式、属性处理span属性可以指定是哪些连续的列 相关属性 cellspacing:代表单元格之间的间距一般不使用而是采用css处理 border-collapse:collapse; cellpadding:代表单元格内内容与边框的间距一般不使用而是采用css处理padding:5px; border:代表表格的表框一般使用 width:代表表格的宽度一般不使用采用css处理 align:代表对齐的方式默认是左对齐left可以设置居中对齐center一般不使用采用css处理 text-align:center ②、合并的table table border1 stylewidth:300px;border-collapse: collapse; trth姓名/thth金额/thth时间/th/trtrtd rowspan2张三/tdtd5000/tdtd2020.09.28/td/trtrtd3000/tdtd2020.09.29/td/trtrtd colspan3备注张三的银行流水dddsf/td/tr/table相关属性 colspan:代表合并列要合并几列属性值就写几 rowspan:代表合并行要合并几行属性值就写几
html5保留的框架元素iframe
iframe简介 iframe简单代码示例
iframe srcindex2.html frameborder0 stylewidth:100%;height:600px;/iframe工作台代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleindex/titlestyle.iframe_box{display:flex;}.iframe_box .ilf{width:15%;}.iframe_box .irt{width:85%;}/style
/head
bodydiv classiframe_boxdiv classilfullia hrefhttp://www.baidu.com targetgs菜单1/a/lilia hrefindex2.html targetgs菜单2/a/lilia hrefhttp://hbu.cn targetgs菜单3/a/li/ul/divdiv classirtiframe srchttp://www.baidu.com namegs frameborder0 stylewidth:100%;height:600px;/iframe/div/div
/body
/htmlhtml5保留的通用常用属性 第三章Form表单相关的HTML元素知识
1.form表单
form表单相关属性 什么是请求参数
举例请求地址是javags.jsp?usernamegsage28sex1 目的与后台交互及传递数据 解释 ①、以为分隔前面的是具体的后代请求地址后面的是具体的请求所需要传送的数据对 ②、请求参数是有请求参数对以连接的每一对内部由连接的 生成请求参数的规则 请求方式区别 get请求请求的数据少但是是相对的能在浏览器地址栏中看见请求参数一般 查 操作使用get请求 post请求请求的数据多不能在浏览器地址栏中看见请求参数一般 增、删、改 操作使用post请求
2. html5保留的表单控件及属性
input表单控件
①、当type“text”生成单行文本框; ②、当type“password”生成密码框与文本框的区别是输入的内容是不可见 ③、当type“radio”生成单选框如要生成一组单选框还需要指定name属性值一致 ④、当type“checkbox”生成复选框如要生成一组复选框还需要指定name属性值一致 ⑤、当type“file”生成文件上传域可上传文件 ⑥、当type“image”生成图像域主要作用跟提交按钮一样就是提交的功能 ⑦、当type“submit”生成提交按钮让表单提交的功能按钮的文字默认是提交可以通过value属性来修改 ⑧、当type“reset”生成重置按钮让表单里所有的表单控件内容重置不是清空按钮的文字默认是重置可以通过value属性来修改 ⑨、当type“button”生成普通按钮没有任何能力按钮的文字没有默认值需要通过value属性来设置
readonly设置表单控件只读就是不可修改 disabled设置表单控件可不用与readonly的区别readonly是外表样子看着不可用而disable是不仅外边看着不可用而且真的不可用无法生成请求参数 checked设置单选框或者复选框时候默认选中
button按钮
相关属性 注意 1、button与input生成按钮的区别 button是有开始结束标签的所以按钮的文字需要写到开始和结束标签之间 input是空标签按钮的文字是通过value属性来设置的 2、button不设置type属性时type属性的值默认是submit天生具有表单提交的能力
下拉框与列表框select
①、下拉框与列表框如何形成请求参数 ②、列表框相关属性 ③、option与optgroup元素及相关属性
文本域textarea
①、相关属性 注意 textarea控件如果要设置默认值需要在textarea开始和结束标签之间设置不能通过value属性但是如果需要使用JavaScript获取textarea的内容时需要使用value属性。
fieldset与legend
对于表单控件样式上的分组实例代码如下
3. html5新增的常用表单属性
form属性 formaction属性 formxxx属性 autofocus属性 placeholder属性 list属性 autocomplete属性 4. html5新增的常用表单元素
新增的input控件 output控件可用其他显示的html元素替代 form actioninput typecolor idcolor1 namecolor1 oninputa.value this.valueoutput forcolor1 namea/outputbrbrbrinput typerange idrange1 namerange1 min0 max100 step5 oninputb.value this.valueoutput forrange1 nameb/output
/form注意 output是开始和结束标签不是空标签跟input标签不一样input是空标签 oninput监听表单控件值实时发生变化触发的事件 onchange监听表单控件值最终改变时触发的事件
meter控件
相关属性 代码实例
meter value120 min10 max200 low30 high160120/meter千米/小时注意 meter是开始和结束标签不是空标签
progress控件
相关属性 代码实例
progress max100 value20/progress注意 progress是开始和结束标签不是空标签
5. html5表单验证
基本表单验证属性验证
①、相关属性 ②、代码
form action#input typetext required namegs/br/input typetext required namebook pattern\d{3}-\d-\d{3}-\d{5}/brinput typenumbernamebox min0 max100 step5 required/br/input typesubmit/form
form action#input typetext required namegs/br/自定义表单验证
①、checkValidity()方法 form actionadd methodpost生日input namebirth idbirth typedate/p邮件地址input nameemail idemail typeemail/pinput typesubmit onclickreturn check();/form scriptvar check function(){return commonCheck(birth,生日,字段必须是有效的日期) commonCheck(email,邮件地址,字段必须符合电子邮件的格式);}var commonCheck function(field,fieldName,tip){var target document.getElementById(field);if(target.value.trim() ){alert(fieldName字段必须填写);return false;}else if(!target.checkValidity()){alert(fieldNametip);return false;}return true;}/script额外知识点 1、trim()方法是去掉字符串左右的空格 2、return false 作用一是阻止默认事件发生作用二函数提前结束 ②、setCustomValidity()方法(极不推荐使用) ③、novalidate | formnovalidate属性关闭校验
