HTML的初步学习

程丹丹 .

已于 2023-03-19 18:10:45 修改

阅读量52

点赞数 1

分类专栏： FristStudy 文章标签： html 学习 html5 前端

于 2023-03-18 14:12:24 首次发布

本文链接：https://blog.csdn.net/weixin_62304013/article/details/129634553

版权

FristStudy 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML概述

HTML 指的是超文本标记语言 (HyperText Markup Language)。超文本:是指页面内可以包含图片、链接、声音,视频等内容标记:标签(通过标记符号来告诉浏览器网页内容该如何显示）

使用HTML语言将我们需要显示的内容显示在浏览器上

以京东为例：

HTML将我们想要的形式表示在浏览器上

Web浏览器根据不同的HTML标签解析成我们平常看到的网站

HTML基本语法

html4文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html5文档声明

<!DOCTYPE html>

head标签包括了所有头部标签

头部标签都有：

<title><!-- 标签可定义网页的标题 -->
<style>
<meta><!-- 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词 -->
<link><!-- 标签位于文档的头部 -->
<script>
<base>

<!-- 标题处添加图标-->
<link rel="icon" href="ico地址">

HTML注释：

注释后的内容不会显示在网页上

标签:

HTML中的标记指的就是标签。 HTML使用标记标签来描述网页。结构：标签内容闭合标签(有标签内容) 自闭合标签 (无标签内容

标签属性：

标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：

1.属性的格式：属性名 = “属性值“

2. 属性的位置： xxx

3. 添加多个属性： xxx

基本常用标签

标题标签<h1> </h2>....<h6></h6>

段落标签<p></p>

换行标签<br/>

列表

无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>

超链接<a></a>

图像标签<img/>

a标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源

href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)

URL(Uniform Resource Locator)统一资源定位

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。

例如： <b>会被解析为b标签，空格,再多的空格都会当一个空格处理。为了可以使用这些预留字符，我们必须在html中使用字符转义。

表格

表格的基本构成标签

table标签：表格标签

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

表格的基本结构

<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>

表格属性和表格合并

表单

form标签：表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器

<form  action="form_1.html" method="get">
			姓名<input type="text" value="" placeholder="请输入姓名" /><br />
			密码<input type="password" placeholder="请输入密码"  /><br />
			爱好<input type="radio" name="1" />wan<br />
			<input type="radio"  name="1"/>1<br />
			<input type="radio"  name="1"/>2<br />
			duo<input type="checkbox" />111
			<input type="checkbox" />11112
			<input type="checkbox" />34
			<input type="checkbox" />55<br />
			传文件<input type="file" value="2" name="e"/>
			地产<textarea cols="12" rows="1"></textarea>
			多选<select>
				<option value="1">lll</option><br />
				<option value="2">rr</option><br />
				<option value="4">ss</option><br />
			</select><br/>
			<input type="submit" value="2"/><br />
			<input type="reset" />
		</form>

运行样式