HTML基础总结

于 2024-08-17 18:54:23 发布
阅读量382 收藏 6
点赞数 10
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wozhaonue_w/article/details/141285015
版权

HTML

HTML4

编辑器：

VsCode

VsCode中的快捷键：

标准结构！
删除当前行中的内容ctrl + shift + k

注释：

语法：

<!--    -->

字符编码：

默认：

绝大多数浏览器认为你使用UTF-8编码，因此会用UTF-8解码

语法：

<head>
	<meta charset = "utf-8">
</head>

过程：

源代码 to 编码 to 编码后的进制代码 to 解码 to 源代码

错误类型：

编码错误： 问号

解码错误： 乱码；

乱码不可以修复，而问号可以更改为原型

设置语言：

原因：

根据浏览器中的语言判断是否提供翻译提示

语法：

<html lang = "zh-CN">
</html>

meta元信息：

描述浏览器的基本信息

开发者文档：

W3School

MDN

标签：

排版标签：
标签名标签含义单/双标签
h1~h6标题双
p段落双
div没有任何含义，用于整体布局双
  1. h1在一个网页中只能有一个，h2~h6可以有多个
  2. h1~h6不可以相互嵌套
  3. p标签里不能嵌套块级元素

语法：

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>
   这是一个段落
</p>
<div>
    这就像一个大包装袋，分类袋
</div>
超链接标签,图片标签：

语法：

<a href = "address"></a>
<a href="#">回到顶部</a>
    <a href="">刷新页面</a>
<a href = "#16">看库里</a> <!-- 地址以#开头代表具体位置是锚点 -->
<a name = "16"></a> <!-- 这是锚点 -->
<a href = "#15">看图片</a> 
<img id = "15" src = "address">
<!-- 超链接唤醒指定程序 -->
<a href="tel:17739501240">电话联系</a>
    <a href="mailto:2164182641@qq.com">邮件联系</a>
    <a href="sms:10086">短信联系</a>

超链接标签作用：

  1. 可以打开网站，文件
  2. 可以跳转锚点，也可以跳转到另一个网站的锚点
  3. 有name标签是锚点，有href是跳转点
  4. 用来实现区域内容的跳转和回到顶部的功能
  5. 唤起指定应用程序

相对路径：

  • 上一级： …/
  • 下一级：/
语义化标签

这对于设置HTML格式是一个重要的知识点

[!IMPORTANT]

标签的效果不重要，重要的是这个标签符合语义

作用：

  • 代码的可读性强，清晰
  • 有利于SEO（搜索引擎优化） 爬虫 代码 机器人
  • 方便设备解析（屏幕阅读器，盲人阅读器）
标签分类
  • 块级标签
  • 行内标签

[!CAUTION]

  • 块级标签可以包含块级，行内标签
  • 行内标签只能包含行内标签
  • 有一些特殊的规则，个例
列表标签

语法：

<ul>
    <!-- 独占一行 -->
    <li>NBA实时直播</li>
    <li>NBA回放</li>
    <li>NBA球员榜</li>
    <li>东西部排名</li>
</ul>
<!--无序列表 -->

<ol>
    <li>设计程序的流程图</li>
    <li>规范其中的算法和数据结构</li>
    <li>将流程图变成所用语言的代码并进行编译测试</li>
</ol>
<!--有序列表 -->
<dl>
    <dt>标题</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>
<!--定义列表 -->

重点：

  • 三个列表可以互相嵌套
  • 有序和无序列表最好元素都是
  • 起手
表格标签

表头：

单元格：

主体：

脚注：

单元格：

一行：

属性：

[!NOTE]

  • border（边距）

  • width（宽度）

  • height（高度）

  • cellspacing（单元格间距）

    为0不代表边距重合

[!NOTE]

  • align(在边框中的水平位置)
  • valign（垂直对齐）
  • colspan（跨列）
  • rowspan（跨行）

语法：

 <table border="1">
     <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <!-- 不能跨结构合并 -->
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>
    </table>
常见文本标签

em：要着重阅读的内容

strong: 比em的语气强

*span：*没有语义，用于包裹短语的通用容器

双标签

常见标签
  • br：换行
  • pre：按原文显示
  • hr：分割线

单标签

表单标签（form）

作用：网页中的交互区域 to 收集信息

属性：

  • action：将数据传给哪个网站

  • target：是原网页，还是新网页，还是框架到action指定的网站

    语法：

 <form action="https://search.jd.com/search">
        账户：<input type="text" name="account" value="fafa" maxlength="10s"><br>
        密码：<input type="password" name="psd" >
        <br>
        性别：
        <input type="radio" name="gender"value = "male">男
        <input type="radio" name="gender"value = "female" checked>女
        <br>
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm">烫头
        <br>
        其他：
        <!-- 文本域 -->
        <textarea name="other" cols="20" rows="10" ></textarea>
        <!-- 可以换行 -->
         籍贯：
         <!-- 下拉框 -->
         <select name="place" >
            <option value="hebei">河北</option>
            <option value="shandong" selected>山东</option>
            <option value="shanghai">上海</option>
         </select>
        <br>
     	<!-- 隐藏域 -->
     	<input type = "hidden" name = "tag" value = "100">
     	<br>
        <br>
        <!-- 确认按钮的第一种写法 -->
        <button type="submit">确认 </button>
        <!-- 默认就是submit -->
        <!-- 确认按钮的第二种写法 -->
        <input type="submit" value="确认">
        <!-- 不可以写name属性，让提交把按钮的数据带走 -->
         <!-- 重置按钮的第一种写法 -->
        <button type="reset">重置</button>
         <!-- 重置按钮的第二种写法 -->
        <input type="reset" value="点我重置">
          <!-- 普通按钮 第一种写法 -->
        <button type="button">检测用户账号是否注册</button>
         <!-- 普通按钮 第二种写法 -->
        <input type="button" value="检测用户账号是否注册">
     
	<!-- 禁用表单元素 - disabled	-->
      账户：<input disabled type="text" name="account" value="fafa" maxlength="10s"><br>
    </form>

<!-- 第一种写法  通过id进行绑定 -->
    <label for="zhanghu">账号：</label>
    <input id="zhanghu" type="text">
    <label for="mima">密码：</label>
    <input id="mima" type="password">
    <!-- 第二种写法  直接包裹-->
    <label>
        备注：<input type="text">
    </label>

 <!-- 主要信息  -->
    <fieldset>
        <legend>主要信息</legend>
        账户：<input type="text" name="account" value="fafa" maxlength="10s"><br>
        密码：<input type="password" name="psd">
        <br>
        性别：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female" checked>女
        <br>
    </fieldset>
    <!-- 附加信息 -->
     <fieldset>
        <legend>附加信息</legend>
        kgjkldsg
     </fieldset>
框架标签

语法：

 <!-- 用的不多？ -->
     <!-- 可以嵌入网页，图片，广告等 -->
      <!-- 浏览器能打开的，都可以嵌入后查看 -->
    <iframe src="https://www.bilibili.com"width = "900" height="300" frameborder = "1"></iframe>

    <!-- 通过超链接在自己的网页中嵌入其他网 target属性配合使用 -->
     <a href="https://www.bilibili.com" target="tt">点我看哔哩哔哩</a>
    

     <!-- 与表单的target属性配合使用 -->
      
     
     <iframe name="tt" frameborder="0" width="900" height="400"></iframe>

HTML实体

在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实 体。比如==小于号 <==用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须 在 HTML 源码中插入字符实体。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

参考手册

meta元信息

作用：

配置浏览器基本信息

配置字符编码：

<meta charset="utf-8">

针对IE浏览器的兼容设置：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对移动端的配置（移动端课程中会详细讲解）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置网页关键字：

<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

配置网页描述信息

<meta name="description" content="80字以内的一段话，与网站内容相关">

. 针对搜索引擎爬虫配置：

<meta name="robots" content="此处可选值见下表">

参考网页

总结

超雄代码狂
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html基础总结
09-17
HTML 基础总结 HTML 是超文本标记语言（HyperText Markup Language），是一种标准的标记语言，用于创建网页。 HTML 由一系列的元素和属性组成，元素是 HTML 的基本组成部分，属性则提供了更多关于元素的信息。 ...
HTML基础总结推荐(段落)
09-28
1. **段落定义**： - 段落是通过`<p>`标签来定义的。例如： ... <p>This is a paragraph ...希望这个简短的HTML基础总结能对你有所帮助，如果你想要进一步深入学习，可以查阅更多的HTML教程和参考资料。
HTML 基础总结 (下）.xmind
03-30
HTML 基础知识的总结，适合初学者！
HTML基础总结推荐(文本格式)
09-28
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它的基础总结主要关注文本格式化。在HTML中，我们可以使用一系列标签来对文本进行样式调整，使其更易读且更具表现力。以下是一些关键的HTML...
HTML基础总结推荐(标题)
09-28
总结，HTML的基础知识包括创建结构化的标题和添加视觉分隔的水平线。通过合理运用这些元素，开发者可以构建出清晰、有层次的网页内容。在实践中，应当遵循现代Web标准，利用CSS来实现样式控制，以确保兼容性和可维护...
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 330
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 589
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
html+css 实现hover 边框彩色按钮
宝码香车的博客
08-14 774
这是一个，hover后按钮边框变彩色的效果。附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 406
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
html+css+js网页设计 电商模版4个页面
qq_42431718的博客
08-13 328
html+css+js网页设计 电商模版4个页面 带js 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
html 关于table合并外边框以及自动滚动问题汇总
lfl18326162160的博客
08-13 226
固定高度显示上下滑动。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 850
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
css实现太极图
yinge0508的博客
08-13 296
【代码】css实现太极图。
html+css+js网页设计 服装设计网站10个页面
qq_42431718的博客
08-13 210
html+css+js网页设计 服装设计网站10个页面 带js 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
【python】使用字符串格式化渲染html
longforone的博客
08-13 532
将 CSS 中的“{}”全部替换为“{{}}”，这种方法是可行的。在 Python 进行字符串格式化时，“{{}}”中的“{}”及其他内容会被当作普通字符串处理，不会被格式化。但当我开启 PyCharm 的代码格式化功能时，原本的“{{}}”会被转换为“{\n{ }\n}”，因此使用起来较为麻烦，甚至不太能用。然而，由于 HTML 模板中存在 CSS 样式，其“{}”语法与 Python 格式化字符串的语法产生了冲突。接着，针对“body”部分使用关键字参数进行字符串格式化，如此一来，看起来也更为直观。
HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)
2301_78945238的博客
08-16 209
HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)
转换html特殊符号
最新发布
weixin_39689854的博客
08-16 299
import re",'™')
Selenium + Python 自动化测试13（HTML报告）
立黄昏粥可温
08-13 1249
我们的目标是：按照这一套资料学习下来，大家可以独立完成自动化测试的任务。上一篇我们讨论了unittest中discover 的构建，可以组织测试更多测试用例。本篇文章我们接着讲。如何生成HTML报告，提高我们测试报告的可读性。
TS基础记录
m0_73410230的博客
08-13 582
/这个ts的json可以写注释,用来指令哪些ts文件需要编译,/*任意文件,/**任意目录,./是当前目录 ,"types": ["node"] // 如果你的项目依赖于 Node.js 的类型定义，可以添加这个。// ../是父级目录,/是根目录（表示一下子回到最顶端的那个文件夹下）//有错误时候就不生成编译后的文件,默认为false。//所有严格检查的总开关,默认为false。//不生成编译后的文件默认为false。//不允许隐式any,默认为false。//是否移除注释,默认为false。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值