前端学习笔记（HTML标签）

小小程序猿scz

已于 2022-04-07 23:14:56 修改

阅读量401

点赞数

文章标签：前端 html

于 2022-02-03 18:22:53 首次发布

本文链接：https://blog.csdn.net/qq_59332194/article/details/122774084

版权

学习网址【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

使用工具

HBuilder

HTML概述

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML基础语法

1.HTML组成部分

<!doctype html> 声明文档类型

<html>文档的头部好和主体内容 </html>

<head> 文档的头部信息</head> 头部标记只能有一对

<title>显示在浏览器窗口的标题栏中“网页名称”</title> 位于 <head>标记之内

<body></body> 主体标记位于<html>之内,<head>标记之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

2.标签

HTML标记是由<和>括住的指令标记，用于发送给浏览器。

主要分为：单标记指令、双标记指令（由<起始标记>内容</结束标记>组成）。

通常使用 <标志名>内容</标志名>来表示标志的开始与结束。

常用标签

1.标题标签

h1~h6 大小依次递减，尽量少用h1标签，块级元素

<h1>标题一</h1>                
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

2.段落标签

p标签，会自动换行，块级元素

<p>这是一个段落1</p>
<p>这是一个段落2</p>

3.换行标签

br 单标签 <br> 或 <br/>

Hello <br>World

4.水平线标签

hr 单标签
常用属性
color 颜色
size 粗细
width 长度（百分比或 px）

<hr>
<hr color="red" size="3" width="50%" align="left">

5.列表标签

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

<ul>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>

<ol type="I">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ol>

6.div标签

块级元素
默认占全部的宽度，有多少高度占多数
可以设置div的宽（width）高（height）
通过align设置内容的对齐方式

<div style="width: 100px;height: 100px;align: "center">这是一个div</div>
1111

7. span标签

行内元素（不会自动换行）

8.格式化标签

9.<a>标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

常用属性：
               href：需要跳转的地址（必须属性）
target：窗口打开方式
                           _self:当前窗口（默认)
                           _blank:在空白窗口
作为锚点：
a标签的name属性值
<a name="top"></a>
其他的id属性值
<div id="top"></div>
锚点的使用
<a href="#top"></a>

10.图片标签

img标签
             向网页中嵌入一个图标
             常用属性：
                   src：需要引入的图片的地址
                   alt：当图片破损或不存在时，显示文本的内容
                   title：当鼠标悬停在图片上显示的文字
                   width：图片的宽度
                   height：图片的高度
                   border：图片边框

<img src="t1.jfif" width="500" height="300" border="0" title="风景" alt="风景图"/>

11.表格

表格标签
               table 表格
                        tr 行
                        td 标准单元格
                        th 表头（字体居中、加粗效果）

                        table的属性
                            width 表格的宽度
                            border 边框
                            align 对齐方式
                            style="border-collapse: collapse; 合并表格的边框
               tr的属性
                         align 行的内容的对齐方式

<table width="400px" align="center" border="1" style="border-collapse: collapse;">
    <tr>
        <th>编号</th>
        <th>年龄</th>
        <th>姓名</th>
    </tr>
    <tr align="center" bgcolor="bisque">
        <td>1</td>
        <td>张三</td>
        <td>17</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>18</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>19</td>
    </tr>
</table>

小小程序猿scz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记（HTML标签）

学习网址【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili使用工具HBuilderHTML概述HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML基础语法1.HTML组成部分<!doctype html> 声明文档类型<html>文档的头部好和..
复制链接

扫一扫