首頁 web前端 html教學 HTML&CSS学习总结(一)_html/css_WEB-ITnose

HTML&CSS学习总结(一)_html/css_WEB-ITnose

Jun 24, 2016 am 11:38 AM

上周用了一周的时间,周一到周五平均每天2-3小时,周六、周日每天各8小时,看网易云课堂燕十八的HTML+div+CSS视频,感觉还不错,按照视频的讲课思路大概做个总结吧。

基本思路:从大的方面(整体结构)着手,将HTML(4.0)的基本知识“解构”然后运用,先不求学全,先学会用。

学习效果:掌握了下面的知识,基本就可以动手写各大网站的首页了,主要是练习使用div布局和CSS效果显示。

一、html的文档结构

doctype 文档类型

  Strict:包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

  Transitional:包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

  Frameset:等同于Transitional但允许框架集内容。如果要写框架就要声名这一种。

head

  title:浏览器工具栏中的标题、页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题

  meta:元数据不会显示在页面上,但是对于机器是可读的。

     规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

     标签始终位于 head 元素中。

    元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

  style:标签用于为 HTML 文档定义样式信息。

body 主要就是div和各类标签

二、用div来控制布局

  布局原则:从大到小、从上到下、从左到右

  盒子模型:有宽(width)高(height),有边框(border)、有外边距(margin)、有内边距(padding)

  浮动布局:div可以”飘“起来(float)、也可以清除浮动(clear)

  自己可以试着,用简单的div+背景色,来试着布局,增强自己的”大局观“。

三、用CSS来控制显示效果

  先了解各类选择器:di、class、标签、派生、伪类、通配

  再了解各类效果如何控制

    段落控制

      text-align 文本水平对齐设置
      text-decoration 划线方式
      letter-spacing 文本中单字的间隔
      text-transform 大小写转换

    文字控制

      color 颜色设置 font-style 斜体设置 font-weight 文字粗细 font-size 文字大小 font-family 文字字体

    背景控制

      background-color 颜色
      background-image 图片
      background-repeat 图片平铺
      background-attachment 滚动
      background-position 图像在背景中的位置

  CSS的引入方式:页内style标签、外部CSS文件、行内style标签、import导入

  CSS的初始化

    原因:浏览器对元素有默认的CSS参数,且可能不一致,导致浏览器之间显示效果不一样

    解决方法:统一对常用元素常用CSS参数,手动设定统一效果

四、html标签

  无语义标签:div、span
  有语义标签
    h1-h6 标题
    p 段落
    img 图片
    a 超链接和锚点
    ul 无序列表
    ol 有序列表
    table 表格

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1230
24
HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

See all articles