前端——HTML

已于 2024-05-20 20:08:55 修改
阅读量706 收藏 29
点赞数 21
文章标签： html 前端 算法
于 2024-05-20 20:02:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daytoy7785/article/details/138865017
版权

HTML语法规范

基本语法

1.由尖括号<>包围的关键词

2.通常是成对出现的，称为双标签

   <html>第一个标签为开始标签

   </html>第二个为结束标签

3.一些特殊标签必须是单个标签,称为单标签

   eg:<br/>

标签关系

双标签关系可以分为两类：包含关系和并列关系

第一个页面

<html>
    <head>
        <title>第一个页面</title>
     </head>
     <body>
        键盘敲烂，工资过万
     </body>
</html>

HTML常用标签（上）

标题标签 <h1>-<h6>

1.加了标题的文字会变粗，字号变大

2.一个标题独占一行

段落标签和换行标签

段落标签：<p></p>用于定义段落

换行标签：<br />强制换行，是一个单标签

文本格式化标签

加粗：<strong></strong>或者<b></b> （strong语义更强烈）

倾斜：<em></em>或者<i></i>              （em语义更强烈）

删除：<del></del>或者<s></s>            （del语义更强烈）

下划线：<ins></ins>或者<u></u>        （ins语义更强烈）

<div>和<span>标签

  • 无语义，用来装内容
  • dive（division），表示分割、分区  （大盒子）
  • span表示跨度、跨距                        （小盒子）

图像标签

<img>为单标签，image的缩写

<img src=“图像URL”/>

src是<img>标签的必须属性，用于指定图像文件的路径和文件名

attention:

  • width和height一般只设置一个
  • 可以有多个属性，属性之间不分先后顺序

相对路径和绝对路径

相对路径：

绝对路径（不常用）：

指目录下的绝对位置，直接到达目标位置，注意“\”

链接标签

1.链接的语法格式

<a href="跳转目标"  target="目标窗口弹出方式"> 文本或图像</a>

2.链接分类

  • 外部链接：_self在当前窗口打开 ；_blank在新窗口打开页面
  • 内部链接：网站内部之间的相互连接，直接使用内部页面名称
  • 空链接：当时没有确定目标链接时，<a href="#">首页</a>
  • 下载链接：如果herf里面地址是一个文件或压缩包，会下载这个文件
  • 网页元素链接：在网页中的各种网页元素，如文本、图像、表格等都可以添加超链接
  • 锚点链接：1.在链接文本的herf属性中，设置属性值为#名字的形式                                                                eg：<a href="#two">第二集</a>                                                                                               2.找到目标位置标签，里面添加一个id属性=刚才的名字                                                                eg：<h3 id="two">第二集介绍</h3>

注释和特殊字符

注释以<!-- 开头，以--> 结尾                  <!--  注释语句 -->

快捷键：ctrl+/

特殊字符：

其中空格、大于号、小于号比较常用

练习案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>喜欢假期被你发现</title>
</head>
<body>
    <h1>喜欢假期被你发现</h1>
    1.马+7简介 <br/>
    2.马+7超绝肌肉线条 <br>
   

    <h2>1.马+7简介</h2>
        <p>马嘉祺，2002年12月12日出生于河南郑州，中国内地优质青年演员，新生代歌手，时代少年团队长，现就读于中央戏剧学院2022级话剧影视表演本科班.2015年经张惠民导演发掘，马嘉祺主演个人首部电视剧《快乐星球第五部》饰演男一号带小帅，从而进入电视剧圈 。2017年7月11日，TF家族官方微博公布马嘉祺TF家族练习生身份。 10月16日，TF家族单曲《超人诞生日记》上线，马嘉祺参唱。2018年5月11，TF家族网剧《念念》上线播放，马嘉祺在剧中饰演向横 。6月30日，主演的电影版《快乐星球之三十六号》全国上映 。2018年10月7日，马嘉祺以台风少年团的成员身份，正式出道。2019年7月中旬台风少年团重组参加《台风蜕变之战》。2019年10月11日以时代少年团的成员重新出道。2019年10月16日参加的TF家族自制团综《TNT RICH RICH BOOM BOOM》播出。2021年3月，由马嘉祺演唱的歌曲“什么是快乐星球”在短视频平台走红，成为流行的网络语言之一，全网播放量破100亿，问鼎2021年抖音走红歌单冠军。 2023年12月，马嘉祺获得第37届全球音乐华鼎奖华语最具潜力歌手奖 。</p>
    <img src="image/马+7.jpg" width="200"> &nbsp
    <img src="image/超绝线条.jpg" width="200">

    <h2>2.马+7超绝肌肉线条</h2>
    <p>他身高中等，略微偏瘦，但是他的肌肉线条却非常明显。无论是上肢还是下肢，每一块肌肉都能清晰地勾勒出来。他的手臂上有着明显的肌肉纹理，每一根肌肉都像是经过精心雕刻的艺术品。他的小腿上的肌肉线条也同样令人惊叹，每一块肌肉都紧紧贴在骨骼上，仿佛随时都能爆发出强大的力量。他的胸肌、腹肌也同样发达，每一块肌肉都能清晰地看到。</p>
  
    <p>更多内容<a href="http://www.baidu.com" target="_blank">百度一下</a></p>
</body>
</html>

HTML常用标签（下） 

表格标签

基本语法：

1.<table></table>是用于定义表格的标签

2.<tr></tr>用于定义表格中的行，必须嵌套于<table></table>标签中

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

4.字母td指表格数据，即数据单元格的内容

表头单元格标签

<th></th>(table head的缩写)，一般位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

表格属性

写在table里面

表格结构标签

<thead>：用于定义表格的头部，内部必须有<tr>标签

<tbody>：用于定义表格的主体

以上标签都放在<table></table>标签中

合并单元格

1.跨行合并：rowspan="合并单元格的个数"

2.跨列合并：colspan="合并单元格的个数"

无序列表（重点）

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表使用<li>标签定义

attention：

1.<ul>只能嵌套<li>，直接在<ul></ul>中输入其他标签是不被允许的

2.<li></li>之间相当于一个容器，可以容纳所有元素

有序列表

<ol>标签用于定义有序列表，<li>标签定义列表项，列表项有一定的先后顺序

自定义列表（重要）

<dl>标签用于定义描述列表，和<dt>（定义项目/名字）<dd>（描述每一个项目/名字）一起作用

attention：

1.<dl></dl>里面只能包含<dt><dd>

2.<dt><dd>个数没有限制，经常是一个<dt>对应多个<dd>

列表总结

表单标签

一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分组成

表单域

<form>标签用于定义表单域

eg：

<form action="url地址 "  method="提交方式"   name="表单域名称">

各种表单元素控件

</form>

相关属性

表单控件（表单元素）

input表单元素      <iniput type="属性值"   />

type属性值：

除type外的常用属性

lable标签

当点击<lable>标签内的文本时，浏览器会自动把光标转到或者选择对应的表单元素上

eg:

<lable for="sex">男</lable>

<input type="radio" name="sex" id="sex"  />

select下拉表单元素

eg:

<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

</select>

在<option>中定义selected=“selected”时，当前选项即为默认选项

textarea文本域标签

eg:

<textarea rows="3"  cols="20">

文本内容

</textarea>

综合案例--注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-注册页面</title>
</head>
<body>
   <h3>网络一线牵，珍惜这份缘</h3>
   <table width="600"  >
    <tr>
        <td>姓名：</td>
        <td><input type="text"></td>
    </tr>
    <!-- 第一行 -->
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" id="shuai"> <lable for="shui">  帅哥</lable>
            <input type="radio" name="sex" id="mei">   <lable for="mei">   美女</lable>
        </td>
    </tr>
    <!-- 第二行 -->
<tr>
    <td>生日：</td>
    <td>
        <select>
            <option>--请选择年份--</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
            <option>2005</option>
        </select>
        <select>
            <option>--请选择月份--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>
        <select>
            <option>--请选择日--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </td>
</tr>
<!-- 第三行 -->
    <tr>
        <td>所在地区</td>
        <td><input type="text" value="湖北思密达"></td>
    </tr>
    <!-- 第四行 -->
    <tr>
        <td>婚姻状况：</td>
        <td>
            <input type="radio" name="marry">未婚  <input type="radio" name="marry">已婚  <input type="radio" name="marry">离异
        </td>
    </tr>
    <!-- 第五行 -->
    <tr>
        <td>学历：</td>
        <td><input type="text" value="小学坤"></td>
    </tr>
    <!-- 第六行 -->
    <tr>
        <td>喜欢的类型：</td>
        <td>
            <input type="checkbox" name="love">  马加七
            <input type="checkbox" name="love">  菜徐坤
            <input type="checkbox" name="love">  罗志强
            <input type="checkbox" name="love">  man!
        </td>
    </tr>
    <!-- 第七行 -->
    <tr>
        <td>个人介绍</td>
        <td>
            <textarea>个人简介</textarea>
        </td>
    </tr>
    <!-- 第八行 -->
    <tr>
        <input type="submit" value="免费注册">
    </tr>
    <!-- 第九行 -->
    <tr>
        <td></td>
        <input type="checkbox" checked="checked">  我同意注册条款和会员加入
    </tr>
    <!-- 第十行 -->
    <tr>
        <td></td>
        <td>
            <a href="#">我是会员，立即登录</a>
        </td>
    </tr>
    <!-- last -->
    <tr>
        <td></td>
        <td>
            <h4>我承诺</h4>
            <ul>
                <li>刚满十八岁</li>
                <li>家里七套房</li>
                <li>你是唯一</li>
            </ul>
        </td>
    </tr>
    </table>  
</body>
</html>

Daytoy7785
关注
前端——html拖拽原理
编程知识分享，主打前端
12-05 3万+
大家好，我是yma16，本文分享关于 前端——html拖拽原理。 vue3系列相关文章： vue3 + fastapi 实现选择目录所有文件自定义上传到服务器 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示 让大模型分析csdn文章质量 —— 提取csdn
Web前端——HTML5新增标签
qq_25592087的博客
09-28 347
Web前端——HTML5新增标签。
前端——html——html框架
小白龙白龙马的博客
06-12 107
从零开始学WEB前端——HTML实战练习
热门推荐
su_zui的博客
02-09 1万+
????项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员????。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员????。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过
Web前端——HTML颜色
巧克力布丁的博客
09-29 2339
一. 颜色值 HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。 这个表格给出了由三种颜色混合而成的具体效果： 三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。 1. 使用颜色的三种方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8
前端——html——元素&属性
小白龙白龙马的博客
06-12 88
Web前端——HTML音视频文件导入
巧克力布丁的博客
07-03 2983
音频文件audio和视频文件video <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- audio 标签用来向页面中引入一个外部的音频文件 音视频文件引入时，默认情况下
前端基础——HTML
happyhappy666的博客
11-30 1375
前端基础——HTML 欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、前端概述 二、HTML简介 三、HTML基本结构 一、前端概述 在Web开发中，有前端与后端之分。前端负责页面的布局，后端负责页面的逻辑。 前端负责设计网页的样子，也就是我们看到的一个个彩色的方框和文字，但是一个网站只有这些按钮还远远不够啊，肯定还有服务器记录我们输入的信息数据。所以，
前端——html——html <head>
小白龙白龙马的博客
06-12 79
web前端——HTML+CSS实现奥运五环
weixin_58474273的博客
11-05 464
web前端——HTML+CSS实现奥运五环。
前端——开源前端框架纵横谈.pdf
01-02
前端——开源前端框架纵横谈 前端开发的高速发展浪潮中，随着Web应用交互复杂度的提升，前端开发也迎来了高速发展的时期。开源前端框架纵横谈文中，对当前数量繁多的前端框架进行了分析和比较，旨在为大家在选择...
网站前端——导航（ 同一页面导航切换到不同分页面）
09-15
这是一个网站前端，在同一页面，导航切换道不同分页面。用到bootstrap框架，不需要CSS、JS文件。将文档复制即可使用。
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
Web前端——html全面解析笔记
轮回浮华三千的博客
04-26 487
Web前端开发——HTML英文单词编程环境搭建三级目录 英文单词 Hyper Text Markup Language——超文本标记语言（HTML） 编程环境搭建 如无特殊说明，则均在C盘之外的盘和英文输入法下操作。 安装Sublime Text软件，新建一个web文件夹，web文件夹中新建code文件夹，code文件夹中新建5个文件夹分别为css，js，image，music，video。 打开Sublime Text软件ctrl+n新建，ctrl+s保存在code文件夹下，文件后缀名为html。（例如1
Web前端——html基本标签（一）
weixin_61561066的博客
04-14 655
Web前端——html基本标签（一） 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、Web的基本概念二、HTML(H5)2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 了解Web前端的基本概念，Web页面的组成以及开发环境，html文件的组成以及基础标签。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Web的基本概念 1、http协议 超文本传输控制协议，它是一种协议——用于呈现信息的规定顺序和语法——用于通过网络传输数据。大部分通过In
前端用html写excel文件直接打开
全易
09-10 508
html文件直接用excel打开
炫酷HTML蜘蛛侠登录页面
最新发布
bjjgff的博客
09-14 324
全篇使用HTML、CSS、JavaScript，建议有过基础的进行阅读。
python简单易懂的lxml读取HTML节点及常用操作方法
qq_74177889的博客
09-13 622
处理HTML或XML文档时，获取节点的属性和属性值是非常常见的需求。下面详细解释如何获取标签的全部属性以及如何分别获取单个属性和属性值。接下来，我们根据子节点的属性构建一个完整的XPath路径。如果你只需要获取某个特定属性的值，可以直接通过键访问字典中的值。下面是一个综合示例，展示了如何获取节点的所有属性、单个属性以及如何处理特殊情况下的属性值。来获取节点的所有子节点，node.getparent()获取节点的所有父节点。首先，我们遍历一个节点的所有子节点，并获取每个子节点的XPath路径。
使用HTML
nice66660的博客
09-09 818
a>
vscode:Web前端——登录、注册界面
06-07
首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值