前端零基礎(chǔ)入門-步驟一：頁面結(jié)構(gòu)層HTML-01-HTML基礎(chǔ)

1-HTML基礎(chǔ)

第1章基礎(chǔ)語法

html是超文本標(biāo)記語言
<head>,<title>標(biāo)簽里的內(nèi)容不會(huì)在網(wǎng)頁文檔中顯示
<hr/>標(biāo)簽是水平線，不需要成對(duì)出現(xiàn)
注釋代碼：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

第2章文章段落

2.1 文檔聲明和META標(biāo)簽

<html>,<body>,<head>標(biāo)簽是html文檔結(jié)構(gòu)標(biāo)簽，<!DOCTYPE HTML>不屬于html標(biāo)簽，它用于定義文檔類型

網(wǎng)頁中不能正常顯示中文，出現(xiàn)亂碼現(xiàn)象，使用meta標(biāo)簽設(shè)置編碼格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一個(gè)網(wǎng)頁</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起來學(xué)習(xí)html標(biāo)記語言
</body>
</html>

3.如果想在html頁面中顯示空格，使用

標(biāo)題標(biāo)簽：<h1></h1>~<h6></h6>

段落標(biāo)簽：<p></p>

align對(duì)齊屬性值：

left:左對(duì)齊內(nèi)容

right:右對(duì)齊內(nèi)容

center:居中對(duì)齊內(nèi)容

justify:對(duì)行進(jìn)行延申，這樣每行都可以有相等的長度

換行標(biāo)簽<br/>

5.一個(gè)<p></p>標(biāo)簽代表一個(gè)段落，兩個(gè)<p>標(biāo)簽中的文本內(nèi)容不在同一行，在<p>標(biāo)簽中，使用<br/>文本內(nèi)容的位置只是換行，其實(shí)還是一個(gè)段落

6.<pre></pre>標(biāo)簽用于預(yù)定義格式顯示文本，即文本在瀏覽器中顯示時(shí)遵循在HTML原文檔中定義的格式

<!DOCTYPE html>
<html>
<head>
	<title>練習(xí)1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早發(fā)白帝城》</h3>
	<p align="center">朝辭白帝彩云間，千里江陵一日還。</p>
	<p align="center">兩岸猿聲啼不住，輕舟已過萬重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>練習(xí)2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     陰山下，<br/>
	     天似穹廬，<br/>
	</p>
	<pre>
  籠蓋四野，
   天蒼蒼，
   野茫茫，
風(fēng)吹草低見牛羊。
	</pre>
</body>
</html>

2.2 文字和段落標(biāo)簽

文字斜體：<i></i>和<em></em>
加粗：<b></b>和<strong></strong>
下標(biāo)：<sub></sub>
上標(biāo)：<sup></sup>

特殊符號(hào)

任務(wù)

<!DOCTYPE html>
<html>
<head>
	<title>任務(wù)</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">關(guān)于我們  |  招聘信息  |  聯(lián)系我們  |  意見反饋</p>
	<hr/>
	<p align="center">Copyright ? 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任務(wù)</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表標(biāo)簽

3.1 列表標(biāo)簽-無序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ul>
	<ul type="square">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ul>
</body>
</html>

3.2 列表標(biāo)簽-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ol>
	<ol type="i">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ol>
</body>
</html>

3.3 列表標(biāo)簽-定義列表

<dt><dd>是同級(jí)標(biāo)簽

第四章圖像和超鏈接

4.1 圖像

圖像標(biāo)簽

絕對(duì)路徑：

相對(duì)路徑：

效果圖

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅圖像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅動(dòng)畫圖像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超鏈接

超鏈接標(biāo)簽

空鏈接：<a href="#"> </a>

4.3 錨鏈接

定義錨（同一頁面）

任務(wù)：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">這里是頂部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">運(yùn)動(dòng)</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>蘋果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>櫻桃</li>
		<li>菠蘿</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回頂部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西紅柿</li>
		<li>黃瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫蘆</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回頂部</a></p>
</body>
</html>

定義錨（不同頁面）

4.3 鏈接擴(kuò)展功能

1. 電子郵件鏈接

2.文件下載

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">郵箱鏈接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下載</a>
</body>
</html>

原文鏈接：https://blog.csdn.net/qq_43405634/article/details/103789819

由于漢字的特殊性，在css網(wǎng)頁布局中，中文排版有別于英文排版。排版是一個(gè)麻煩的問題，小編認(rèn)為，作為一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)師和網(wǎng)頁制作人員，掌握一些簡單的中文排版技巧是不可或缺的，所以今天特意總結(jié)了幾個(gè)簡單實(shí)用的技巧，希望對(duì)大家有所幫助。

Web前端教程

　　一、如何設(shè)定文字字體、顏色、大小等

　　font-style設(shè)定斜體，比如font-style:italic

　　font-weight設(shè)定文字粗細(xì)，比如font-weight:bold

　　font-size設(shè)定文字大小，比如font-size:12px

　　line-height設(shè)定行距，比如line-height:150%

　　color設(shè)定文字顏色，注意不是font-color喔，比如color:red

　　font-family設(shè)定字體，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif

　　二、使用margin，text-align 控制段落

　　中文段落使用p標(biāo)簽，左右、段前段后的空白，都可以通過margin來控制。

　　比如

　　margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點(diǎn)開始的順時(shí)針方向*/

　　}

　　而text-align則用于文字的對(duì)齊方式。

　　比如

　　text-align:center;/*居中對(duì)齊*/

　　}

　　除了居中對(duì)齊之外,對(duì)齊方式還有左對(duì)齊、右對(duì)齊和兩端對(duì)齊，對(duì)應(yīng)的屬性值分別為left、right、justify。

　　提示：由于默認(rèn)的margin值會(huì)導(dǎo)致頁面排版出現(xiàn)問題，特別是ul、ol、p、dt、dd等標(biāo)簽。小編的解決之道就是把所有標(biāo)簽的margin值定義為0。

　　三、豎排文字—使用writing-mode

　　writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。

　　寫法如

　　writing-mode:tb-rl;

　　}

　　四、使用list-style美化列表

　　如果我們的排版涉及到列表，不妨考慮為它添加些項(xiàng)目符號(hào)進(jìn)行美化。

在CSS里，項(xiàng)目符號(hào)包括disc（實(shí)心圓點(diǎn)）、circle（空心圓圈）、square（實(shí)心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。

　　嘿嘿！我們可用的項(xiàng)目符號(hào)數(shù)量不少喔，但美中不足的是我們不能為它們?cè)O(shè)定大小，也不能設(shè)定垂直方向上的對(duì)齊。

　　如果我們想設(shè)定一個(gè)列表的項(xiàng)目符號(hào)為方塊，可以這樣寫：

　　li{

　　list-style:square;

　　}

　　小編在這里提醒大家一下：當(dāng)一個(gè)項(xiàng)目列表的左外邊距設(shè)為零的時(shí)候，list-style-position:outside的項(xiàng)目符號(hào)不會(huì)顯示。

　　五、使用text-overflow 實(shí)現(xiàn)固定寬度漢字截?cái)?/strong>

　　用后臺(tái)語言可以對(duì)從數(shù)據(jù)庫里的字段內(nèi)容做截?cái)嗵幚恚绻雽?duì)列表應(yīng)用該樣式，我們可以這樣寫：

　　li{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　}

　　六、首字下沉

　　如果你想制作首字下沉效果，不妨考慮偽對(duì)象:first-letter并配合font-size、float屬性。

　　p:first-letter{

　　padding:6px;

　　font-size:32pt;

　　float:left;

　　}

　　七、首行縮進(jìn)—使用text-indent

　　text-indent可以使得容器內(nèi)首行縮進(jìn)一定單位。比如中文段落一般每段前空兩個(gè)漢字。

可以這么寫

　　text-indent:2em;/*em是相對(duì)單位，2em即現(xiàn)在一個(gè)字大小的兩倍*/

　　}

　　注意：如果font-size是12px的話，那么text-indent:2em則代表縮進(jìn)24px。

　　八、固定寬度漢字（詞）折行—使用word-break

　　在排版的時(shí)候，你是否為一個(gè)詞組，其中一個(gè)字出現(xiàn)在上面而另一個(gè)字折斷到下一行去而發(fā)愁呢？不用愁，這時(shí)使用word-break就可以輕松解決問題了。

　　九、關(guān)于漢字注音—使用ruby標(biāo)簽和ruby-align屬性

　　最后小編向大家介紹一下ruby標(biāo)簽和ruby-align屬性。這是一個(gè)比較冷門的技巧，可能平時(shí)使用不多，但小編覺得不妨提供給大家預(yù)防不時(shí)之需。

　　如果我們想為漢字注音就可以這樣寫

　　<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

　　然后通過ruby-align設(shè)置其對(duì)齊方式。

以上就是今日整理的“Web前端教程：簡單實(shí)用的CSS網(wǎng)頁布局中文排版技巧”一文，希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。你記住并理解了嗎？以后酷仔每日均會(huì)提供MySQL、Python及Web相關(guān)的教程及習(xí)題，趕快學(xué)習(xí)起來吧。

天開始小編將會(huì)給大家講解HTML的入門知識(shí)以及做項(xiàng)目會(huì)遇到的某些問題以及如何解決此類問題的方法。說道網(wǎng)頁設(shè)計(jì)，HTML是我們必不可少的一部分。基礎(chǔ)網(wǎng)頁的構(gòu)成，無論怎么變幻，都是由原聲的HTML代碼組成構(gòu)成網(wǎng)頁。

下面我就根據(jù)工作中所用和看過的書籍一點(diǎn)一點(diǎn)總結(jié)下我們常用的HTML格式和代碼。

一、什么是HTML。

HTM不是一段編程語言，而是一款標(biāo)記語言，本身不能顯示在瀏覽器中。經(jīng)過瀏覽器的編釋和編譯，才能正確反映HTML標(biāo)記語言的內(nèi)容。HTML從1.0到5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到多功能互動(dòng)，已經(jīng)成為了一款非常成熟的標(biāo)記語言。

二、HTML文件的基本結(jié)構(gòu)

<!doctype html>

<html>文件開始標(biāo)記

<head>文件頭開始的標(biāo)記

<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">

<title>XX系統(tǒng)</title>

</head>文件頭結(jié)束

<body>文件主題的內(nèi)容

</body>文件主題的結(jié)束

</html>文件結(jié)束的標(biāo)記

這里主要說明title和meta(元信息)

<title>XX網(wǎng)站</title>

<meta name="author" content="_永不言棄" >

<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">

<meta http-equiv="refresh" content="20;url=index.html">

三、HTML主要常用標(biāo)簽

3.1標(biāo)題

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

3.2 標(biāo)題字對(duì)齊屬性align

默認(rèn)情況下，標(biāo)題文字是左對(duì)齊的。在網(wǎng)頁制作過程中，常常需要選擇對(duì)其他的方式，這時(shí)我們就需要用到align屬性。

3.3 段落標(biāo)記p

段落標(biāo)記是文檔中最常見的標(biāo)記，<p>用來起始的一個(gè)段落。

3.3 換行標(biāo)記

換行標(biāo)記<br>作用是在不另起一段的情況下將當(dāng)前文本強(qiáng)制換行。

3.4 不換行標(biāo)記nobr

<nobor>表示的是不換行的標(biāo)記</nobor>

3.5 水平線

<hr/>

四、建立超鏈接

與自身網(wǎng)站頁面有關(guān)的連接被稱為內(nèi)部連接

4.1絕對(duì)路徑

絕對(duì)路徑是包括服務(wù)器規(guī)范在內(nèi)的完全路徑。絕對(duì)路徑不管源文件在什么位置都可以非常精確地找到，除非是目標(biāo)文檔的位置發(fā)生變化，否則連接不會(huì)失效。

4.2相對(duì)路徑

為了避免絕對(duì)路徑的缺陷，對(duì)于在同一站點(diǎn)之中的連接來說，使用相對(duì)路徑是一個(gè)很好的方法。

4.3 內(nèi)部連接

<a href="# target="目標(biāo)窗口的打開方式 " >

屬性值

含義

-self在當(dāng)前頁面中打開連接

-blank在一個(gè)全新的空白窗口中打開連接

-top在頂層框架中打開連接，也可以理解為在根框架中打開連接

-parent在當(dāng)前框架的上一層里打開連接

4.4 錨點(diǎn)連接

錨點(diǎn)到本頁面中的位置

<a href="#1" >商品名稱</a>

<a href="#2" >產(chǎn)品特點(diǎn)</a>

<a href="#3" >產(chǎn)品規(guī)格</a>

<a neme="1">XX商品</a>

<a neme="2">XX產(chǎn)品特點(diǎn)</a>

<a neme="3">XX規(guī)格</a>

錨點(diǎn)到其他頁面的位置

<a href="index.html#1"></a>對(duì)應(yīng)連接到index.html中name=1的位置

4.5 連接到外部網(wǎng)站

在設(shè)置友情鏈接時(shí)，需要打開HTTP協(xié)議進(jìn)行外部連接訪問。

<a href="wwww.baidu.com" >百度</a>

4.6 連接到E-mail

<a href="mailto:郵件地址">。。。</a>

4.7 連接到FTP

FTP代表文件傳輸協(xié)議，一個(gè)FTP站點(diǎn)通常包含一些上傳和下載文件的文件目錄。

大部分FTP網(wǎng)站需要使用用戶名和密碼來登錄。

當(dāng)然還有其他的一些連接方式，例如文件下載，連接到Telnet等。這些都會(huì)可以用a標(biāo)簽實(shí)現(xiàn)。

HTML基礎(chǔ)就先講到這里，后面退出DIV設(shè)計(jì)網(wǎng)頁格式已經(jīng)網(wǎng)頁分框的實(shí)現(xiàn)。

在線咨詢

上一篇：聽說過CSS in JS，那你聽說過JS in CSS嗎
下一篇：網(wǎng)頁前端設(shè)計(jì)-13選擇器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

推薦閱讀

深入理解 MVC 在實(shí)際開發(fā)中和...

IT技術(shù)棧：Javascript與硬件通...

10個(gè)有趣又能編譯為JavaScript...

canvas實(shí)現(xiàn)涂鴉效果（顏色、背...

制作個(gè)人簡歷網(wǎng)站教程

HTML5 向網(wǎng)頁嵌入視頻和音頻

輸入文本生成網(wǎng)頁！一個(gè)開源的A...

自學(xué)HTML語言-HTML基礎(chǔ)

37. JavaScript 什么是DOM事件

我們距離一個(gè)真正的兒童電子書...

HTML 鏈接

fotorama.js庫使用詳解

進(jìn)行大數(shù)據(jù)測(cè)試需要關(guān)注那些測(cè)...

前端培訓(xùn)，看這一篇就夠了

雨水 | 陳堃銶：參與“告別鉛...

7個(gè)華麗的基于Canvas的HTML5動(dòng)畫

5款優(yōu)秀的在線表格生成工具

HTML網(wǎng)頁中的圖形是如何對(duì)齊的...

某教程學(xué)習(xí)筆記（一）：04、HTML基礎(chǔ)

前端頁面如何原樣快速導(dǎo)出PDF？...

整合營銷服務(wù)商