HTML 縮寫模組與樣板語言

In Coding By Sigrid On
HTML 縮寫模組與樣板語言

我們之前討論到 HTML 如何透過各種不同的層級標籤來建構網站，但大家應該都有發現，我們經常要打許多大於、小於、也不能忘記結束標籤，結構看起來複雜又冗雜。今天，就來介紹易於編譯的模組及語言吧！

Photo by Greg Rakozy on Unsplash

html 縮寫模組｜Emmet

按 tab 可以展開 emmet 表示式：

  • 接 . 變為元素裡的 class
  • 接 {} 裡面內容則可被包為內容，標題、內文直接被填進去
  • 利用 div 建構層級關係，包住每張卡片裡的標題、水平線、內文
  • div 是最常見的，所以承上也可以不必打 div，直接打 . 接 class 再包住後面的元素。想要兩張卡片，在 .card 後面直接 *2 就變成兩張的物件了（驚）
  • 導覽列 ul 裡的 list item 想要有六個，*6 這樣的用法就非常實惠好用
  • 若希望清單有編號，可用特殊字元 $ dollar sign，展開後會變成數字
  • image 需要給 src、寬高度的屬性，用中括號包住特定網址和屬性
  • 綜合應用：bootstrap 為寫好很多的 class 讓我們直接套用，自訂 class 名稱，包住一列 row，再包住一行 column 小螢幕 sm，裡面有小群組 h2、hr、內文 p，再加上一行小螢幕 dash 4，裡面一樣有小群組 h3、hr、內文，用 emmet 按 tab 展開就得到了一個網頁，從剛開始裝的容器、列行與標題及內文，可以快速只打一行就能產生 html 的結構，不用打開始與結束的符號

但也有個缺點，代表寫網站前所有的架構、分割都要確認好，這其實不太可行，所以通常只會拿來寫一小部分，展開後就用完。
Emmet 縮寫大全：https://docs.emmet.io/cheat-sheet/

html 樣板語言｜jade (pug)

用 html 打程式碼有什麼缺點呢？我們要打很多小於大於多層複雜的結構、建立嚴謹的從屬關係但又很難一眼就看懂之間的層級關係、尾端還要再加一個結束的標籤，使得整個網頁原始碼又長又亂。理想的狀況下，我們其實只想知道三件事：

  1. 標籤是什麼 (div, p, h1..?)
  2. 標籤有什麼參數跟屬性 (class = “namecard”, style/img 的 src 連結是官網…等)
  3. 標籤包了什麼內容 (開始跟結束裡面包的, 譬如 h2 裡放了作者的名字、h5 裡有職稱)

於是 jade 樣板語言出現了。我們在 Settings 裡將 HTML Preprocessor 設定為 Pug，如果我們想要連結 link，也就是 a 標籤，在 HTML 視窗右上方再設定 View Compiled HTML，就能看到 jade 自動幫我們展開。屬性透過小括號設定，就能直接變成 html。記得內文跟在標籤後，不能有空格。

Settings 裡將 HTML Preprocessor 設定為 Pug
如果我們想要連結 link，也就是 a 標籤，在 HTML 視窗右上方再設定 View Compiled HTML
jade 自動幫我們展開

想要在網址裡放 div namecard，往右縮打 div.namecard 就完成，跟 emmet 一樣也可以寫成 .namecard 即可。往下再包兩個 circle 打 .circle.circle1 及 .circle.circle2

寫內文則是 h2 後空一格貼內文，就會變成 h2 裡面的內容；想在 h2 裡加 span，換行後縮排空一格貼上要在 span 裡放的內容。當 h2 和 .namecard 的縮排是同一層，namecard 就不會包含 h2，要再縮排才會在 namecard 裡編譯 h2

當東西很多行要空下來換行，但如果單純縮排顏色不太對，要加一條直線 | 才會視為接在原本內容的後方。

使用 jade，我們依然可以透過縮排確認嚴謹的層級關係、藉由小括號將屬性明顯地置放在後面、空一格放內文就不需再放結束標籤。jade 同樣可以用 emmet，而 emmet 是用中括號 [] 代表屬性，^ 是跳出某層級回到上一層級，打完按 tab 展開成 jade。

1,953 thoughts on “HTML 縮寫模組與樣板語言”

  273. The most talked about weight loss product is finally here! FitSpresso is a powerful supplement that supports healthy weight loss the natural way. Clinically studied ingredients work synergistically to support healthy fat burning, increase metabolism and maintain long lasting weight loss. https://fitspresso-try.com/

    Reply

  582. BendroflumethiazideChlortalidone Hygroton Cyclopenthiazide Navidrex Indapamide Natrilix Metolazone Metenix 5 Xipamide Diurexan Indicated for hypertension in elderly patientsTend to exacerbate diabetes, gout, systemic lupus erythematosusMay cause postural hypotensionPropranolol Inderal Acebutolol Sectral Atenolol Tenormin Bisoprolol Cardicor Carvedilol Eucardic Celiprolol Celectol Esmolol Brevibloc Labetalol Transdate Metoprolol Betaloc Nadolol Corgard Nebivol Nebilet Oxprenolol Trasicor Pindolol Visken Sotalol Beta-Cardone Timolol Betim Should not be used by patients with asthma or bradycardia or hypotensionShould be avoided in patients with a history of Raynaud’sMay cause distal paraesthesia, impotence, dizziness and exacerbation of psoriasisAngiotensin-converting enzyme ACE inhibitors ‘..
    Can I buy alternative to lyrica . Get your ED treatment now!
    Eggers SD expert opinion.

    Reply

  583. Melanomas of the Skin Cancer SymptomsWhat Melanomas of the Skin Cancer Survivors said about their Cancer Symptoms.
    prices are available from pharmacies online for when you glucophage medicaments can be researched on a pharmacy website.
    In two studies using the fibric acid derivative gemfibrozil, reductions in cardiovascular end points were also achieved 51,52.

    Reply

  650. Since chondrosarcoma affects people of middle age and older, the support group is geared to their particular additional needs.
    Is there a way to tell if a doxycycline vs azithromycin to start feeling better
    Contraception 63:131, 2001 Jain JK, Meckstroth KR, Mishell DR: Early pregnancy termination with intravaginally administered sodium chloride solution-moistened misoprostol tablets: Historical comparison with mifepristone and oral misoprostol.

    Reply

  651. The information in this summary comes from the report Venous Thromboembolism Prophylaxis in Orthopedic Surgery, March 2012.
    Take off problems of erection. Follow this link valtrex 1 gram . Check what best for you.
    During this period, people are very contagious with the virus.

    Reply

  660. After years of low libido,ED and just general lack of energy I found a urogist will to look at my symptoms.
    Consumers are aware of low price of valtrex use for an extended period?Check online to find the best place to
    Click “like” to follow LifeSite on Facebook!

    Reply

  664. It is spread by the bite of mosquitoes, most commonly the mosquito Aedes aegypti , which is found in tropic and subtropic regions.
    Bonus pills added if you lisinopril dizziness at cost-effective prices when you get it from good online
    The present study used the job demands-resources model as a theoretical frame-work to examine the way in which job demands e.

    Reply

  668. Changes in behavior- If you find it difficult to plan or handle more than one task like you did earlier with ease, or if you experience confusing thoughts or get distracted easily, you should seek a medical opinion.
    Everyone can afford to keflex and alcohol from India at a discount.
    Overview Autoimmune Fibromyalgia DiagnosisTreatments Overactive Bladder Patient Stories.

    Reply

  671. Hypochondria van der Feltz-Cornelis CM, van Houdenhove B.
    Significantly reduced prices mean you can nolvadex canada benefits and drawbacks?
    Since birds infected with H7N9 don’t get sick the way humans do, they can silently spread the disease between countries.

    Reply

  672. In order to determine the appropriate treatment for each individual lesion, musculoskeletal oncologists must take into account the clinical, radiographic, histologic and soon the microbiologic characteristics of the tumor.
    low prices for your must-have drugs and shippingIf you plan to keflex for dogs dosage for details.
    Please read the following article on autism and the protective mechanisms of magnesium.

    Reply

  674. I am partial to YOU HAVING A BABY by the YOUdocs, but then again I am their YOUnurse and entitled to have favorites.
    from Omsk | Simple management of ED at nolvadex steroids . Be active!
    Appendicitis is typically caused by obstruction of the appendiceal lumen, with resultant build up of fluid, secondary infection, venous congestion, ischaemia and necrosis.

    Reply

  676. A plethora of both prescribed and over-the-counter medications can provoke delirium, including analgesics, antibiotics, cardiac medications, anticholinergic agents, psychotropic agents, and a variety of botanicals, such as jimsonweed.
    High quality service and low prices for cephalexin medication at low prices
    Swelling in the legs, arms or pelvis often accompanies blood clots that develop deep inside the blood vessels.

    Reply

  679. com 20 E2 AD 90 20Where 20Can 20You 20Get 20Viagra 20From 20 20Comment 20Fonctionne 20Le 20Viagra comment fonctionne le viagra China s water shortages stem more from problematicurbanisation and water resource management, rather than thescapegoat of climate change, said Zhou Lei, a fellow at NanjingUniversity who studies how industry affects the environment buy priligy reddit

    Reply

  702. Screening recommendations for asymptomatic women.
    Some pharmacies give free consultation when you sildenafil for dogs as it is modestly-priced and effectively works to relieve
    The main symptoms of diabetes are increased urination polyuria , thirst polydipsia and tirednessSymptoms of type 1 diabetes can develop quickly, over weeks or sometimes days.

    Reply

  706. On a school nite with my 10yr old son.
    Enjoy effective treatment when you good rx sildenafil being it is discounted and it treats your medical condition
    During a sickle smear, some blood will be prepared in a low oxygen environment and looked at under a microscope to identify the trademark red blood cell shape associated with the disease.

    Reply

  720. They are able to pass on the virus for the rest of their life two to three months.
    you get the best price when you stromectol for humans at budget prices keep your medical costs affordable. Buy here
    Fortunately, for most women energy levels usually increase during the second trimester, so most women will feel better and have more stamina during the rest of your pregnancy, or at least until the last trimester.

    Reply

  721. Evidence suggests that mindfulness-based stress reduction — an intervention that teaches individuals to attend to the present moment in a non-judgmental, accepting manner — can reduce symptoms of anxiety and depression.
    I can quickly get my can you drink alcohol on zithromax . Check what best for you.
    The pain is usually the first symptom, and often begins around the belly button.

    Reply

  730. Get medical help right away, if you develop a rash over your whole body, have trouble breathing, a fast heartbeat, or sweating.
    You can always find it online and the price of prozac vs cymbalta and save quite a bit of money
    I will keep it in mind as I research.

    Reply

  732. A number of mycotoxins were obtained from laboratory cultures of F.
    Instead of paying high prices locally for bactrim suspension for quick resolutions on erection problems.
    The purpose of this article was not to go through ingredient list, but to share the various options and then trust parents like you yourself did to consider each formula for their child.

    Reply

  742. snack video downloader
    Hello there, just became aware of your blog through Google, and
    found that it is really informative. I am gonna watch out for brussels.
    I will be grateful if you continue this in future.
    Numerous people will be benefited from your writing.
    Cheers!

    Reply

  744. surga888
    Attractive section of content. I just stumbled upon your
    site and in accession capital to assert that I get actually
    enjoyed account your blog posts. Anyway I will be subscribing to your augment and even I achievement you access consistently quickly.

    Reply

  754. Congenital Heart DefectsChildren and adults can be diagnosed with a heart defect occurring at birth.
    If you are ill or in pain your meds are cheaper with stromectol xl is.
    Your doctor may prescribe antiviral drugs that can treat the flu.

    Reply

  755. When pressure increases inside the skull, changes in the optic nerve can occur.
    Any time you happen to be searching the web for a great remedy, buy stromectol pills for all erection problem solution. Get one now!
    However, it can also be a sign of cervical cancer.

    Reply

  756. DOCTORS: Click here for the Consumer Version Overview of Arbovirus, Arenavirus, and Filovirus Infections Was This Page Helpful?
    Look at discount offers to get a great deal when you can ivermectin cream 1 you can save even more when you get generic.
    Hi can anyone help, im in the middle of ovulation and I went to the loo 2 days ago and when I wiped there was a tiny drop of blood but my discharge is still white and sticky and iv not seen anymore blood at all?

    Reply

  760. Hyperthermia differs from fever in that the body’s temperature set point remains unchanged.
    People realized that by searching for ivermectin drug from legitimate pharmacies if you desire cheap discounts
    People with celiac disease may present with various gastrointestinal symptoms, including diarrhea, malabsorption, and weight loss.

    Reply

  761. However, diabetes can be controlled and the symptoms relieved using a combination of diet, exercise and a variety of products — like socks, vitamins and creams — made to meet the special needs of people with diabetes.
    get cheaper rates.Health benefits are achievable when you buy ivermectin cost australia at superb savings to help minimize symptoms and feel healthier
    Back in Cange, Dr.

    Reply

  765. All findings from clinical examinations and investigations and pathology reports are important and must be considered together to decide the prognosis of an individual case of breast cancer.
    You should only amoxicillin online pharmacy is more convenient
    Dileo showed that in soldiers in PTSD olfactory identification deficits as a predictor of aggression and impulsivity.

    Reply

  766. High blood pressurePericardial effusion is a condition in which an abnormally large amount of fluid collects in the pericardial sac that surrounds the dog’s heart…
    When you shop online for an effective treatment, you want to boots pharmacy cetirizine when you can get it cheap
    Incidentaloma – a CT finding found incidentally, usually of insignificance but causing a lot of emotional distress for patients.

    Reply

  768. In many cases a tender, tingly or sore sensation accompanies this change.
    less that people prefer to shop online.Shop for great deals and stromectol cream will ship fast and safe.
    It may cause your pet discomfort and a sore throat, but otherwise should not create a tremendous amount of damage.

    Reply

  769. I go back to work in 1 week and I am so frustrated that she is not even settled on a food yet!!!
    Fear no more with ivermectin 50ml is easy.
    TV is for informational purposes only and is not a substitute for medical advice, diagnosis, or treatment.

    Reply

  773. People who suffer from phobias fear all kinds of things.
    Powerful treatment is available when you boots pharmacy kamagra sold with amazing discounts by a specialist site
    To spare normal tissues such as skin or organs, which radiation must pass through to treat the tumor , shaped radiation beams are aimed from several angles of exposure to intersect at the tumor, providing a much larger absorbed dose there than in the surrounding, healthy tissue.

    Reply

  776. While the onset of Type I diabetes is unpredictable, the risk of developing Type II diabetes can be reduced by maintaining ideal weight and exercising regularly.
    Always follow proper dosage instructions when you Precose pills when you buy through this site
    A look at Drake, post-beef SBN.

    Reply

  777. Your dog deserves a long and healthy life.
    Consider various price options before you mexican online pharmacy oxycodone is by comparing prices from pharmacies
    Intensity-modulated radiation therapy IMRT : A type of 3-D radiation therapy that uses a computer to make pictures of the size and shape of the brain or spinal cord tumor.

    Reply

  785. The pain may result from the cancer compressing or eroding into nerves or other structures.
    to get what you needOnline comparison shopping allows you to is reliable rx pharmacy legit as they provide reliable reviews. Always get the best deal!
    It may also be a good idea to have resources to which you can direct a partner, so you know they turn to trustworthy sources for information.

    Reply

  786. Early-morning readings are highest.
    time you happen to be searching the web for a great remedy, buy oxycodone mexican pharmacy pills at a drugstore, save money by buying online
    Mental Health Professionals: Both psychologists using mostly counseling techniques and psychiatrists doctors who can also prescribe drugs should be available as any mental health disorder can affect diabetes control.

    Reply

  789. If the testicular cancer has metastasized, or spread to another place in the body outside of the testicles, other symptoms may occur in addition to the ones previously listed.
    Are there any side effects in taking economy pharmacy . It’s good for ED too!
    Just as your breasts can become tender before each period due to hormonal changes, the hormonal changes associated with pregnancy can also cause your breasts to become extremely swollen and sore.

    Reply

  810. Impaired glucose regulation impaired glucose tolerance, or impaired fasting glucose—see Table: Diagnostic Criteria for Diabetes Mellitus and Impaired Glucose Regulation is an intermediate, possibly transitional, state between normal glucose metabolism and DM that becomes more common with aging.
    providersPreventing errors is your responsibility when you best tadalafil brand for privacy.
    Agoura Hills Animal Hospital, California.

    Reply

  814. I would appreciate being informed of your link.
    Immediately identify low prices and buy discount levitra . ED drugs come in lower price.
    Charlize Theron sweats out her stress as it is revealed Sean Penn went on a ‘dinner date’ with CSI’s Emmanuelle Vaugier Seemed to be a spark Friends with the ex!

    Reply

  821. Ninety-nine percent of all human DNA is identical, but that one-percent difference is often the root cause of mental disorders.
    online? Do it here. tadalafil 40 mg from india , will my partner have any negative feelings?
    Psychological and behavioural effects of endogenous testosterone levels and anabolic-androgenic steroids among males: a review.

    Reply

  822. In men, the presence of BE was also significantly asso-ciated with elevated ORs for specific phobia, daily smoking,alcohol problems, use of pain medication, and impairmentdue to mental health after controlling for BMI.
    Immediately identify low prices and cialis tadalafil s online can be both safe and risky.
    Sterile salt water is then injected through the scope to expand the bladder and allow the doctor to look at the inner lining of the bladder.

    Reply

  831. However, those studies were performed before improved standardization of methodology and probably overestimated her2-neu overexpression.
    Maximize the amount you save on sildenafil side effect ! Order reliable products from us.
    There are at least five major types of skin reactions.

    Reply

  832. Participants rated20 items on a scale ranging from zero rarely or none of the time to three most or all of the time.
    offers received from pharmacies to get low prices when you sildenafil interactions you can save dollars.
    Report this content as offensive or unsuitable comment id 57333 Following on from, “Wiped out!

    Reply

  843. Nasal Allergy Symptom Controllers Mass Cell Stabilizers : Like antihistamines, nasal allergy symptom controllers also known as mast cell stabilizers also reduce the effects of histamine, but in a different way.
    Consumers are aware of low price of sildenafil citrate 100mg tab from.
    The length of your treatment is based on your hepatitis C genotype.

    Reply

  844. Growing up in a family where others are fearful or anxious can “teach” a child to view the world as a dangerous place.
    best prices can be located by making use of online promotions to sildenafil oral jelly 100mg kamagra from professional pharmacies
    We recorded the signs and symptoms of patients presenting with exocrine pancreatic cancer and evaluated their association with clinical characteristics such as tumour site and disease stage.

    Reply

  851. Splints or special boots can sometimes help protect vulnerable joints.
    Deals are available to tadalafil price for quick resolutions on erection problems.
    Other obsessive symptoms such as checking might be seen as a way of dealing with the unwanted intrusion of hostile oedipal wishes.

    Reply

  852. My cycle is 26 days now its 31 days what caused the change, I was 5 days late, how do I no when I ovulate , why does my breast get sore so often is it a sign of ovulation, how do I improve my chances of getting pregnant faster?
    are Internet sites that will help you to compare prices for tadalafil coupon you are getting the best medication available
    Always seek prompt professional medical advice about the cause of any symptom.

    Reply

  859. On May 23rd, 2011 at 11:34 amamber says…
    Your privacy should be safeguarded when you tadalafil chewables too.
    Treatment of cervical cancer depends on the type of cancer, the stage, the size and shape of the tumor, the age and general health of the woman, and her desire for future childbearing.

    Reply

  860. In addition to staffing the psychiatric inpatient unit at Anna Jacques Hospital, Newburyport, he maintains an outpatient practice with Harris Street Associates.
    If money is tight, buy your how much is tadalafil from India at a discount.
    This has gone on for as long as I can remember Although In my line of work I am always on the go and I was always ok after this until just lately I have started to have these symptoms when I finish work also…..

    Reply

  874. The sequencing of the influenza genome and recombinant DNA technology may accelerate the generation of new vaccine strains by allowing scientists to substitute new antigens into a previously developed vaccine strain.
    Take the time to shop around when you want to vardenafil generico 10 mg for serious help
    This increased risk is present if the woman is having or has recently had an active herpes outbreak in the genital area.

    Reply

  884. The Oxford criteria identify two broad syndromes remember these definitions are primarily for research purposes : 1.
    offers received from reputable pharmacies before you actually tadalafil 20 mg tablet uses from trusted pharmacies online Corruption and violence are high
    The symptoms lower down improved, but I was still exhausted, started to get chills and had lower back pain, with tenderness and swelling in the region of my kidneys.

    Reply

  885. Question is Closed Report Favorite Answers 116 Sort answers: Oldest Newest Highest Rating Lowest Rating Shifty 26 Aug 2006 Yes, there are countless lists of side effects from withdrawing from this drug.
    if you do it via the web | Benefiting from risk free remedy? tadalafil oxytocin pt-141 reviews for all medications are available globally
    Can someone please give me some advise and soon On January 26th, 2011 at 2:51 pmRaynie says…

    Reply

  1044. anginslot anginslot anginslot
    Hello! Would you mind if I share your blog with my facebook group?
    There’s a lot of people that I think would really enjoy your content.
    Please let me know. Cheers

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *