一文掌握HTML語言的基礎(chǔ)語法

礎(chǔ)準(zhǔn)備

我使用的是Hbuilder編輯器，在hbuilder中創(chuàng)建一個(gè)HTML文件。

在hbuilder中運(yùn)行HTML文件

效果

HTML文檔結(jié)構(gòu)

<!DOCTYPE html>
<html>
	<head>
		<!--網(wǎng)頁的頭部 -->
	</head>
	<body>
		<!--網(wǎng)頁內(nèi)容 -->
	</body>
</html>

<!-- -->   用于注釋代碼

HTML常用標(biāo)簽

基礎(chǔ)標(biāo)簽

html 最外層的元素
head 網(wǎng)頁的頭部
title 網(wǎng)頁的標(biāo)題
body 網(wǎng)頁內(nèi)容

文本格式化

i/em 斜體
strong 加粗
q 引用
blockquote 長引用
code 元素定義編程代碼示例

<i>武漢，加油！</i>
<em>湖北,加油！</em>

<strong>武漢，加油！</strong>

<q>HX是輕量編輯器和強(qiáng)大IDE的完美結(jié)合體。敏捷的性能，清爽的界面，強(qiáng)大的功能和于一身。</q>

<blockquote>
  HX是輕量編輯器和強(qiáng)大IDE的完美結(jié)合體。敏捷的性能，清爽的界面，強(qiáng)大的功能和于一身。
</blockquote>

<code>var a = 1 </code>

實(shí)驗(yàn)效果

標(biāo)題段落

h1-h6 表示標(biāo)題數(shù)字越大字體越小
p 段落標(biāo)簽
hr 水平分割線
br 換行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用標(biāo)題和段落</title>
	</head>
	<body>
		
		<!-- 標(biāo)題-->
		<h1>武漢加油！</h1>
		<h2>武漢加油！</h2>
		<h3>武漢加油！</h3>
		
		<h4>武漢加油！</h4>
		<h5>武漢加油！</h5>
		<h6>武漢加油！</h6>
		
		<!--段落標(biāo)簽-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>
	
	    <hr > <!--水平分割線-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>

<!-- 換行符-->
武漢加油！武漢加油！武漢加油！武漢加油！
<br>武漢加油！武漢加油！武漢加油！
        
	</body>
</html>

塊元素

div 盒子
span 功能和div類似，span可以用來裝一小段文字和div的區(qū)別就是在一行內(nèi)顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ </i>
		
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
	</body>
</html>

最終效果

圖片

img
img標(biāo)簽必須加上 src屬性才能把圖像展示出來
alt屬性：當(dāng)圖片沒有辦法顯示的時(shí)候用來提示用戶的文字
title屬性：當(dāng)鼠標(biāo)移動(dòng)到圖片的時(shí)候，用來提示用戶的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用圖片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="風(fēng)景圖" title="測試圖片" >
	</body>
</html>

鏈接

a標(biāo)簽超鏈接
href屬性：超鏈接的地址
target屬性：_blank 表示新建一個(gè)瀏覽器標(biāo)簽頁來顯示超鏈接的內(nèi)容，不會(huì)覆蓋原來的網(wǎng)頁_parentsearchtop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>

列表

ol 有序列表
ul 無序列表
li 列表項(xiàng)
type 定義類型
disc 實(shí)體圓點(diǎn)
circle 空心圓
square 實(shí)體方形
a 小寫字母（有序）
A 大寫字母（有序）
默認(rèn)數(shù)字（有序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 無序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>

表格

tablecaption 表格標(biāo)題
th 表頭
tr 行
td 單元格

使文本不換行，可以使用CSS的white-space屬性，并將其值設(shè)置為nowrap。這樣，文本將不會(huì)在單詞之間換行，而是會(huì)繼續(xù)在同一行上直到到達(dá)元素的邊界。

white-space: nowrap;

你可以將此屬性應(yīng)用于需要保持文本在同一行的元素上，例如：

<div style="white-space: nowrap;">
  這是一個(gè)不會(huì)換行的文本塊。
</div>

在這個(gè)例子中，div元素內(nèi)的文本將不會(huì)換行。

HTML文本格式化通常使用一系列特定的標(biāo)簽來改變文本的外觀或結(jié)構(gòu)。這些標(biāo)簽可以控制文本的字體、大小、顏色、對齊方式等，也可以用來標(biāo)記文本的邏輯結(jié)構(gòu)（如段落、標(biāo)題、列表等）。除了這些基本的格式化標(biāo)簽，HTML還支持通過CSS（級聯(lián)樣式表）來更精細(xì)和靈活地控制文本的格式和樣式。

參考文檔：https://www.cjavapy.com/article/3306/

1、標(biāo)題

HTML中，文本格式化和結(jié)構(gòu)化主要通過一系列標(biāo)簽來完成，其中標(biāo)題（Headings）標(biāo)簽是最常用于定義文本格式的元素之一。HTML提供了六級標(biāo)題標(biāo)簽，從 <h1> 到 <h6>，<h1> 表示最高級別的標(biāo)題，而 <h6> 表示最低級別的標(biāo)題。這些標(biāo)題標(biāo)簽不僅幫助改善網(wǎng)頁的結(jié)構(gòu)和可讀性，還對搜索引擎優(yōu)化（SEO）至關(guān)重要，因?yàn)樗阉饕媸褂眠@些標(biāo)簽來識別網(wǎng)頁上的不同部分和內(nèi)容的層次結(jié)構(gòu)。每個(gè)級別的標(biāo)題都有默認(rèn)的樣式，通常是不同的大小和加粗，以顯示它們的層次結(jié)構(gòu)

<h1>這是一個(gè) H1 標(biāo)題</h1>
<h2>這是一個(gè) H2 標(biāo)題</h2>
<h3>這是一個(gè) H3 標(biāo)題</h3>
<h4>這是一個(gè) H4 標(biāo)題</h4>
<h5>這是一個(gè) H5 標(biāo)題</h5>
<h6>這是一個(gè) H6 標(biāo)題</h6>

2、段落與換行

HTML中，文本格式化通常涉及使用特定的標(biāo)簽來控制文本的顯示方式。段落和換行是兩個(gè)基本但非常重要的文本格式化概念。用<p>創(chuàng)建段落，<br>插入換行。

1）段落 (<p> 標(biāo)簽)

<p> 標(biāo)簽自帶上下邊距，用以區(qū)分不同的段落。
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>

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

<br> 標(biāo)簽只是簡單地添加一個(gè)換行點(diǎn)，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。

這是文本行的開始。<br>這是新的一行，但在同一個(gè)段落內(nèi)。

3、強(qiáng)調(diào)文本

使用<em>和<strong>強(qiáng)調(diào)文本。HTML中，強(qiáng)調(diào)文本通常使用 <em> 和 <strong> 標(biāo)簽來實(shí)現(xiàn)。這兩個(gè)標(biāo)簽既有語義意義，也影響文本的表現(xiàn)形式。

<em> 標(biāo)簽用于表示強(qiáng)調(diào)文本，通常表現(xiàn)為斜體，用以表示文本的輕度強(qiáng)調(diào)。

<strong> 標(biāo)簽用于表示更強(qiáng)烈的強(qiáng)調(diào)，通常表現(xiàn)為加粗，表示文本的高度強(qiáng)調(diào)。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了兩種主要的列表類型：有序列表（<ol>）和無序列表（<ul>）。兩種類型都使用列表項(xiàng)（<li>）來定義列表中的實(shí)際項(xiàng)。

1）有序列表

有序列表以 <ol> 標(biāo)簽開始。每個(gè)列表項(xiàng)都放在 <li> 標(biāo)簽內(nèi)。列表是有序的，也就是每個(gè)項(xiàng)目都是編號的。這適用于項(xiàng)目順序很重要的列表，如食譜或待辦事項(xiàng)列表。

<ol>
  <li>第一項(xiàng)</li>
  <li>第二項(xiàng)</li>
  <li>第三項(xiàng)</li>
</ol>

2）無序列表

無序列表以 <ul> 標(biāo)簽開始。像有序列表一樣，每個(gè)項(xiàng)都放在 <li> 標(biāo)簽內(nèi)。然而，無序列表中的項(xiàng)目不是編號的。使用圓點(diǎn)符號進(jìn)行表示。這適用于項(xiàng)目順序不重要的列表，如購物清單。

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>這是一個(gè)<em>斜體</em>和<strong>加粗</strong>的示例。</p>
<p><u>這段文本下劃線</u>和<s>這段文本是刪除線</s>。</p>
<p>化學(xué)水分子公式為H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
這是預(yù)格式化文本，
保留了空格和
換行符。
</pre>

<blockquote>這是一個(gè)長引用的示例，可能包含多個(gè)段落。</blockquote>
<p>這是一個(gè)<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>進(jìn)行網(wǎng)頁設(shè)計(jì)。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復(fù)制文本。</p>
<p><samp>這是計(jì)算機(jī)程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>

</body>
</html>

參考文檔：https://www.cjavapy.com/article/3306/

在線咨詢

上一篇：2020數(shù)字中國創(chuàng)新大賽-虎符網(wǎng)絡(luò)安全賽道丨Web Writeup
下一篇：小米刷入歐版MIUI11教程+體驗(yàn)：純凈版MIUI就是爽

您的項(xiàng)目需求

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

整合營銷服務(wù)商