HTML（基本常用标签用法及结构）

最新推荐文章于 2024-04-18 10:29:45 发布
最新推荐文章于 2024-04-18 10:29:45 发布
阅读量447 收藏 2
点赞数
分类专栏： h5 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48247235/article/details/110395286
版权

HTML语言(结构)

网页=标记=语言 不是编程语言 文件后缀.html 网页文档
Hyper超 Text文本(.txt) Markup标记(人为规定好的w3c) Language语言
超： 1、有动画链接，图片，音视频比.txt文件类型丰富
2、 HTTP超文本传输协议
标记
双标记（闭合标记）

<开始></结束>   <a></a>链接标记
<标记名字  属性名1=“属性值”  属性名2=“属性值”  属性名3=“属性值”...>内容</标记名字>

属性

作用： 1.添加的辅助信息 2.功能

元素

<标记名字  属性名1=“属性值”  属性名2=“属性值”  属性名3=“属性值”...>内容</标记名字>

单标记

<img > 图片标记

标记的名字 : 一个标记代表一个特定功能

关系

1.嵌套—》父子关系

<开始a>
    <开始b>
    
    
    </结束b> 
    
</结束a>

2.平行—》兄弟关系

<开始>
   1 
    
</结束>
<开始>
    2
    
</结束>

网页模板

  1. 创建一个网页文件 xxxx.html
  2. shift+1 快速回车
//不是标记  h5文档说明 必须放在第一句 并且不能不写 告诉浏览器以哪种规则去解析文档  避免怪异模式 
<!DOCTYPE html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>Document</title>
</head>
    <!-- 向用户展示的数据 -->
<body>

</body>
</html>

常见编码集


     charset字符集  UTF-8万国码
     ASCII 美国标准信息交换码 7位 128个
     Unicode编码  8位  256个
     UTF-8（1-4字节 可变长度） UTF-16 UTF-32
     GB2312  汉字6000+ 没有繁体字
     GBk 加入繁体字 韩语 日语... 21000+
     GB18030 朝鲜语 少数名族语言 27000+
     big5 只有繁体

代码注释

代码说明 Ctrl+/

一行 —》单行注释 //xxxx

多行—》多行注释 /*xxxxx */

/*

Author:aa;

*/

HTML:<!- 模板 !(shift+1)+ enter–>

开发者工具

f12 or ctrl+shift+i or 鼠标右键查看代码

浏览器及其内核

外壳 shell + 内核 (渲染引擎(html+css)+js引擎)

5大常用浏览器

名称内核
chrome谷歌Webkit–》Blink
firefox火狐Gecko
Ie IETrident
Opera 欧朋Presto–》Blink
SafariWebkit

布局标签

大区域 ,大盒子，大容器 division
<div></div> div>div>span
小盒子，小容器 小区域

<span></span> span>几个字+小图标

文本相关的标签

** 1、图片标记**
在网页上插入图片

<img src=""  alt="" title="" >
src:插入图片的路径i
alt:1.当图片加载失败文本提示  2.搜索引擎seo相关 
title:鼠标悬停身上的文字提示  提高用户体验   搜索引擎seo相关
width:宽度
height:高度

路径:
绝对路径(不受任何其他文件干扰的路径)

 1. 网络路径  http://    https://
    2. 本地绝对路径  C:/a/b/1.jpg（建议不要使用）

相对路径（以xxx文件作为参考的路径）

​     /  根目录   ./同级目录     ../上一级目录     ../../上上级目录

2. 加粗标记
b,strong

<b>加粗</b>  无语义标记(爬虫不爬)
<strong>加粗</strong> 语义化标记(爬虫爬)

3. 斜体文字
i,em

   <i>斜体文字</i> 无语义标记(爬虫不爬)
    <em>斜体文字</em> 语义化标记(爬虫爬)

4.下划线标记
u,ins

    <u>文字下划线</u>
    <ins>文字下划线</ins>语义化标记(爬虫爬)

5.中划线标记
s,del

  <s>中划线</s>
    <del>中划线</del>

6标题(语义化标题)
1–6级标题

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

7.段落标记paragraph

<p>一行或者多行文字</p>
！注意  p元素不能嵌套p元素

8.换行标记

<br>
！只能用于文字换行

9.水平线标记

<hr width="宽度"  color="颜色" align="水平对齐方式left/right/center居中">

10.超链接标签
1.跳转不同的界面

<a href="地址"  target="设置打开方式">热点内容</a>    anchor锚点 

href:跳转的界面的地址
target:设置打开方式   _self本页打开(默认值) / _blank新页打开

a>纯的文字---》文字链接
a>图片 ---》图片链接
a>图片+p+div... ---->区域链接


    <h2>文本链接</h2>
    <a href="http://sina.com">新浪</a>
    <a href="http://ctrip.com" target="_blank">携程</a>
    <!-- 超链接的默认打开方式 本页打开 -->

    <h2>图片链接</h2>
    <a href="https://item.jd.com/64788478165.html">
        <img src="../../../day01/代码/image/pic01.jpg" alt="">
    </a>

    <h2>区域链接</h2>
    <div>

        <a href="https://item.jd.com/64788478165.html">
            <img src="../../../day01/代码/image/pic01.jpg" alt="">
            <p>safsgfdgdf</p>
            <p><span>&yen;99.00</span></p>
        </a>
    </div>

2.锚点链接:跳转到某一界面的某一部分

  1. a链接 href=".html+某一部分标识"
  2. 设置一个目标标识(锚点) 唯一性 id=""
  3. 3.base标记
<!-- base  必须写在头部head 
   作用: 统一设置超链接打开方式和基础地址值
    -->
    <base href="./3-b.html"  target="_blank">
    <!-- ./3-b.html#a1 -->
    <a href="#a1" >京东秒杀</a>
    <a href="#a2" >频道广场</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="#a3" >特色优选</a>
    <a href="" target="_self">登录</a>
    <a href="" target="_self">注册</a>

11.表格

<h1>表格的完整结构</h1>
    <table>
        <!-- 表格的标题 -->
        <caption>2017（2月）工资统计表</caption>
        <!-- 表格头部区域 -->
        <thead>
            <!-- tr行 -->
            <tr>
                <!-- 列标题 字段 th默认字体加粗并且居中-->
                <th>姓名</th>
                <th>基本工资</th>
                <th>岗位工资</th>
                <th>补助</th>
                <th>其他</th>
            </tr>
        </thead>
        <!-- 表格主体区域 -->
        <tbody>
            <tr>
                <!-- td单元格 默认字体居左 -->
                <td>刘德华</td>
                <td>1200</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>1800</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>吴彦祖</td>
                <td>2000</td>
                <td>1000</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>



    <!-- 通常的表格结构 -->
    <h1>通常的表格结构</h1>
    <table>
        <!-- 表格的标题 -->
        <!-- <caption>2017（2月）工资统计表</caption> -->
        <h3>2017（2月）工资统计表</h3>
        <!-- 表格头部区域 -->
       
            <!-- tr行 -->
            <tr>
                <!-- 列标题 字段 th默认字体加粗并且居中-->
                <td>姓名</td>
                <td>基本工资</td>
                <td>岗位工资</td>
                <td>补助</td>
                <td>其他</td>
            </tr>
      
        <!-- 表格主体区域 -->
       
            <tr>
                <!-- td单元格 默认字体居左 -->
                <td>刘德华</td>
                <td>1200</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>1800</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>吴彦祖</td>
                <td>2000</td>
                <td>1000</td>
                <td>0</td>
                <td>0</td>
            </tr>
      
    </table>

12.表格属性

 <table  border=""  cellspacing="0">
     
            <!-- tr行 -->
            <tr>
                <!-- 列标题 字段 th默认字体加粗并且居中-->
                <td>姓名</td>
                <td>基本工资</td>
                <td>岗位工资</td>
                <td>补助</td>
                <td>其他</td>
            </tr>
      
        <!-- 表格主体区域 -->
       
            <tr>
                <!-- td单元格 默认字体居左 -->
                <td>刘德华</td>
                <td>1200</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>1800</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>吴彦祖</td>
                <td>2000</td>
                <td>1000</td>
                <td>0</td>
                <td>0</td>
            </tr>
      
    </table>
  1. border边框 border=“npx”
  2. cellspacing 单元格之间的距离 默认值
  3. cellpadding 单元格内容与边框的距离
  4. width 宽度属性
  5. height高度属性
  6. align 水平对齐方式 left/right/center
  7. bgcolor:背景色 bgcolor=“red”

特性：

  1. 自适应的盒子 （宽度，高度由内容撑开）
  2. 可以设置宽度高度 你设置的宽度>默认宽度 那么你设置的起作用 你设置的宽度<默认宽度 那么你设置的不起作用
  3. 列等宽 行等高

表格单元格合并
一.跨行合并(垂直方向)
1.rowspan=“跨几行就写几” 写在最上面的单元格 2.删除被合并的那i列
二.跨列合并（水平方向）
1.colspan=“跨几列就写几” 写在最左侧的单元格 2.删除被合并的那i行

码农也有爱情
关注
专栏目录
HTML基本结构及常用标签
sinat_40442798的博客
05-25 1021
什么是HTML？ HTML：超文本标记语言，通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。它是用来设计网页的标记语言，以.html或.htm为后缀。 HTML的基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--
html设置通配符,使用CSS中的星号(*)通配符的总结
weixin_39624606的博客
06-19 1881
本文介绍谨慎使用CSS中的星号(*)通配符的总结在关于CSS3的文章中都提到了通配符的使用(如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符)。里面讲到了CSS3中多种通过符的使用方法，如星号(*)、脱字符(^)和美元符号($)等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持，所以其使用范围最广。我们最常见的星号(*)使用方法就是：代码如下:* {padd...
4、HTML基本结构和常用标签
ifyouwjk的博客
09-13 227
1、HTML基本结构 html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
HTML框架详解
lidiya007的博客
08-26 482
什么是框架？ 框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果 划分框架标记 语法格式 .... 属性 1.cols 使用“像素数”和%分割左右窗口，“*”表示剩余部分 如果使用“*”，“*”表示框架平均分成2个 如果使用“*”，“*”，“*”表示框架平均分成3个 2.rows 使用“像素数
html中字体加粗
最新发布
Dxy1239310216的博客
04-18 2653
标签表示文本的重要性。在需要强调文本的重要性时，应该使用。标签在视觉上都是将文本加粗，但是它们有不同的语义含义。标签不仅表示粗体文本，还表示文本的重要性。在只需要视觉上的加粗效果时，可以使用。属性来设置字体加粗。在HTML中，你可以使用。标签用于表示粗体文本，而。在CSS中，你也可以使用。标签只是表示粗体，而。
HTML——基本结构及常用标签
hi_Celia的博客
09-29 883
一、HTML5的优势 HTML5作为HTML的最新版本，是HTML的传递和延续。经历HTML4.0、XHTML再到HTML5从某种意义上讲，这是HTML超文本标签语言的更新与规范过程。 HTML5的优势主要体现在兼容、合理、易用三个方面。 1、兼容 HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。 HTML5定义了一些可以省略结束标签的元素。 HTML5中又恢复了对大写标签的支持。 HTML5制定了一个通用的标准。 2、
HTML常用标签大全及html标签的特点
09-28
了解这些标签的特点和使用方法，是制作专业网页的基础。但是，随着HTML5标准的推出，一些标签如`<basefont>`和`<center>`等已被废弃，建议使用CSS来实现样式控制。此外，内容结构化和语义化是现代网页设计的重要原则...
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
HTML常用标签
09-09
在本节课中，我们将深入了解表单的基本结构、属性、元素和使用方法。 一、表单的认识 表单是网页中的一种基本组件，负责数据采集功能。一个表单由三个基本组成部分：表单标签、表单域和表单按钮。表单标签是 HTML ...
HTML5教程 常用标签使用说明
04-09
在本篇内容中，我们将深入探讨HTML5教程中的一些核心概念和常用标签的使用方法，这对于初学者乃至有一定基础的前端开发者来说都是极其宝贵的资源。HTML5作为网页开发的基础语言之一，其重要性不言而喻。下面将详细...
html标签的嵌套规则介绍
09-28
主要介绍了html标签的嵌套规则介绍,本文讲解了块级元素、内嵌元素以及HTML 标签的嵌套规则等内容,需要的朋友可以参考下
html语言星号,DIV+CSS 星号*
weixin_39754915的博客
05-31 2306
常常我们在DIV+CSS布局的时候会遇到2处使用星号“*”,一个为以星号*没有命名名称的CSS选择器；另外一个是在CSS选择器里以*开头的CSS属性单词样式-CSS星号-CSS *知识介绍。接下来DIVCSS5为大家讲解这两处星号的区别与用法1、CSS星号*选择器 - TOP新手常常在css+div布局的时候看见CSS代码中第一行有个带“*”星号的选择器。如：*{padding:0; ....
HTML常用标签超详细整理
热门推荐
shengyin714959的博客
05-27 2万+
HTML概述 1.1 什么是HTML HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术 1.2 HTML概念 HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们构建网页的。 【超文本】：网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。
HTML标签嵌套到底怎样才算是规范？
weixin_34380296的博客
06-02 231
最近在看《web前端开发最佳实践》，看到有一个小节的标题是 过时的块状元素和行内元素 ，之前听到的关于HTML标签的嵌套规范一直在讲，甚至面试的时候还被问到，但是自己在之前的工作中，的的确确用<a>标签包过块元素，为了能有一个更好的用户体验，模拟的一个按钮。那个时候就有困惑，不是行内元素不能嵌套块元素么？直到看到这段才大概了解...
HTML标签嵌套规则
冰雪为融的博客
05-26 852
看了网上有各种相关的总结，所以我就不再重复粘贴复制，只是把比较容易犯错的整理一下规则如下：内联元素不要嵌套块元素（虽然浏览器可能可以正常解析，但是尽量不要这样使用，一方面是遵守代码规范，另外可能会引起意想不到的错误）一些块元素不能嵌套块元素（h1、h2、h3、h4、h5、h6、p、dt不能包含块级元素）注意：p元素嵌套任何块级元素都一定会被浏览器错误解析P标签内包含块元素时，它会先结束自己，比如：...
HTML_标签的嵌套
白雪
11-17 154
超链接不能嵌套超链接 p标签不能嵌套p标签 标题标签h1-6不能相互嵌套
HTML标签规则
hlht-kaka
04-23 825
标签嵌套规则 块元素可以包含内联元素或某些块元素，但反之不行 <div><h1></h1><p></p></div> 可 <a href=""><span></span></a> 可 <span><div></div></span&...
html文档的基本结构和常用标签
吃瓜群众的博客
08-17 4665
HTML一、HTML简介1.什么是HTML2.标签、元素3.html文档的基本结构二、HTML中常用标签1.标题标签<h1>--<h6>2.段落标签<p>3.常见的转义字符4.<i>和<em>5.<b>和<strong>6.<u>7.<br> <hr>8.<img>图...
html常见基础标签大汇总
zzh的博客
09-21 1020
头部标签 meta标签 <!-- 声明必写 --> <!DOCTYPE html> <!--常用字符编码--> <meta charset="UTF-8"> <!--规定语言——英语--> <html lang="en"> <!--作者信息--> <meta name="anthor" content="h...
HTML入门：基本标签与网页结构解析
"本资源主要介绍了HTML语言的基本概念和常用标签，包括HTML的定义、它在互联网中的作用、以及HTML标签的使用方法。此外，还提到了与互联网相关的技术，如TCP/IP协议、HTTP和FTP协议，以及浏览器、IP地址、域名、URL...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值