HTML5里有些小技巧容易被大家遗忘,其实它们挺实用的~给大家普及一下HTML5里那些容易被忽略的知识点,帮助大家在搞网页的时候更顺手!
设置WebStorm输入内容超出屏幕后换行
用WebStorm做网页设计,常常手写到窗口外边去了,别急!只要在设置里把“编辑器”那栏点开,选中“启用softwraps”就OK!这样,当你写出的那啥超过窗口范围时,WebStorm就会帮你自然地转个弯儿,让你的代码看起来干净利落!
base标签的使用
你知道吗,HTML5里有个叫”base”的标签特别好用,就是为了给所有的超级链接(用’a’标签表示的那种)定规矩,让它们按照同一种方式打开页面。记住,这个tags得放在head标签的前后两个尖括号中间。用了它以后,不管哪个地方出现的链接,都会按照给出的规则去跳转,大大提高了开发速度!
1) 百度一下,你就知道 #的假链接会自动回到网页的顶部 2) 百度一下,你就知道 而Javascript的假链接不会自动跳转到网页顶部
假链接的妙用
做网页时,咱们常常搞些不跳转的连接,就叫它“假链接”。咋弄?简单分两种方法:一是用#号,那么点了之后页面直接跳回最上面;二是用JavaScript,那就不会动。巧妙利用这个假链接,可以玩出很多花样来。
锚点的神奇作用
在HTML5里有个叫锚点的东西超好用。用它,你只要设定好标签的ID和唯一值,就能通过a标签直接跳转了。打个比方,如果你想从某个地方跳转到另一处,那就在目标标签上设这个独特身份识别码(ID),然后把这个认可认证号交给a标签。这样,等你点击a标签,页面自然而然地就去到了那个指定位置。用锚点,网页导航也变得容易多了!
列表标签的多样应用
在HTML5里,咱们最常见的就是列表这玩意儿了。这东西有多种形态,包括无关紧要的无序列表啊、按顺序排列的有序列表以及说一不二的定义列表等等。比如说无序列表,我们就能用它来搞新闻列表、商品列表还有导航栏之类的界面设计;有序列表,就比较擅长制作排行榜这样需要循序渐进的内容展示;至于定义列表,更适合放在网站尾部,用来展示相关信息或者图文并茂的页面布局。只要你会玩转这些列表,随心所欲的列表效果都不在话下!
表格标签的细致设置
表格标签就是HTML5里用来放数据的东东。咱们用caption标签给表格起个名字,它会自己跑中间去哦;还有th标签,大名鼎鼎的表头,格式就是居中加粗;最后是用td标签装进表格里的各种小虾米们,数据就都在这了。只要把这些标签搞定,表格就能变得好看又好认。
表单标签的交互设计
ul>li*3
- 北京
- 上海
- 广州
知道吗?HTML5的表单标签可是搜集你输入信息的好帮手!它包含了input标签能做很多事,例如创造出各种表单控件,包括但不限于文本框啊、密码框啊等等;还有label标签能够贴上标签文本在控件上面;最后,button标签则能塑造出让你帅气点击的提交按钮!总之,只要好好设计表单标签,就能让你的表单变得更美且好用~
多媒体标签的丰富应用
- 演员
- 小丑
- 龙卷风
- 青花瓷
说到网页上的多媒体,HTML5里的多媒体标签就很关键!用它们,你既能插入音频(用audio标签),也能用这个(video标签)插入视频~还能用source标签告诉它,这些媒体文件从哪儿来。用这些简单的标签就能让你的网页变得更有活力~
语义化标签的清晰结构
HTML5里有个语义化标签,用它就能把网页分成几块:头、导航、主体和脚。比如标签header可以用来标记页面顶部,nav就是导航栏部分,article就是正文,最后的footer则是页面最下面一行。这么一整,网页看起来很清晰、好懂多了。
实战案例:制作一个简单的网页
接下来,咱们就拿个实际例子来说说怎么用HTML5的各种标记做一个小网页!首先先建个HTML文件。在里面放上head跟body两个标记。现在,进到head里,加个title让网页有个名儿。紧接着body里边加上header,这是页面头部,再往里添个h1,主页大标题搞定!再来,body加上nav,导航栏搞定。别忘了ul和li,导航链接全靠它们了。然后,还是body那儿,加上article,主要内容在这儿,p标签搞定正文段落。结尾了,得有脚注,footer上场,版权声明赶快贴上去。这样一番实践操作,你就能明白这些HTML5标记怎么用了。
总结与展望
这样一说下来,大家都知道了HTML5里那些很小的但容易忽视的知识点。下次做网页的时候,别忘了多注意点这些小地方,会让你的页面看起来更好玩、好用~最后,欢迎大家来评论区聊聊你们在建网页时碰到过哪些类似的问题以及怎么解决的,咱们互相切磋一下、学点儿东西呗!
姓名 | 年龄 | 籍贯 |
张三 | 18 | 重庆 |
评论0