无锡网站设计公司电话公司网站 cms

无锡网站设计公司电话,公司网站 cms,怎样利用互联网进行网络推广,网站平台内容建设提纲本文将主要梳理html网页布局的基础知识与常用标签以及注意事项#xff0c;对于软件的选用与课外知识不加涉猎 文章目录一、HTML的基本结构标签二、常用的HTML标签与必要的基本知识点1、基础知识之标签结构说明#xff1a;2、基础知识之属性特性说明#xff1a;3、常用标签1.…本文将主要梳理html网页布局的基础知识与常用标签以及注意事项对于软件的选用与课外知识不加涉猎文章目录一、HTML的基本结构标签二、常用的HTML标签与必要的基本知识点1、基础知识之标签结构说明2、基础知识之属性特性说明3、常用标签1.标题标签h1-h62.段落标签p3.换行标签br4.水平线标签hr5.各种文本格式化标签6.图片标签img7.媒体标签1.音频标签audio2.视频标签video8.链接标签a9.无语义的布局标签-div和span10.有语义的布局标签-html5标签路径知识点补充三、列表类型标签1、列表1.无序列表常用ul-li2.有序列表ol-li3.自定义列表dl-dt-dd四、表格类型标签1、基本标签和属性基本标签基本属性其他常用标签1.caption表格大标题2.th表头单元格3.合并单元格rowspan跨行colspan跨列五、表单类型标签1、input类型标签总结2、button按钮标签3、select下拉菜单标签4.文本域标签textarea5.label标签一、HTML的基本结构标签!DOCTYPEhtmlhtmlheadmetacharsetutf-8title网页标题/title/headbody网页主体内容/body/html运行示例二、常用的HTML标签与必要的基本知识点1、基础知识之标签结构说明标签由、、/、英⽂单词或字⺟组成。并且把标签中包括起来的英⽂单词或字⺟称为标签名常⻅标签由两部分组成我们称之为双标签。前部分叫开始标签后部分叫结束标签两部分之间包裹内容少数标签由⼀部分组成我们称之为单标签。⾃成⼀体⽆法包裹内容。2、基础知识之属性特性说明标签的属性写在开始标签内部标签上可以同时存在多个属性属性之间以空格隔开标签名与属性之间必须以空格隔开属性之间没有顺序之分3、常用标签1.标题标签h1-h6h1我是1级标题/h1特点1、标签的文字都有加粗2、标签的文字都有变大从h1~h6文字逐渐减小3、每⼀个标题独占一行2.段落标签pp前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。HTML5Node.js的⼴ 泛应⽤各类UI框架JS类库层出不穷开发难度也在逐步提升。/p特点1、段落之间存在间隙2、每个段落是独占⼀行3.换行标签brp前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。brHTML5Node.js 的⼴泛应⽤各类UI框架JS类库层出不穷开发难度也在逐步提升。/p作用强制换行4.水平线标签hrh1前端开发/h1hr作用显示出一条分割不同主题的水平线5.各种文本格式化标签!-- ⽂本格式化标签让⽂本有加粗、下划线、倾斜、删除线⽂本的格式效果 --!-- 第⼀组 --b加粗/bu下划线/ui倾斜/is删除线/sbr!-- 第⼆组推荐使⽤语义更加强烈 --strong加粗/strongins下划线/insem倾斜/emdel删除线/del6.图片标签imgimgsrccat.gifalt这是⼀只摇头猫title震惊⼩猫咪竟然会⼲这种事作用在网页中展示⼀张图片属性1、src告诉浏览器要显示哪⼀张图⽚属性值路径如果图片和当前页面在同级目录下此时直接写图片的名字即可2、alt替换文本当图片加载失败时如路径写错了才显示的文字3、title提示文本当⿏标悬停在图⽚上时才显示的⽂字4、width图片的宽度5、height图片的⾼度注意点1、如果只设置图片的宽度或者高度此时另⼀个会自动等比例缩放2、如果同时设置了两个若设置不当此时图片可能会变形7.媒体标签1.音频标签audioaudiosrc./music.mp3controlsautoplayloop/audio属性1、src路径2、controls播放的控件3、autoplay自动播放部分浏览器不支持4、loop循环播放2.视频标签videovideosrc./video.mp4controlsautoplaymutedloop/video属性1、src路径2、controls播放的控件3、autoplay自动播放部分浏览器不⽀持——在谷歌浏览器中写muted可以完成静音的自动播放4、loop循环播放8.链接标签aahrefhttps://www.baidu.com/target_blank点击之后去百度⽹⻚/aahref./15-视频标签.htmltarget_blank点击之后去刚刚书写的视频⽹⻚/a属性1、href告诉浏览器点击之后跳转去哪⼀个网页取值路径1、外部链接互联网上的绝对路径2、内部链接推荐使用相对路径2、target目标网页的打开方式取值1、_self(默认值) 在当前窗⼝中进行跳转原网页会被覆盖2、_blank在新窗⼝中进行跳转原网页保留9.无语义的布局标签-div和span1.div标签⼀行只显示⼀个独占⼀行2.span标签⼀行可以显示多个10.有语义的布局标签-html5标签路径知识点补充路径分为俩种一种是相对路径这也是最常用的还有一种是绝对路径这种用到的情况较少1.相对路径的描述同级目录直接写目标文件名字下级目录直接写文件夹名/目标文件名字上级目录直接下…/目标文件名字2.绝对路径的描述就是从根目录一直写道当前的文件D:\day01\images\1.jpg若是网络的话就是当前的网络链接https://www.baidu.com/2018czgw/images/logo.gif三、列表类型标签1、列表1.无序列表常用ul-liullip我也是⼀个p标签/p/lili榴莲/lili⾹蕉/lili苹果/lili哈密⽠/lili⽕⻰果/li/ulul表示整个无序列表的主体用来包含li标签li表示无序列表的每一项用于包含每一行的内容2.有序列表ol-liolli⼩姐姐100分/lili⼩帅哥80分/lili⼩可爱60分/li/olol表示有序列表的整体li表示有序列表的每⼀项3.自定义列表dl-dt-dddlclassproduct-specdt屏幕尺寸/dtdd6.7 英寸 OLED 屏/dddt处理器/dtdd骁龙 8 Gen3/dddt电池容量/dtdd5000mAh典型值/dddt充电功率/dtdd80W 有线快充/dddd50W 无线快充/dd!-- 1个dt对应多个dd --/dldl包裹整个定义列表是父容器dt定义「被解释的术语 / 分类标题」可多个对应一个 / 多个 dddd定义「对 dt 的解释 / 详情」默认有左侧缩进可通过 CSS 重置结构灵活1 个 dt 可对应多个 dd或多个 dt 对应 1 个 dd需符合语义四、表格类型标签适用场景在网页中以行列的单元格的方式整齐展示和数据1、基本标签和属性基本标签标签嵌套关系tabletrtd基本属性其他常用标签1.caption表格大标题tableborder1cellspacingcellpaddingcaption表格大标题/captiontrtdData/td/tr/table显示效果在表格整体顶部居中位置显示注意caption标签是要书写到table标签内部2.th表头单元格tableborder1cellspacingcellpaddingtrthHeader/th/trtrtdData/td/tr/table显示效果表格内部文字加粗并居中显示3.合并单元格rowspan跨行colspan跨列tableborder1width300height300captionh3学⽣成绩单/h3/captiontrth姓名/thth成绩/thth评语/th/trtrtd⼩哥哥/td!-- 保留 --tdrowspan2100分/tdtd⼩哥哥真帅⽓/td/trtrtd⼩姐姐/td!-- 删除 --!-- td100分/td --td⼩姐姐真漂亮/td/trtrtd总结/td!-- 保留 --tdcolspan2郎才⼥貌/td!-- 删除 --!-- td郎才⼥貌/td --/tr/table五、表单类型标签1、input类型标签总结注意input标签可以通过type属性值的不同展示不同效果form!-- 1、⽂本框texttype属性的默认值 --昵称inputtypetextplaceholder请输⼊您的昵称brbr!-- 2、密码框password --密码inputtypepasswordplaceholder请输⼊您的密码brbr!-- 3、单选框radio --性别inputtyperadionamesexchecked男inputtyperadionamesex⼥brbr!-- 4、多选框checkbox --爱好inputtypecheckboxchecked敲代码inputtypecheckboxchecked熬夜inputtypecheckbox掉头发brbr!-- 5、⽂件选择file --inputtypefilemultiplebrbr!-- 按钮 --!-- 1、submit提交按钮 --inputtypesubmit!-- 2、reset重置按钮 --inputtypereset!-- 3、button普通按钮 --inputtypebuttonvalue普通按钮/form2、button按钮标签formactionmethodbuttontypebutton/button/form3、select下拉菜单标签select标签下拉菜单的整体option标签下拉菜单的每⼀项注意selected下拉菜单的默认选中selectoptionvalueselected上海/optionoptionvalue北京/optionoptionvalue广东/option/select4.文本域标签textarea常见属性cols规定了文本域内可见宽度rows规定了文本域内可见行数textarearows9cols54/textarea5.label标签作用常用于绑定内容与表单标签的关系使用方法第一种使用label标签把内容如文本包裹起来在表单标签上添加id属性在label标签的for属性中设置对应的id属性值第二种直接使用label标签把内容如文本和表单标签⼀起包裹起来需要把label标签的for属性删除即可