前端必备快速编码工具_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

前端必备快速编码工具_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:15 AM

最受大家喜欢的一个快速编码的工具就是Emmet (Zen Coding),这是一种一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。

也许对于我们这些菜鸟级别的程序员来说，脚踏实地的一字字的打代码才是正确的选择。但是，学会快速的把整个框架和重复代码用最快的速度码出来，这个对每个程序员来说都是很有必要的，而且在工程上还能大大的缩减开发时间。

声明：这里只和大家说最常用的也够你使用的形式，具体的可参考官方文档 ZenCodingCheatSheet.pdf

1、创建模板

开始编码的时候，我们需要一个模板，我们以html5为例。

html:5

几个字符，敲一下 Tab 键就搞定了，生成的模板如下：

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title></head><body></body></html>

这里要说明一下，不是所有的编辑器都敲Tab 键,有的是 Ctrl + E 或 Ctrl + J，这要看你的编辑器是什么而定。

2.css 和 js 导入

导入css

link:css

<link rel="stylesheet" type="text/css" href="style.css" media="all">

导入js

script:src

<script type="text/javascript" src=""></script>

3.开始装逼之旅

开始之前先来熟知一下下面的这些语法：

E元素名（div、p）；

E#id带Id的元素（div#content、p#intro、span#error）；

E.class带class的的元素（div.header、p.error）,id和class可以连着写，div#content.column

E>N子元素（div>p、div#footer>p>span）

E*N多项元素（ul#nav>li*5>a）

E+N多项元素E$*N带序号的元素

以上的语法够你用的了，光说不练嘴把戏，看代码吧！

元素名最简单，其实就是为你创建一个该名称的标签,有的成双成对，有的就只能是单身狗,o(^▽^)o

div  或 input

<div></div> 或 <input type="">

创建带id的元素

div#divid

<div id="divid"></div>

创建带class的元素

div.divclass

<div class="divclass"></div>

带一个儿子

div.divclass>p

<div class="divclass">    <p></p></div>

带一个兄弟

div.divclass>p+span

<div class="divclass">    <p></p>    <span></span></div>

带多个儿子和多个兄弟

div.divclass>p*3+span*2

<div class="divclass">    <p></p>    <p></p>    <p></p>    <span></span>    <span></span></div>

给儿子们取名字和给兄弟不同称呼

div.divclass>p#son$*3+span.brother$*2

<div class="divclass">    <p id="son1"></p>    <p id="son2"></p>    <p id="son3"></p>    <span class="brother1"></span>    <span class="brother2"></span></div>

是不是很神奇，现在来给来个小小的栗子吃，我们用这种方式创建一个导航的简单架构：

div#header>img.logo+ul#nav>li*4>a

见证奇迹的时刻

<div id="header">    <img src="" alt="" class="logo">    <ul id="nav">        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>    </ul></div>

他是怎么实现的呢？这些实现的主要是在一个叫 Zen Coding.js 的文件里面，快捷键方式也是里面决定的。

如果觉得没事的话，自己可以去看看！

细心的朋友应该发现了什么吧，不是说有快速开发CSS的方法么，怎么只有HTML的方法，哈哈，那个太多了！不过小编这边还是大概的和大家总结一下，想要更加详细的内容，可以看看上面提供的官方文档。

4.CSS登场

特殊单词的缩写，除下面外，其它的都用首写字母。

单词	缩写	单词	缩写
position	pos	float	fl
compact	cp	clip	cp
overflow	ov	marquee	mq
zoom	zoo	table	tb
box	bx	shadow	sh
max	ma	min	mi
border	bd	collapse	cl
background	bg	break	bk
background-size	bgz	avoid	av
list-style	lis	content	ct
counter	co	white	wh
word	wo	emphasize	em
smooth	sm	stretch	st
resize	rz	cursor	cur
page	pg	window	wid
radius	rz	orphans	orp

好像很多啊，不过这些能用到的也不是很多，不要紧张，最常用到的也就那几个标上粗体的。

这里为大家演示几个栗子：

pos:s          --->   position:static;fl:r           --->   float:right;ov:h           --->   overflow:hidden;bxz:bb         --->   box-sizing:border-box;bxsh:n         --->   box-shadow:none;whs:nw         --->   white-space:nowrap;cur:p          --->   cursor:pointer;bg:n           --->   background:none;... ...

大家在看官方文档的时候，还会看到一种是用加号（+）的，这个主要是用来做后面有多个参数使用的,但是那也只是提示，不是让你跟着写上去用，如果你写上去了，那就变成这样子：

bxsh+           --->   <bxsh+></bxsh+>这是什么鬼？？？？正确的应该是：bxsh            --->   box-shadow:;

有前缀的要怎么写呢？

-webkit- 的缩写 w-moz- 的缩写 m

再来给栗子：

bdi:m           --->   -moz-border-image:url() 0 0 0 0 stretch stretch;bdi:w           --->   -webkit-border-image:url() 0 0 0 0 stretch stretch;

好了，写的也差不多了。如果学到的话，就来点赞吧！^_^

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.