这是一个值得纪念的日子,经过若干个月若干个版本的等待,
VSCode 1.8中的HTML已提供完整的CSS与Javascript支持。
感谢一直以来关注这个问题的朋友,欢呼吧大家~
==================================================================
原回答
知乎首答……
升了1.3之后立马就发现这个问题了,js那个倒是很久之前就一直有了,超级不方便,也不知是怎么想的。
一开始以为是我电脑的bug,后来上了github才发现不只是我一个人遇到了这个问题。
然后仔细翻了一下1.3的doc发现CSS被提取出来了(可能是因为这个原因导致css in html的提示丢失了)
(一)常用的CSS命名规则头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red}
.f60 { color: #f60}
.ff8600 { color: #ff8600}
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px}
.font9pt {font-size: 9pt}
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left}
.bottom { float:bottom}
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写
2.尽量用英文
3.不加中杠和下划线
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
1.有序列表:每项之间有先后顺序,默认在每项前面显示1,2,3…<ol type="A">:在每项前面显示A,B,C…
<ol type="a">:在每项前面显示a,b,c…
<ol type="I">:在每项前面显示I,II,III…
有序列表ol增加了一个属性, <ol start="50">,这样就指定了起始值从50开始
2.无序列表使用一对闭合的标签表示, <ul></ul>。内部的一项使用 <li>内容 </li>来表示。
可以通过ul标签的type属性来修改这个修饰符。
<ul type="disc">显示为一个圆点,是默认值
<ul type="circle">显示为一个空心圆圈
<ul type="square">显示为一个实体正方形
“无序”指的是没用数字或字母等来标记,不是像1,2,3或a,b,c这样的显示,而是前面增加一个圆点来表示。
3.自定义列表
<dl>标签全称是definition list,代表“自定义列表”。 <dl>后面的l代表list,列表的意思。
<dt>标签全称是definition term,代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt>后面的t代表term,“项目”的意思。
<dd> 标签的全称是definition description,代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd>后面的d代表description,“描述”的意思。
例子:
使用 list-style-type: none
id:指定标签的唯一标识
class:指定标签的类名,class可以通过给多个元素赋予同一class,批量操作来设置css
块元素都是独立显示,把内容分割成块,是网页的主要结构模块;行内元素,即内联元素,只显示在段落的文字流中,是用来标记内容的小片段
块级元素标签 h,ul,li,ol,p,div
行内元素标签 a,em,q, img,span
页面分:头部、内容、底部,头部有三个导航栏,内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。
语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
1.<form>标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
<form name="myForm" action="/test/6.php" method="post">
name:表单提交时的名称;
action:提交到的地址,如果不写action,信息就会提交到当前页面;
method:提交方式(get和post),如果不写,默认的是get
2.常用标签:
复选框当中,可以把name值设置成一个数组,例:
<button>提交 </button> ——普通按钮,button默认是不提交任何数据,需要绑定事件才可以用提交数据
<a class="btn" href="#">提交 </a> ——链接
<input type="submit" value="提交"> ——提交按钮,提交信息到服务器
设置name值实现分组,如果name值相同,则表示它们是一组,可以实现单选。
placeholder 属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
<input type="hidden" name="identity" value="123">