莒县做网站的公司,苏州有什么好玩的,关键词制作软件,浙江住房与城乡建设厅官方网站查询HTML的标签分类双标签#xff1a;如strong标签的内容/strong 语法#xff1a;开始标签 标签内容 /结束标签strong我要变粗/strong head/head......
单标签#xff1a;br/单标签都是功能性的标签如strong标签的内容/strong 语法开始标签 标签内容 /结束标签strong我要变粗/strong head/head......
单标签br/单标签都是功能性的标签例如换行等功能里面不需要添加内容 语法标签名 /br hr ......HTML中的标签熟练用包裹的英文单词h 系列的标签 : 标题标签h1h2h3h4h5h6作用 : 给页面上的文字加上标题的语义代码 : h1我就是h1标签/h1效果 : h1h2h3h4h5h6 将文字放大、加粗、并且逐渐变小h1标签是最大的特点 : 独占一行注意 : h1 标签尽量少用太多不利于SEO(搜索引擎优化) 。 一般h1 都是给文章的标题或者 logo使用。p 标签 : 段落标签作用: 给页面上的一段文字加上段落的语义代码: p这是段落/p特点页面上的一个段落单独占一行并且与上下内容之间存在距离。hr 标签水平线标签作用: 在页面上显示一条横线代码: hr /br 标签换行标签作用强制换行代码中换行无效代码br /(4组)文本格式化标签作用:b: 加粗u: 下划线i: 倾斜s: 删除线建议不要使用, 因为这些标签没有语义作用:strong: 加粗ins: 下划线em: 倾斜del: 删除线可以使用语义: 起强调加强语气作用图片标签重点img 标签 图片标签作用 在页面中显示一张图片代码 img src图像URL /特点 就是显示图片属性src图片显示的路径必须alt如果图片加载不出来会显示这个属性中的文字title介绍这张图片width图片的宽度height图片的高度图片宽高只设一个, 另一个会等比例缩放两个都设可能会变形所以一般我们只设一个。路径问题难点当前文件找目标文件的过程[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Teq5brB-1602818986804)(mdImg/%E5%9C%B0%E5%9B%BE.PNG)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CdDuoqgx-1602818986807)(mdImg/%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84-1535340133797.PNG)]绝对路径用的较少可移植性差带有盘符的路径: C:UsersziyueDesktop代码01.jpg相对路径用的很多可移植性很好同级目录如果页面与图片同一级目录直接写目标文件的名字类比如我们俩都在大厅[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaeTs5fK-1602818986809)(mdImg/path-01.png)]img src2.jpg
或者
img src./2.jpg下级目录下级目录如果图片在同级目录image文件夹下[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InS5x9hj-1602818986810)(mdImg/path-02.png)]img srcimage/1.jpg步骤找到图片所在的目录先写文件夹的名字去图片所在文件夹里面文件夹名字/然后直接写目标文件的名字即可文件夹名字/目标文件的文件名上级目录上级目录如果图片在页面的上一级目录[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KeDVDDXK-1602818986811)(mdImg/path-03.png)]img src”../2.jpg” 步骤首先去目标文件所在的目录。去上一级目录…/直接在路径后面写目标文件的名字…/目标文件的名字总结通过文件夹名 / 可以来到下一级目录通过../ 可以来到上一级目录一般开发中用的最多的是相对路径因为相对路径的可移植性要强。我发给你你能看~链接标签重点a 标签 (Anchor ) : 超链接锚超链接在页面中起到跳转或定位的作用超链接、锚链接、a链接、a标签a标签的跳转功能作用: 可以从一个页面跳转到另一个页面代码: a href跳转目标 target目标窗口的弹出方式文本或图像/a效果链接未点击的时候默认显示蓝色链接点击过以后显示为紫色因为浏览器有默认的缓存机制只要访问过一次的链接默认都会展示成紫色只有清除浏览器的缓存才会变蓝注意在 a 标签之内必须写上内容, 如果没有内容, 页面上会看不到a 标签不能嵌套如果有两个a标签嵌套那么点击的时候去哪里呢a 标签的属性**href**a 标签跳转的目标地址路径外部链接互联网上需要添加 http:// www.baidu.com内部链接文件夹中直接链接页面的路径即可 比如 a hrefindex.html 首页 /a **target**用于指定链接页面的打开方式_self 在当前页面进行跳转_blank : 保留原始页面再进行跳转相关标签 base 标签**作用**可以为页面上所有的a标签设置跳转的方式书写位置base标签一般放在titile标签下面统一设置页面中所有a标签的跳转方式a 标签的其他用法可以不跳转 (不写路径其实会刷新页面刷新也不要哦~)href#项目中没有确定链接目标时通常将链接标签的href属性值定义为“#”表示该链接暂时为一个空链接在项目中起到站位的作用可以进行下载一般不用看不到进度条配合Js才能看到进度条当路径指向的目标文件是浏览器打不开的文件时浏览器会默认下载下来。当路径指向的目标文件是浏览器可以打开的文件时浏览器会打开。a标签的定位功能快速定位a标签可以快速定位到当前页面或者其他页面的目标内容百度百科在当前页面进行定位步骤给目标标签加上id属性p idmao我是一只猫/p给链接的href属性中写上#目标标签的id属性值a href#mao吸猫大法/a在跳转的页面进行定位步骤给目标文件中的目标标签加上id属性p idmao我是一只猫/p给当前文件的链接的href属性中写上 目标文件路径#目标标签的id属性值a href目标文件路径#mao吸猫大法/a[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hsamkacC-1602818986812)(mdImg/摇头猫.gif)]结构中每个标签的含义了解DOCTYPE : 文档类型作用 用来定义文档类型告诉浏览器使用哪种规范去解析html页面**位置**文档的最前面的位置**规范**HTML 或 XHTML 规范**html:xt **XHTML规范已经淘汰了 一些特别老的网站会有知道即可!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml:5 HTML5规范非常的简洁!DOCTYPE htmlhtml 标签**作用**所有html中标签的一个根节点老祖宗**lang**用来设置当前页面的语言标签的语言、对比易语言html langen
/htmlen-英文 zh-中文
英文的意思并不是告诉浏览器我们这就是纯英文的而且告诉浏览器我们的内容以英文为主提高浏览器的渲染性能head 标签作用用于存放网页的配置标签和引入文件的标签title、meta、base、style、script、link注在head标签中我们必须要设置的标签是title, 其他可有可无body 标签**作用**页面在的主体部分用于存放页面中的html标签p、h、a、b、u、i、s、em、del、ins、strong、imgmeta 标签**作用**设置网页的元信息**注意**meta中设置的所有的内容在页面都不会显示, 在其中可以设置编码格式、样式、关键字等等设置字符集编码格式meta charsetUTF-8Charset字符集的格式UTF-8最常见的3种字符集字典UTF-8国际化的字典字体库收录是全世界所有的语言中的文字1汉字 3个字节GBK收录了大陆汉字还加了港澳台的文字-》ANSI中国1个汉字 2个字节GB2312收录了大陆汉字**约定**将来我们在整个学习过程中都用utf-8与国际接轨title 标签**作用**让页面拥有一个属于自己的标题。**注意**title中的文本在 seo 中占有很大的权重不能乱写SEO与标签语义化了解SEO : 搜索引擎优化Search Engine Optimization写网页的目的-》用户的习惯-》用户的结果-》怎样排名靠前-》seo作用用来优化网站使用网站在搜索引擎上的排名靠前百度是如何收录一个网站的信息的呢百度自己写的一个程序来收录每个网站的信息。怎样提升网站的SEO记忆花钱买排名缺点烧钱。优点效果杠杠的将页面做成静态页面html后缀发外链类似于广告标签语义化语义化规范在合适的地方使用合适的标签标签语义化的应用每个html标签都有属于自己的语义有使用标签时候要一定要了解每个标签的语义合理使用。标签语义化的好处在合适的地方使用合适的标签比如title和h1对搜索引擎的友好提高网页的SEO将来网络爬虫进入页面之后可以很方便的得到页面的重要信息提升用户体验css加载不出来也能看出重要性利于代码的可读、维护、提高开发效率 (网页源代码方便查询)列表熟练无序列表 ul Unordered List一列没有顺序的列表用的最多**作用**显示一列没有排列顺序的数据**语义**一组没有顺序的数据代码ulli列表项1/lili列表项2/lili列表项3/li......
/ul注意无序列表中的数据没有先后顺序之分ul/ul 中只能嵌套li/li 不能放其他标签或者文字li/li 标签中可以嵌套任意标签嵌套ul都可以有序列表 ol了解一列有顺序的列表用的很少作用显示一列有顺序的数据语义一组有顺序的数据olli列表项1/lili列表项2/lili列表项3/li......
/ol注意有序列表中的数据有先后顺序之分ol/ol 中只能嵌套li/li 不能放其他标签或者文字li/li 标签中可以嵌套任意标签ul都可以现在一般情况下ul标签用的比较多ol标签用的比较少关键看语义和样式无关。自定义列表 dl了解一列格式自定义的列表几乎不用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-um7pcoZK-1602818986812)(mdImg/mi.fw.png)]作用显示一列数据格式自己定义dt : 标题dd : 列表正文代码dldt小标题/dtdd小标题的解释1/dddd小标题的解释2/dd
/dl注意1.dl里面只能放dt或者dd2.dt/dd里面可以放任意的标签HTML中的特殊字符记忆有时候需要在页面中显示空格、、等特殊字符HTML的空格合并现象在HTML代码中同时出现多少个空格、缩进、换行。最后浏览器只会解析出一个空格显示合并现象案例女孩宝贝靠近点~男孩darling我离不开你~
拆了他们**总结**html代码中对空格、缩进、换行不敏感如果同时出现多个空格、缩进、换行, 页面只会把它们当做一个空格来解析html 中特殊字符有对应的 转译符 :[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UuO6pxOx-1602818986813)(mdImg/zifu.png)]表格table难点将数据以表格的形式在网页中展示感知表格相关标签
table/table : 代表 表格
tr/tr : 代表一行 (row : 行 )
td/td : 代表一个标准单元格创建表格[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OqWDpq3H-1602818986814)(mdImg/%E8%A1%A8%E6%A0%BC.png)]代码tabletrtd单元格/tdtd单元格/td/trtrtd单元格/tdtd单元格/td/tr
/table表格的属性属性作用虽然我们可以使用table中的标签来设置标签的一些样式但是最好不要用因为将来凡是与样式相关内容都是由css来设置的表格中的其他标签[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQSl4axA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6.PNG)]总结注意tr/tr中只能嵌套td/td或者th/thtd/td标签像一个容器可以容纳所有的元素合并单元格 (左上原则)上下合并------》跨行合并属性: rowspan“合并的个数”------》留住最上删除其他左右合并------》跨列合并属性: colspan“合并的个数”-------》留住最左删除其他1.确定合并哪几个单元格2.利用左上原则确定保大保小3.确定跨行rowspan还是跨列合并colspan步骤通过左上原色确定保留的单元格给他添加属性rowspan/colspan属性值就是合并单元格的个数找到要删除的单元格删除掉就行了~合并单元格练习:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7Ex4lKA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E7%BB%83%E4%B9%A0.PNG)]**其实**在早期的网站开发中表格的使用非常的泛滥表单系列标签重点表单的目的是收集用户信息注册页面有一种生物叫做后端input (输入框系列) 基本表单控件先简单的过一遍~input typetext单标签、type用于指定不同的控件类型文本框 text 、 密码框 password昵称input typetext value小姐姐 namenicheng maxlength6
密码input typepassword namepassword maxlength6注意value 用户输入的值提前在标签设置好就是默认值name告诉后端对应的值的含义。后端接收到的格式name的属性值value的属性值拓展页面中的信息需要传给后台服务器但是直接发一个值value过去后端不知道是什么所以需要加上一个属性name 代表数据的含义。后端接收的数据结构为 name属性值value属性值 这样后端就知道传过去的是什么前后端交互在就业班会重点说明基础班不会使用maxlength设置表单的最大输入值小bug 如果是密码输入框typepassword 的password不能拼错且后面不能有空格否则浏览器会认为type属性设置无效会以默认的text方式显示此时不会密文相当于是文本框。单选框 radio 、多选框 checkbox单选框 radio性别 : input namesex typeradio valuenan 男 input namesex typeradio valuenv checked 女注意通过name进行分组有相同name属性值的单选框是一组的一组中同时只能有一个选中并且告诉后台传的是什么在实际工作中需要写value值checked 属性设置默认选中属性值省略。多选框 checkbox爱好input typecheckbox namehobby valuecode checked敲代码input typecheckbox namehobby valuenosleep checked熬夜input typecheckbox namehobby valuegame玩游戏通过name进行分组并且告诉后台传的是什么需要写value值checked属性设置默认选中属性值省略文件选择框 fileinput typefile 单文件上传
input typefile multiple 多文件上传注意multiple设置一次同时可以选中多个文件ctrl选中/鼠标框选属性值可以省略现在html只负责结构之后真正的上传相关功能通过js来实现表单按钮需要配合form表单一起使用说白了就是用form标签把表单标签都包起来~提交按钮submit将表单的内容提交给后端input typesubmit重置按钮reset将表单的内容重置为默认值input typereset普通按钮button之后配合js使用input typebutton // 配合后面的js使用图片按钮image功能相当于提交按钮样式为一张图片input typeimage srca.jpgselect 下拉菜单出生年月select nameyearoption value19961996/optionoption value19971997/optionoption value19981998/optionoption value1999 selected1999/option/select注意name属性设置在select标签上告诉后台传过去的是什么value属性设置在option上表示选中的值selected属性设置默认选中属性值省略textarea文本域用于输入大段文字textarea cols规定文本区内的可见宽度 rows规定文本区内的可见行数文本内容
/textarea**注意**不能通过设置value使文本域有默认值无效Form 表单域form标签用于定义表单域将各种表单包裹起来用于表单提交form actionurl地址各种表单控件
/form**属性**action 用于指定处理请求的服务器URL地址就业班的内容label 标签记忆示例 : 新浪网页注册作用让文本和表单元素绑定到一起结拜兄弟[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CBARlNXR-1602818986816)(F:/前端/笔记/mdImg/label.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLjixZIi-1602818986816)(F:/前端/笔记/mdImg/猫哥.jpg)]用法写 for 值为 id规定 label 与哪个表单元素绑定性别 :
input idnan namesex typeradio label fornan男/label
input idnv namesex typeradio label forid名女/label 步骤
1.在表单元素上添加id属性
2.给label添加for属性for的属性值与对应表单元素的id值相同即可不写 for默认绑定 label 内的表单控件labelinput typeradio namesex 男/label步骤用label把表单元素和文字包在一起即可没有语义的布局标签记忆div和span是没有语义的标签一般用于页面布局使用项目中会经常使用到divdiv盒子div长亭外/divdiv古道边/div特点width由屏幕宽度决定独占一行height自适应由内容撑开默认占一整行一行只能显示一个页面布局中用的最多~spanspan芳草碧连天/span特点width、height由内容来决定都由内容撑开一行里面可以显示多个除了没有语义的标签可以用于布局还有一些有语义的标签可以用于布局HTML5新标签与特性了解就业班会有专门的H5C3的课来学习html5的一些新标签和属性HTML5新增语义标签记忆头部header标签header定义网页的头部---》头部语义 div导航nav标签nav定义网页的导航---》导航语义 div底部footer标签footer定义网页的底部---》底部语义 div侧边栏aside标签aside定义网页的侧边---》侧边语义 div区块section标签section定义网页的区块---》区块语义 div文章article标签article定义网页的文章---》文章语义 div[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7dXEVgc-1602818986817)(F:/前端/笔记/mdImg/h5新标签.png)]**注意**html5标签有兼容性问题老浏览器没效果所以为了客户群多会少用。其他表单新属性(记忆)多媒体标签—audio 音频在网页中播放音频声音属性controls 是否显示播放控件autoplay 自动播放有兼容性问题loop 循环播放有兼容性问题兼容性处理audio controls autoplay loopsource src1.mp3您的版本过低,请升级高级版本 a hrefhttp://www.itcast.cn/点击下载/a
/audio多媒体标签—video 视频在网页中播放视频属性和audio类似controls 是否显示播放控件autoplay 自动播放有兼容性问题mutedloop 循环播放有兼容性问题**区别**可以设置宽高并且显示视频**注意**宽度和高度只需要设置一个另一个会根据等比例缩放如果同时指定两个视频的实际宽高会以小的为基准类似图片原文链接https://blog.csdn.net/weixin_43732485/article/details/109113288?utm_mediumdistribute.pc_category.none-task-blog-hot-10.nonecasedepth_1-utm_sourcedistribute.pc_category.none-task-blog-hot-10.nonecaserequest_idblog.csdn.net作者KC.GUO出处CSDN
