前端開發注意事項(HTML與CSS進階)

HTML 與 CSS 進階

  • Img 標簽

    alt 屬性 一定要添加 用于圖片描述 給機器看的,如果圖片加載失敗,會顯示 alt

<img src="" alt=""/>    
  • 為 img 添加 圖片注釋 建議做法為 figure(圖形) 和 figcaption [caption(字幕)]
<figure><img src="" alt=""/>    <figcaption>圖片說明</figcaption>
</figure>
  • 表格語義化 數據形式的最佳選擇還是表格

(h5新增 th, caption, thead, tbody 和 tfoot 根據需求選擇使用者三個標簽)

    <table><caption>表格示例</caption><!-- 表頭 --><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><!-- 表身 --><tbody><tr><td>標準單元格1</td><td>標準單元格2</td></tr><tr><td>標準單元格1</td><td>標準單元格2</td></tr></tbody><!-- 表腳 --><tfoot><tr><td>標準單元格1</td><td>標準單元格2</td></tr></tfoot></table>
  • 換行符<br/>
<div><span>標題</span> <br/><span>第一部分內容</span><br/><span>第二部分內容</span><br/><span>第三部分內容</span>
</div>
<!-- 上邊是錯誤用法 吃驚嗎 -->
<!-- br 有自己的特定語義  只適合用戶 P 標簽內部的換行--> 
<p>廣東省<br/>廣州市<br/>黃埔大道61號
</p>
  • 無序列表 <ul>

    主要用于列表型數據

<ul><li><span>1</span>HTML 教程</li><li><span>2</span>PHP 教程</li><li><span>3</span>java 教程</li>
</ul>
有人說,每一個列表前都有數字,為什么不用有序列表實現。
答: 因為有序列表前的數字外觀是固定的,不能修改。所以在開發中,大多數情況下都是使用無序列表
  • Strong 標簽和 em標簽

    可以用于 SEO 突出

W3C 對這兩個標簽賦予了"強調"的語義。 為了SEO突出,可以使用 strong 和 em如果被 CSS 重新定義新的樣式,也不影響這兩個標簽的語義

如何判斷一個頁面是否語義良好

去掉所有CSS效果,查看便知

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/451544.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/451544.shtml
英文地址,請注明出處:http://en.pswp.cn/news/451544.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

如果你懂我…

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 想往的世界&#xff0c;有風如深秋的柳絮… 翻飛在遙遠的寂靜里… 若冷落…若別離… 若守候…若赤誠… 若我…

[NOI2005]維護數列 惡心到毀天滅地的splay

傳送門 debug到死2333. 雖然說是splay維護序列模板&#xff0c;作為蒟蒻的我還是GG %%%考場A的dalao Orz Orz. 其實不開long long也行&#xff0c;inf開成0x3f3f3f3f也可&#xff08;flag,歡迎推翻&#xff09; 就當存個板子吧. #include<bits/stdc.h> #include<cs…

Python的from import和import的區別

對于from...import...&#xff0c;其意義具體是from Module import Function或Class等&#xff0c;這個只是從模塊中導入一個或幾個函數或類的做法。另外一個常見的是import Module&#xff0c;就是把整個模塊中得東西都導入&#xff0c;所以你后面的程序就都可以使用了。另外還…

靜態代理、動態代理、AOP

參考文章&#xff1a; Java中的代理模式——靜態代理以及分析靜態代理的缺點 Java中動態代理的兩種方式JDK動態代理和cglib動態代理以及區別 Spring中的AOP以及切入點表達式和各種通知

Linux系統中解壓縮指令匯總

.tar 解包&#xff1a; tar xvf FileName.tar 打包&#xff1a;tar cvf FileName.tar DirName &#xff08;注&#xff1a;tar是打包&#xff0c;不是壓縮&#xff01;&#xff09; --------------------------------------------- .gz 解壓1&#xff1a;gunzip FileName.gz 解…

python中的@

函數修飾符 ‘’ 用做函數的修飾符&#xff0c;可以在模塊或者類的定義層內對函數進行修飾&#xff0c; 出現在函數定義的前一行&#xff0c;不允許和函數定義在同一行 一個修飾符就是一個函數&#xff0c;它將被修飾的函數作為參數&#xff0c;并返回修飾后的同名函數或其他可…

這樣想起...

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 // 看到一張精致的自然風景圖片&#xff0c;心生向往. 在海的一個小小角落邊&#xff0c;有一寓不很大的房子&#xff0c;暮色浸染的云彩…

python幾種括號表示的類型

python語言最常見的括號有三種&#xff0c;分別是&#xff1a;小括號( )、中括號[ ]和大括號&#xff08;也叫做花括號{ }&#xff09;。其作用也各不相同&#xff0c;分別用來代表不同的python基本內置數據類型。 1、python中的小括號( )&#xff1a;代表tuple元組數據類型&am…

IT巨頭互掐云存儲:Dropbox能否一馬當先

隨著北京時間4月25日Google Drive橫空出世&#xff0c;微軟也迫不及待的發布了SkyDrive的大量更新。各大巨頭進軍云存儲市場&#xff0c;激烈角逐的意向已經昭然可見。網友針對此事紛紛發表熱議。蘋果、微軟、谷歌三巨頭加上一個Dropbox各出各的云存儲高招&#xff1a;微軟SkyD…

Spring集成redis(Spring Data Redis)

2019獨角獸企業重金招聘Python工程師標準>>> 轉載地址&#xff1a;http://blog.csdn.net/zhu_tianwei/article/details/44923001 Spring-data-redis是spring大家族的一部分&#xff0c;提供了在srping應用中通過簡單的配置訪問redis服務&#xff0c;對reids底層開發…

python中利用re模塊使用正則表達式

Python通過re模塊提供對正則表達式的支持。使用re的一般步驟是先使用re.compile()函數&#xff0c;將正則表達式的字符串形式編譯為Pattern實例&#xff0c;然后使用Pattern實例處理文本并獲得匹配結果&#xff08;一個Match實例&#xff09;&#xff0c;最后使用Match實例獲得…

Java三大變量分別是類變量、實例變量和局部變量

什么是變量:就是內容可以改變的量&#xff0c;它與常量相對應。而這三大變量實際上是從變量的作用域來定義和劃分的。 1、類變量&#xff0c;是歸屬類的變量&#xff0c;它是通過在定義類的屬性的時&#xff0c;增加static修飾符&#xff0c;所以又稱為靜態變量。類變量不僅可…

路途

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 PS : 這應該是08年寫的了吧.... 像是追尋明天的滄海一束&#xff0c; 不知道什么時候開始走上這樣熟悉的路途. 當天空開始一點一點變…

redux 源碼詳解

redux 單向數據流的由來 Flux將應用分成四個部分;view 視圖層;Action 視圖層發出的消息&#xff1b;(改變store里面的數據)Dispatch(派發器)Store (數據層) : 用來存在應用的狀態(數據)&#xff0c;一旦發生變動,就要提醒view更新頁面。redux單向數據流&#xff1a; 具體詳情請…

冒泡排序與快速排序(java實現)

冒泡排序&#xff1a; public class bubbleSort {public static void bubbleSort1(int [] a, int n){int i, j;for(i0; i<n; i){//表示 n 次排序過程。for(j1; j<n-i; j){if(a[j-1] > a[j]){//前面的數字大于后面的數字就交換//交換 a[j-1]和 a[j]int temp;temp a[j…

Python中文編碼問題詳解

中文編碼問題是用中文的程序員經常頭大的問題&#xff0c;在python下也是如此&#xff0c;那么應該怎么理解和解決python的編碼問題呢&#xff1f; 我們要知道python內部使用的是unicode編碼&#xff0c;而外部卻要面對千奇百怪的各種編碼&#xff0c;比如作為中國程序經常要…

PHP環境搭建和Apache HTTP服務器配置

所需軟件: 需要準備Apache HTTP 服務器: http://httpd.apache.org/download.cgi PHP環境下載:http://www.php.net/downloads.php Apache HTTP服務器安裝: 由于最新的 Apache 已經不提供 Windows 的安裝版本了&#xff0c;所以我們這里使用的是解壓版。 下載地址&#xff1a;htt…

ElasticSearch安裝過程中遇到的一些問題

問題1&#xff1a; 安裝Elasticsearch5.X版本&#xff0c;不修改默認配置的情況下&#xff0c;一切還好&#xff0c;能夠正常啟動。但我必須開通外網訪問。然后報錯了&#xff0c;報錯信息如下&#xff1a; ERROR: max file descriptors [1024] for elasticsearch process like…

Java原子操作類AtomicInteger應用場景

參考文章&#xff1a;Java原子操作類AtomicInteger應用場景 感謝作者分享&#xff01;

漂泊的足跡

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 似乎有河一樣的蔓延 流淌過我被陽光翻曬過的身軀 你的足跡 是遙遠的一個小島 從不知名的地方漂泊而來