HTML基础知识

最新推荐文章于 2024-08-30 16:48:59 发布
最新推荐文章于 2024-08-30 16:48:59 发布
阅读量128 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69551472/article/details/125758251
版权
本文详细讲解了Web标准的起源、构成，涵盖了HTML标签如标题、段落、链接等的基础使用，以及div、span、图像、表格和列表等元素实例。深入理解div和span在布局中的作用，同时介绍了超链接、锚点和表格的高级技巧。
摘要由CSDN通过智能技术生成

HTML

文章目录

Web标准

为什么会有Web标准

Web标准是什么

Web标准的构成

标签

文本类

标题标签、段落标签、换行标签、文本格式化标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
............

<p>段落标签</p>

换行标签<br />

文本格式化标签
加粗字体<strong></strong>
倾斜<em></em>
删除线<del></del>
下划线<ins></ins>
div标签 span标签

div定义HTML文档中的一个分隔区,类似于盒子,后面会和CSS结合使用

div和span标签是没有语义,是我们网页布局最主要的2个盒子

图像标签

<img src=“图片路径” 一些属性 />

图像标签包括的属性有 :

属性属性值描述
srcURL图像路径
alt文本图像不能显示时替换的文本
title文本鼠标悬停显示的内容
width height像素图像的宽度以及高度
border数字图像边框的宽度
<img src="images/code.png"/>
链接标签
<h3><strong>超链接标签</strong></h3><br />
    1.外部链接
    target是打开窗口的方式<br /> 默认值是_self 表示在当前页面打开<br />
    _blank是新打开一个网页打开窗口<br />
    <a href="https://www.bilibili.com" target="_blank">B站</a>
    <br />
    
    2.内部链接:网站内部页面之间的相互链接(就是html之间的联系)<br />
    <a href="sportnew.html">体育知迅</a>
    <br />

    3.空链接: # <br />
    <a href="#">公司地址</a>
    <br />

    4.下载链接 :地址链接的是文件.exe或者是zip等压缩包形式
    <br />
    <a href="img.zip"downlode></a>

    5.网页元素的链接
    <br />
    <a href="http://www.bilibili.com"><img src="code.png"/></a>

    <h4><strong>锚点链接</strong></h4> 
    <a href="AnchorPoint.html">锚点链接的使用</a>
    <h5>总结一下</h5>
    超链接<a href="①网站②内部的html③压缩文件" targe="_self">名称\图片\音频等等</a>
锚点标签
<h2 id="menu">
    菜单:
</h2>
<a href="#kongjian">
    你好的空间
</a>
内容.......
<h3 id="kongjian">
	你好的空间   
</h3>
内容.........
<a href="#menu">返回菜单</a>

表格

表头单元格标签
<table>
 <tr>
   <td>单元格内的文字</ td>
....
 </ tr>
 <tr>

   <td>单元格内的文字</ td>
  ....
  </ tr>

  <tr>
   <td>单元格内的文字</ td>
   ....
  </ tr>

</ table>
合并单元格表

特殊情况下,可以把多个单元格合拼为一个单元格,比如简历表

跨列合并 : colspan

跨行合并 : rowspan

<table align="center" border="1" cellspacing="0" cellpadding="0" width="500" height="200">
        <!-- 定义表格头部 -->
        <thead>
        </thead>

        <!-- 定义表格的主体 -->
        <tbody>
            <!-- 下面是跨列合并 -->
            <tr>
                <td></td><td></td><td></td><td colspan="2"></td>
            </tr>
            <!-- 下面是跨行合拼 -->
            <tr>
                <td rowspan="2"></td><td></td><td></td><td></td><td></td></tr>
            <tr>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>

小案例

<table align="center" border="1" cellspacing="0" cellpadding="0" width="500">
<!-- align是表示表格的位置,border是表示有没有边框,cellspacing是表示单元格之间的距离
cellpadding是表示一个单元格中的内容和边框的距离 width是表示表格的宽度 -->
    <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七天</th>
            <th>相关链接</th>
    </tr>
   <tr>
       <td>1</td>
       <td>鬼吹灯</td>
       <td><img src="code.png "width="10"></td>
       <td>100</td>
       <td>123</td>
       <td><a href="http://www.bilibili.com" target="_blank">贴吧</a> 
           <a href="http://www.bilibili.com" target="_blank">百度</a>
           <a href="http://www.bilibili.com" target="_blank">CCTV</a>
        </td>
    </tr>
    </table>

列表

无序列表
有序列表
自定义列表

表单

综合案例(登录页面)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例2之简单的注册页面</title>
</head>
<body>
    <!-- 
    思路:
        首先是用一个无框表格进行布局,然后就是填充内容
        最后加上一个超链接和列表
    -->
    <h2>青春不常在,抓住谈恋爱</h2>  
    <!-- 下面表格布局 两列十行-->
    <table width="500">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="man">
                
                <label for="man"><img src="code.png" width="4" height="12"> 男</label>
                <input type="radio" name="sex" id="girl">
                
                <label for="girl"><img src="code.png" width="4" height="12"> 女</label>
        </td></tr> 
        <tr>
            <td>生日</td>
            <td>
        <!-- 怎么实现下拉菜单前就有提示 尚未解决 -->
            <select>
                <option>--请输入年--</option>
                <option>2002</option>
                <option>2003</option>
            </select>
            <select>
                <option>--请输入月--</option>
                <option>2</option>
                <option>3</option>
            </select>
            <select>
                <option>--请输入日--</option>
                <option>1</option>
                <option>22</option>
            </select>
            </td>
        </tr>

        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="北京思密达" maxlength="100">
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td><input type="radio" name="married" id="wei">
                <label for="wei">未婚</label><input type="radio" name="married" id="yi"><label for="yi">已婚</label><input type="radio" name="married" id="li"><label for="li">离婚</label></td></tr>
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="幼儿园">
            </td>
        </tr>
        <tr>
            <td>喜欢类型</td>
            <td>
                <input type="checkbox" id="1"><label for="1">可爱的</label>
                        <input type="checkbox" id="2"><label for="2">小鲜的</label>
                        <input type="checkbox" id="3"><label for="3">老辣的</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea>自我介绍</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="免费注册"></td></tr>
        <tr>
            <td></td><td><input type="checkbox" id="agree"><label for="agree">我同意注册条款和会员加入标准</label></td></tr>
        <tr>
            <td></td>
            <td><a href="https://www.bilibili.com" target="_blank">我是会员,我是果冻桑,立即登录</a></td></tr>             
        <tr>
            <td></td>
            <td><h2>我承诺</h2>  
            <ul>
                <li>年满18岁,单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
                <li>我喜欢你重庆妹</li>
            </ul>
        </td>
        </tr>
    </table>


    <h2>我承诺</h2>
    <ul>
        <li>年满18岁,单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
        <li>我喜欢你重庆妹</li>
    </ul>
</body>
</html>

的态度

  • 真诚寻找另一半

  • 我喜欢你重庆妹




  • <h2>我承诺</h2>
<ul>
    <li>年满18岁,单身</li>
    <li>抱着严肃的态度</li>
    <li>真诚寻找另一半</li>
    <li>我喜欢你重庆妹</li>
</ul>
    ```
爱敲代码小黑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html基础知识1111
03-26
html基础知识1111
HTML基础知识总结
qq_40046544的博客
11-14 3956
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML基础知识点
qq_40046544的博客
07-27 8712
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识点总结
weixin_64704029的博客
07-28 2042
html知识点
HTML基础知识点大全
m0_69674158的博客
05-04 6899
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
前端-HTML基础知识详解
qq_52262831的博客
12-23 4939
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
html基础知识
热门推荐
PiShubing的博客
02-11 1万+
html hyperText markup Language! 超文本标记语言 （1） 其中html跟标签 head body是结构化标签 charset是编码字符集 （1）utf-8最常用 (2) gbk国家标本扩展版本（包含亚裔版本，和繁体字符集） （3）unicode万国码 lang=“en,zh” 注释：language en=english zh=...
HTML 基础知识
是芜湖的，更是世界的！
05-10 2156
html基础知识
Html基础知识点整理
m0_53157173的博客
06-15 1919
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML5基础知识
qq_46485137的博客
02-13 5237
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
30分钟从零开始入门拿下 HTML
Y_1215的博客
08-27 1127
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
网页html版——在线查字典的一个web服务器
l22221的博客
08-27 1112
HTML是一种用于创建网页的标准标记语言。可以用dreamwave这个工具来写使用文本编辑器（如Notepad++、Sublime Text、Visual Studio Code等）创建一个新的文件，并将其保存为 .html 文件。
html快速入门
m0_52049533的博客
08-22 918
/
HTML 中 a 超链接标签全解析：属性、锚点与伪类
最新发布
前端基地
08-30 1076
本文深入阐释 HTML 中的 a超链接标签、锚点及伪类。丰富的讲解与实际案例紧密结合，助力读者快速熟悉这些常用标签。无论你是网页设计新手，还是经验丰富的开发者，都能在此收获实用知识与技巧，为你的网页创作之路增添新的活力。
java一键生成数据库说明文档html格式
无极低码
08-26 515
要验收项目了，要写数据库文档，一大堆表太费劲了，直接生成一个吧，本来想用个别人的轮子，网上看了几个，感觉效果不怎么好，自己动手写一个吧。抽空再把字典表补充进去就OK了先看效果：目录快速导航生成效果。
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值