web前端开发——HTML学习_html,web前端开发-CSDN博客

本文链接：https://blog.csdn.net/qq_52301333/article/details/112663625

本文介绍了HTML在WEB前端开发中的重要性，详细讲解了字符集与编码、常用标签如标题、段落、超链接、图像、表格等的使用，并强调了Web语义化的概念。通过学习，开发者可以更好地理解和应用HTML5进行网页结构构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WEB前端开发

W3C学习网站
 MDN学习网站

HTML

从语义角度，描述页面结构

语言不区分大小写，特殊字符要求全小写

html5文件结构

快速编辑：Tab键

<!DOCTYPE html>		文档类型：符合HTML5标准
<htmml lang="en"> 	lang属性：搜索引擎 en英文 zh中文
<head>
    <meta charset="UTF-8"/>	
    <meta>:元数据
    charset属性：字符集编码方式
    浏览器：UTF-8 是国际编码
</head>

字符集与编码

ASCII：数字、英文字母、符号

GB2312：简体中文

Unicode：所有语言

UTF-8：所有语言，占用空间更小

对乱码问题的解释：源文件保存时的编码方式跟源文件声明不同

超链接a

文字超链接
图片超链接
导航栏

<a href="网址">文字或图片</a>

百度

如果链接到本站其他网页，直接放网页名

虚拟超链接
<a href="#"

图像img

图像格式：

JPG有损压缩，色彩丰富
GIF简单动画、背景透明
PNG无损压缩、透明、交错（清晰度从小变大）

<img src="w3school.gif" alt="w3c" />	<!--alt属性为图片不能显示时显示的内容-->
快速拓展：img[src=logo.jpg]

src属性：路径+文件名

“images/logo.png”

绝对路径与相对路径：

绝对路径：以根目录为基准“C:/site/logo.gif ”

相对路径：以文档所在位置为基准“logo.gif ”

区域div

<div id="container" align="center">		<!--id属性起名-->
    <h1>
        该属性跟css样式作用效果一般
    </h1>	
    <div id="nav">
        第二区域
    </div>
</div>

区域的划分，便于布局，便于后期用css对区域进行作用。

列表ul ol li

无序列表ul

<h1>前端web</h1>
<ul>
    <li>html</li>
    <li>css</li>
    <li>JS</li>
</ul>
<!--快速生成：ul>li*3-->

有序列表

<h1>web前端</h1>
<ol>
    <li>html</li>
    <li>css</li>
    <li>JS</li>
</ol>

li标签是列表项

表格table tr td

行：tr
单元格：td
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<!-- 快速生成：table>tr*n>td*m -->
表格边框属性border="1"
表头单元格：<th>属性</th>

	标签1	标签2
css	1	2

表单与表单元素form

<import type="">	text、password、submit、reset、radio、checkbox
<select>
    <option></option>
    </select>
</import>

<form>
    账户：<input type="text" name="userName" />
    <br />
    密码：<input type="password" name="userPsd" />
</form>

<form>
    账户：<input type="text" name="userName" />
    <br />
    密码：
    <input type="password" name="userPsd" />
    <input type="submit" value="提交" name="submitPsd" />
</form>

<form>
    账户：<input type="text" name="userName" />
    <br />
    密码：
    <input type="password" name="userPsd" />
    <input type="submit" value="确定" name="submitPsd" />
    <input type="reset" value="重置" >
</form>

<form>
    性别：
    男	<input type="radio" value="boy" name="gender" checked="checked" />	<!--radio表示单选框，单选name要相同，checked属性表示默认勾选-->
    女	<input type="radio" value="girl" name="gender" />
    <br />
    爱好：
    <imput type="checkbox" value="1" name="music" checked="checked"/>音乐
    <imput type="checkbox" value="2" name="sport" />运动
    <!--checkbox表示多选,name可以不同-->
</form>

下拉列表框select option
<select>
    <option selected="selected">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

文本域textarea
<form>
    <textarea rows="行数" cols="列数">文本</textarea>
    <br />
    <input type="submit" value="确定" />
    <input type="reset" value="重置" />
</form>

个人简介：
请在这里输入内容...

同级拓展：(div>p)+(div>img)

文字拓展：lorem2

段落拓展：lorem

Web语义化

<div id="header">
    <header>页眉部分</header>
</div>
<em>强调</em>
<i>斜体，无语义</i>
<strong>重点强调</strong>
<b>粗体，无语义</b>

强调
斜体，无语义
重点强调
粗体，无语义

自定义列表dl、列表项dt、描述dd
<dl>
    <dt>HTML</dt>
    <dd>描述语言，自动缩进</dd>
    <dt>CSS</dt>
    <dd>描述语言，自动缩进</dd>
</dl>

实际效果：

HTML

描述语言，自动缩进

CSS

描述语言，自动缩进

web前端开发——HTML学习

WEB前端开发

HTML

字符集与编码

标签

标题h

段落p

预留格式pre

行内组合span

水平线hr

超链接a

图像img

区域div

列表ul ol li

表格table tr td

表单与表单元素form

Web语义化