前端基础——HTML基础

最新推荐文章于 2024-07-02 17:52:33 发布

卑微的前端小白

最新推荐文章于 2024-07-02 17:52:33 发布

阅读量147

点赞数 1

分类专栏：基础学习文章标签： html

本文链接：https://blog.csdn.net/qq_38415745/article/details/105614034

版权

基础学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端基础——HTML

HTML基础
HTML属性
HTML结构
总结

HTML简介

HTML：超文本标记语言（HyperText Markup Language，简称：HTML）是用来构建网页的标准标记语言。

HTML基础

1.HTML标题

HTML标题是通过 h1-h6 标签来定义的。
标题大小有h1至h6递减。且1-6号标题大小与1-6号字体逆序对应。

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>

标题标签仅仅应用与标题，不要为了生成粗体或大号字体使用标题。
各大搜索引擎使用标题对网页的结构和内容制定索引，滥用标题会是搜索引擎对网页搜索捕捉产生问题。

2.HTML段落

HTML段落是通过 p 标签来定义的。
如果在不想建立新段落的情况下进行换行，可以使用br标签进行换行

<p>这个<br>段落<br>分行</p>

很多浏览器及时p标签只有开始标签也可以识别，但有时会产生意想不到的意外。所以尽量将开始结束标签写全。

3.HTML链接

HTML链接 a 标签来定义的。
在a标签中使用href属性来描述链接的网址
超链接在默认样式下以下列形式出现：
1.一个未访问过的链接显示为蓝色字体并带有下划线。
2.访问过的链接显示为紫色并带有下划线。
3.点击链接时，链接显示为红色并带有下划线

4.HTML图片

HTML中图片通过 img 标签来定义
img标签是单标签，它仅仅包含属性，并没有闭合标签
要显示的图片需要使用src属性，src是“source”，属性值是图片的URL地址。
alt属性可以对未加载的图片进行替换，告诉用户图片信息，有助于更好的显示网页信息。

<img src="图片的url" alt="提示信息">

5.HTML表格

表格由 table 标签来定义，表格中行由 hr 定义，每行分为若干单元格由 td 定义。数据单元格可以包含文本、图片、列表、段落等等。
表格中如果不定义边框属性，表格将不显示边框，大多数时候我们希望有边框可以使用border属性进行定义。
表格中使用th对表格的表头进行生命，大多数浏览器会对表头内容进行着重显示。

<table border="1">
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
    </tr>
    <tr>
        <td>row 1 cell 1</td>
        <td>row 1 cell 2</td>
    </tr>
    <tr>
        <td>row 2 cell 1</td>
        <td>row 2 cell 2</td>
    </tr>
</table>

6.HTML列表

HTML中列表分为有序、无序和自定义列表。
有序列表使用 ol 标签进行声明；

<ul>
<li>11</li>
<li>22</li>
</ul>

无序列表使用 ul 标签进行声明；

<ol>
<li>11</li>
<li>22</li>
</ol>

自定义列表使用 dl 标签进行声明，每个自定义列表项以 dt 标签开始，每个自定义列表项的内容以 dd 开始。

<dl>
<dt>1-1</dt>
<dd>- 1111111</dd>
<dt>1-2</dt>
<dd>- 2222222</dd>
</dl>

7.HTML表单

表单并不是某一个元素，而是包含表单元素的一个区域。
表单使用 form 标签来设置；
input 标签是最常用的表单元素，通过type属性进行设定类型，如text文本框，password密码框，radio单选按钮等等。其中submit属性特别注意，他是将表单区域中所有的表单元素内容进行提交。

<form>
Text: <input type="text" name="text"><br>
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value=1>1<br>
<input type="radio" name="sex" value=2>2
</form>

还有很多表单元素这里不一一列出了。

8.HTML框架

HTML中可以是使用 iframe 标签是浏览器窗口中显示多个页面。个人认为并不常用。

<iframe src="URL" width="200" height="200" frameborder="1"></iframe>

HTML属性

HTML可以设置属性，属性可以在元素中添加额外的附加信息，属性一般在开始标签中添加，属性一般以属性名=属性值的形式出现，比如id=‘id’
各标签具体属性可参考：HTML标签参考手册
个人感觉这个网站还是挺全的。

HTML结构

head标签包含了素有头部标签元素，可以插入脚本（script）、样式（css）、各种meta信息，
也可以添加其他元素标签title style等等。简单的结构如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
<script>
脚本内容......（也就是js）
</script>
</html>

总结

以上是HTML的一些基础知识，不包含HTML5，是我第一次写博客，后续会有自己的个人学习的前端知识，希望各位大佬指出问题，也欢迎交流。

卑微的前端小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础——HTML基础

前端基础——HTMLHTML基础1.HTML标题2.HTML段落3.HTML链接4.HTML图片HTML属性HTML简介HTML：超文本标记语言（HyperText Markup Language，简称：HTML）是用来构建网页的标准标记语言。HTML基础1.HTML标题HTML标题是通过 h1-h6 标签来定义的。标题大小有h1至h6递减。且1-6号标题大小与1-6号字体逆序对应。...
复制链接

扫一扫