前端学习笔记之HTML简介及标签介绍

最新推荐文章于 2022-07-30 18:00:28 发布

谦谦均

最新推荐文章于 2022-07-30 18:00:28 发布

阅读量312

点赞数

分类专栏： html 前端知识点

本文链接：https://blog.csdn.net/will__be/article/details/104256650

版权

知识点同时被 3 个专栏收录

27 篇文章 4 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

前端

7 篇文章 1 订阅

订阅专栏

一：HTML简介

一：什么是HTML？
超文本标记语言（HyperText
Markup Language，简称 HTML）
HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签
二，HTML的基本结构
在这里插入图片描述
三：HTML基本模板

< !DOCTYPE html >标签的作用：在html文件最前面进行声明，定义文档类型，告知浏览器用html何种规范去解析文档

二，标签介绍

一：什么是标签?
由尖括号包裹单词构成，eg：< html >,所以标签不可能以数字开头。
标签不区分大小写，推荐小写。标签可以嵌套，但不能交叉嵌套，
错误示例：
正确示例：
标签使用样式：

1. 开始标签标签体结束标签
2. 自闭合标签，eg：< br >,< hr >,< input >< img >
标签属性：
a.通常为键值对形式出现，eg：color=“red” id = ‘eat’
b.属性只能出现在开始标签和自闭合标签内
c.属性名字全部小写，属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）

三，代码展示效果

1，基本常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
</head>
<body>
<!--文章标题-->
<h1>good night!</h1>
<h2>good night!</h2>
<h3>good night!</h3>
<h4>good night!</h4>
<h5>good night!</h5>
<h6>good night!</h6>

<p>我是段落标签</p>
<span><strong>我是文本标签</strong></span>
<span><b>我是文本标签</b></span>
<span><i>我是文本标签</i></span>
<span><s>我是文本标签</s></span>
<!--水平线标签-->
<hr>
<div>哈哈</div>
</body>
</html>

网页效果如下：
在这里插入图片描述
上图可以看到h1到h6标签都是文章标题标签，只是字数大小不一样。p和strong标签都是加粗标签，i标签是斜体，s标签是删除。

2，图片标签和超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片，超链接标签</title>
</head>
<body>
<img width="250px"height="250px"border="1px" src="C:\Users\dd\Desktop\57web\images\0.jpg" alt="图片错误啦">
<img width="250px"height="250px"border="1" src="..\images\0.jpg"alt="图片错误啦">
<a href="https://www.baidu.com"target="_blank">百度</a>
</body>
</html>

代码效果如下：
在这里插入图片描述
这里介绍了图片标签和超链接标签。第一个图片标签用的是绝对路径，第二个是相对路径。超链接引用的百度网址。

3，列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>python</li>
    <li>javascript</li>
    <li>css</li>
</ol>
<!--无序列表-->
<ul>
    <li>apple</li>
    <li>organ</li>
    <li>peal</li>
</ul>
<!--定义列表-->
<dl>
    <dt>蔬菜</dt>
    <dd>土豆</dd>
    <dd>白菜</dd>
</dl>
</body>
</html>

这里介绍三种列表：有序列表，无序列表，定义列表。
在这里插入图片描述
有序列表前面有1234…这样的数字标明顺序，无序列表就没有顺序。自定义的列表看个人需求可以自定义。

4，特殊符号和表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
<!--空格-->
<p>good&nbsp;night!</p>
<p>good&emsp;night!</p>
<!--大于，小于，等于-->
&gt;&lt;&equals;
&#60;
&#61;
&#62;
<!--版权符号-->
&copy;

<table border="1">
    <tr>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
    </tr>
    <tr>
        <td>面条</td>
        <td>炒粉</td>
        <td>蒸蛋</td>
        <td>汤圆</td>
    </tr>
    <tr>
        <td>鸡肉</td>
        <td>鱼肉</td>
        <td>鸭肉</td>
        <td>猪肉</td>
    </tr>
</table>
</body>
</html>

效果图如下所示：
在这里插入图片描述
&nbsp ; 是一个空格，&emsp ;是一个tab键（4个空格）。合并行和列分别用rowspan和colspan，这里不展示了。

5，表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="https://www.baidu.com"method="get">
    <input type="text"placeholder="请输入你要查询的关键字">
    <input type="submit"value="搜索">

</form>
<form action="https://www.sougou.com">
<!--    文本域-->
    文本框：<input type="text">
<!--    复选框-->
    <input type="checkbox">a<br>
    <input type="checkbox">b<br>
    <input type="checkbox">c<br>
    <input type="checkbox">d<br>
<!--    单选按钮-->
    <input type="radio">d<br>
    <input type="radio">e<br>
    <input type="radio">f<br>
<!--    普通按钮-->
    <input type="button"value="普通按钮"><br>
<!--    密码框-->
    <input type="password"placeholder="请输入密码！"><br>
<!--    文件上传-->
    <input type="file"><br>
<!--    下拉框-->
    <select name="" id="">
        <optgroup label="地区">
            <option value="">湖南</option>
            <option value="">湖北</option>
            <option value="">河南</option>
            <option value="">河北</option>
        </optgroup>
    </select><br>
<!--    多行文本域-->
    <textarea rows="10"cols="20"></textarea>
</form>
</body>
</html>

效果如图所示：
在这里插入图片描述

谦谦均

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习笔记之HTML简介及标签介绍

一：HTML简介一：什么是HTML？超文本标记语言（HyperTextMarkup Language，简称 HTML）HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签二，HTML的基本结构三：HTML基本模板< !DOCTYPE html >标签的作用：在html文件最前面进行声明，定义文档类型，告知浏览器用html何种规范去解析...
复制链接

扫一扫