前端HTML学习总结

已于 2023-10-27 16:17:51 修改
阅读量234 收藏 1
点赞数
文章标签： 前端 html 学习
于 2022-09-24 13:35:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57689217/article/details/126916607
版权

*小谭提示：此内容是面试可能会在面试中问道，建议有小基础者看

笔记内容：html相关了解，文本标签

1. 什么是HTML？

HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言
HTML不是一种编程语言，而是一种标记语言（Markup Language)
标记语言是一套标记标签（Markup tag）

备注：编程语言：指的用来定义计算机程序的形式语言。简单来说是人与计算机交流的语言

2.常用浏览器介绍

浏览器内核备注
IETridentIE,猎豹安全，360极速浏览器，百度浏览器
firefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chromeBlinkchrome/Opera 浏览器内核，Blink其实是 Webkit的分支

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面

3.标签分类

  1. 单标签和双标签
    双标签的后面标签叫关闭标签，有关闭符/，
  2. 语义化标签和无语义化标签
    语义化标签：每一个HTML元素都有具体的含义

提示：后面还有一种分类，很重要的，后面说（小谭不剧透）

4.文本标签

标签名特点
注释 <!- -注释内容- ->被注释的内容不会在浏览器中显示 快捷键Ctrl+/
标题标签h1~h6文本会进行加粗 从h1到h6文本逐步缩小
分割线标签hr产生一条分割线
段落标签p独占一行,文本超出换行
预格式化标签pre内容原样输出 包括空格和换行
注音标签ruby子标签rt为字体添加注音
上标标签sup内容为上标
下标标签sub内容为下标
加粗标签b strong内容加粗
倾斜标签i em内容倾斜
下划线标签u为内容添加下划线
删除线s为内容添加删除线
换行标签 br给文字换行
添加测试文字lorem快捷输入无规则测试文字

注：从中选了几个陌生的(不容易注意的)

Number one:
<body>
    <!-- pre 内容原样输出 包括空格和换行 -->
    <pre>
        床前明月光，
        疑是地上霜。
        举头望明月，
        低头思故乡。

    译文：李白在床上看着脱光衣服的明月姑娘，皮肤像雪白的霜一样。
    李白抬头看着明月姑娘，低头想着故乡的妻子。
    </pre>
</body>

谷歌浏览器显示结果：
在这里插入图片描述
小谭提示：代码空格和浏览器显示空格一样(一比一还原)。

狼狈儿 two:
<body>
    <ruby>作为一个<rt>zuo wei yi ge</rt></ruby>猫科驯兽员很专业的告诉你，如果在野外不幸遇到<br>
    <ruby>大<rt>da</rt></ruby><ruby>型<rt>xing</rt></ruby><ruby>猫<rt>mao</rt></ruby>科动物，千万不要跑，不要回头，捡起身边任何东西<br>
    当武器，嘴里要大声喊到，cnm ，tmd 之类的话语，这样死<br>
    的会比较有尊严.
</body>

谷歌浏览器显示结果：
在这里插入图片描述
剩下的自觉演示，小谭不奉陪了，拜拜了您捏；

5 超链接

a（默认情况下是蓝色字体，并且有下划线，点击一次之后会变成紫色）

后面css会有链接的扩展，不剧透

<a href="链接地址" target ="跳转方式">浏览器显示的文字 <a>

1. 普通链接

<body>
    <!-- target值为  _self  时，当前页面跳转 -->
    <a href="http://www.baidu.com" target="_self">点击去百度</a>
    <!-- target值为  _blank  时，下一个页面跳转 -->
    <a href="http://www.baidu.com" target="_blank">点击去百度</a>
</body>

结果：
在这里插入图片描述

3. 瞄点链接
步骤：
①.给要跳转的位置添加一个 id
②.建立一个a标签
③.在 当前的a标签里面的href属性里面 通过 #id名进行跳转

自己体验，我不演示咯

<body>
    <p>
        <a href="#one">第一段文字</a>
    </p>
    <p>
        <a href="#two">第er段文字</a>
    </p>
    <p id="one">
    内容自设，若未跳转说明内容不够
     </p>
    <p id="two">
      </p>

6.图片标签—img

属性：
src：图片的地址
alt : 当图片加载不出来的时候显示的文字
title :当鼠标移入时产生的文字
width： 图片的宽度
height：图片的高度
align: 并不是图片的水平位置 而是 图片两边文字的垂直位置
代码：

<body>
    <!-- 存在这图  src 自己设置 有红色不是报错是该属性是被废弃了（后同）-->
    <img src="./img/1.webp" alt="未加载" title="你看der啊!" width="200px" height="200px" align="center">哎哟喂~你干嘛
    <!-- 不存在 -->
    <hr>
    <img src="./img/2.webp" alt="未加载" title="你看der啊!" width="200px" height="200px">
</body>

结果：
在这里插入图片描述

7.路径

路径的写法
1.绝对路径
本地 (磁盘开始) 绝对路径、服务绝对路径
2.相对路径
./表示当前资源所在的目录
…/ 返回上一级目录
相对路径的 ./是可以省略的

8.字体标签—font

size ： 1-7 从小到大 一旦超过 了7会出现和7一样大的效果
color ： 字体的颜色
face： 字体的样式

<font size="7" color="green" face="仿宋">蛋黄的长裙，蓬松的头发</font>
<font size="5" color="green" face="楷体"><a href="#">蛋黄的长裙，蓬松的头发</a></font>
<a href="#"><font size="3" color="green" face="仿宋">蛋黄的长裙，蓬松的头发</font></a>

9.字符实体

注：后面记得加 ;（英文的）下面表格加了就看不到我没加，不代表不加

描述实体名称实体名称
英文空格&nbsp或&ensp一个英文字母大小
中文空格&emsp一个中文字大小
版权&copy©
注册商标&reg®
小于号&lt<
大于号&gt>

10.列表标签

  1. 无序列表 ul(自带左上边距，默认情况自带圆点)
    ul属性：
    type = disc 实心圆默认
    circle 空心圆
    square 实心方块
    子标签 ：li
  2. 有序列表 ol
    ol属性：
    type = i I a A 1
    start 从几开始
    reversed 倒序
    子标签 ：li
  3. 定义列表 dl
    子标签 ： dt dd
<body>
    <!-- 无序列表 -->
    <ul type="circle">
        <li>剑谱第一页忘掉心上人</li>
        <li>剑谱第二页挥剑斩红尘</li>
        <li>剑谱第三页自断痴情魂</li>
    </ul>
    <!-- 有序列表 -->
    <ol  type="1" start="3">
        <li>剑谱第四页刀刀斩爱神</li>
        <li>剑谱第五页情欲不沾身</li>
        <li>剑谱第六页不做感情人</li>
    </ol>
    
    <dl>
        <dt>HTML</dt>
        <dd>超文本</dd>
        <dd>标记</dd>
        <dd>语言</dd>
        <dd>搭建网页结构</dd>

        <dt>css</dt>
        <dd>层叠</dd>
        <dd>样式表</dd>
        <dd>语言</dd>
        <dd>美化网页</dd>
  </dl>
</body>

结果：
在这里插入图片描述

11.表格标签

按照一定的顺序排放数据，表格就是有一些单元格组成

  1. 标签
    table表格
    属性：
    border 边框
    width
    height
    cellspacing 单元格和单元格之间的距离
    cellpadding 单元格边框与内容之间的距离
    align 表格水平位置
    tr 行
    align 调整一行内容的水平位置（left center right）
    valign 调整一行内容的垂直位置(top middle bottom)
    height 调整本行的高度
    bgcolor 调整本行的颜色
    注意：tr中设置width不生效
    td 单元格
    align 调整单元格内容的水平位置
    valign 调整单元格内容的垂直位置
    height 调整单元格高度
    width
    bgcolor 调整单元格的颜色

  2. 表格的结构
    caption 表格的标题
    1. 必须跟随在table之后
    2. 表格标题只能存在一个（认为规定）
    th 表格的表头
    thead
    tbody
    tfoot

  3. 表格的高级运用
    跨列合并 clospan
    从指定单元格位置开始，横向向右合并几个单元格（包括自己），被合并的单元格应从tr中删除
    跨行合并 rowspan
    从指定单元格位置开始，纵向向下合并几个单元格（包括自己），被合并的单元格应从tr中删除

<table border="1px" cellspacing="0" cellpadding="10px">
       <caption>差旅费报销单</caption>
       <tr>
        <td colspan="2">姓名</td>
        <td colspan="2"></td>
        <td>级别</td>
        <td colspan="2"></td>
        <td colspan="7">事由</td>
        <td colspan="5" >出差时间</td>
        
       </tr>
       <tr>
        <td rowspan="2"  colspan="2" align="center">起始时间</td>  
        <td colspan="2" rowspan="2" align="center">起始地点</td>
        <td colspan="2" align="center">车船费</td>
        <td colspan="2" align="center">住宿费</td>
        <td colspan="5" align="center">补贴费</td>
        <td colspan="2" align="center">市内交通费</td>
        <td colspan="4" rowspan="2" width="140px">报销人:</td>
       </tr>
       <tr>
        <td>张数</td>
        <td>金额</td>
        <td>张数</td>
        <td>金额</td>
        <td>天数</td>
        <td>途中</td>
        <td>住勤</td>
        <td colspan="2">夜间行车</td> 
        <td>天数</td>
        <td>金额</td>
       </tr>
       <tr>
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>       
        <td></td>
        <td></td>
        <td colspan="4" rowspan="2">证明人:</td>       
       </tr>
       <tr>
        <td colspan="2"></td>    
        <td colspan="2"></td>      
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>      
        <td></td>
        <td></td>       
       </tr>
       <tr>
        <td colspan="2"></td>      
        <td  colspan="2"></td>       
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td  colspan="2"></td>
        <td></td>
        <td></td>
        <td colspan="4" rowspan="3">管理会计</td>       
       </tr>
       <tr>
        <td colspan="2"></td> 
        <td  colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
       </tr>
       <tr>
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
       </tr>
       <tr>
        <td colspan="4">合计</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td></td> 
        <td colspan="4" rowspan="4">领导审核:</td>
       </tr>
       <tr>
        <td colspan="15">初审金额：(大写)</td>
       </tr>
       <tr>
        <td colspan="15">报销金额：(大写)</td>
       </tr>
       <tr>
        <td colspan="15">复核:</td>
       </tr>
    </table>

结果：
在这里插入图片描述

12.表单标签

作用： 显示，收集用户信息，提交给服务器

  1. 组成
    1.表单元素 form
    属性：
    action 设置表单提交的地址
    method 设置表单的提交方式
    可选值
    get 显示传输 参数跟在地址栏之后可见
    post 隐式传输 参数在参数体中不可见
    2.表单控件：负责收集用户数据
    3.表单提交：提交按钮

  2. 表单控件
    input
    属性
    type
    = text 文本框
    = password 密码框
    = file 文件上传
    = radio 单选框
    = checkbox 复选框
    = submit 提交
    = button 按钮
    = reset 重置表单
    = image 图片形式的提交按钮
    placeholder 文本占位符
    checked 默认选中
    disabled 禁用
    readonly 只读
    公共属性
    name
    作用1.在单选框时绑定为一组单选按钮
    2.在提交信息时作为参数名使用
    value
    作用：默认值
    注意：checked属性只能使用在单选按钮和复选框上
    checked/disabled/readonly设置时可以直接写属性名还可以写成checked="checked"还可以写成checked=“true”

  3. 关联标签
    label
    属性： for
    用法1：
    给要关联的控件加上id,通过for属性链接id
    用法2：
    直接包裹input

  4. 文本域
    textarea
    文本域的大小不取决与宽高，而是行数和列数

  5. 下拉菜单
    select 菜单标签
    option 列表项

  6. 按钮
    button 如果在表单中使用相当于提交按钮

<body>
    <form action="http://www.baidu.com" method="get">
        用户名：<input type="text" name="username" value="牙签" readonly><br>
        用户密码：<input type="password" name="userpwd" disabled  placeholder="请输入6~12位数字、字母、下划线组成的密码"><br>
        上传头像：<input type="file" name="file"><br>
        性别：
            <!-- <label for="man">男</label>
            <input id="man" type="radio" name="sex" value="nan" checked> -->
            <label>男
                <input type="radio" name="sex" value="nan" checked>
            </label>
            <label for="woman">女</label>
            <input id="woman" type="radio" name="sex" value="nv"><br>
            
        爱好：看书<input type="checkbox" name="hobby" value="book">
             打游戏<input type="checkbox" name="hobby" value="game" checked>
             睡觉<input type="checkbox" name="hobby" value="sleep" checked><br>
        简介：
            <textarea name="" id="" cols="30" rows="10"></textarea>
        住址：
            <select name="zhuzhi" id="">
                <option value="wh">武汉</option>
                <option value="sh" selected>上海</option>
                <option value="bj">北京</option>
                <option value="hz">杭州</option>
                <option value="sz">深圳</option>
            </select>
        <input type="button" value="按钮">
        <button>qwe</button>
        <input type="submit" value="登录">
        <input type="reset" value="清除">
        <input type="image" src="./img/1.jpg">
    </form>
</body>

结果：
在这里插入图片描述
以上代码建议复制尝试，有些好东东不好给你演示。

小谭の努力
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML学习自检 --- HTML概念、标签、与属性
m0_50694272的博客
10-13 223
HTML学习自检 作为一个前端小白学习者，在学习前端的过程中，发现前端知识点过于庞杂，知识点细密且零碎，如果不勤于练习，很容易遗忘。于是产生了编写博客进行知识输出，形成自己的知识架构的想法。这是我在CSDN上的第一篇文章，以后也会督促自己能有更多的知识产出，如有错误，希望大家可以直接指出。 HTML的概念 Hyper Text Markup Language，超级文本标记语言 - 普通文本a:无特殊意义；超级文本<a>:超链接 - 超文本：文本具备特殊的功能 可以加入图片、声音、动画、多媒
前端阶段学习总结
m0_72954164的博客
08-29 1277
前端阶段学习总结 选择器：selector 选择器：selector ，根据某个特征，找到标签 1、标签选择器：根据标签的名字，选择对应的标签（当前html页面中的该标签都被选择出来）） 2、id选择器：根据标签的id，选择标签。 3、class选择器：根据标签的class属性，选择标签（一个html页面，class允许重复，可选择除多个符号条件的标签） 4、分类选择器：元素选择器和class/id选择器一起使用 5、分组选择器：选择器1，选择器2，选择器n...........
前端学习小结（一）
Bamboo的博客
09-04 426
前端学习小结
HTML学习笔记
种一棵树最好的时间是十年前，其次是现在。
07-04 1643
最近开始补习前端的知识了，记录一下学习的内容。利用js和jQuery之间的区别，来对比使用，发现jQuery真的可以在很大程度上减少js代码，可以说很是优秀了。 由于是小白一个，学习是跟着黑马28期的视频来的，整理的内容比较浅显，也都是视频里有的，有哪里不对的地方还望大牛们指点一二！ 首先是HTML： 1.什么是HTML? HTML：Hyper Text Markup Language 超...
HTML学习过程及心得体会
qq_46665939的博客
05-10 1283
HTML学习过程及心得体会 本博客所使用的开发工具为VS code HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 通常我们需要掌握的标记/标签不多，如常见的 body、head、title、p、img、a、div、span、ol、table等。 什么是HTML？ HTML 不是一门编程语言，而是一种用于定义内容结构的标记
前端基础：HTML总结
时光
04-18 268
前端基础：HTML总结
HTML学习总结
09-16
学习前端，HTML、CSS是必不可少的基础内容，但是有太多的标签需要记忆，初学者可能因此而感到烦恼，这也是我在学习过程中的一些感受，通过这段时间的努力学习，我将这段时间所学的内容进行了一番总结，希望对初学者...
前端基础学习总结（看大佬文章）
12-02
【前端基础学习总结】 在前端开发中，HTML和CSS是构建网页的基础。本文将围绕HTML中的`caption`标签、CSS中的锚点链接、表格样式、浮动以及清除浮动的方法进行总结。 1. `caption`标签 `caption`标签是HTML中用于...
前端小白-HTML基础知识学习总结
03-23
前端小白-HTML基础知识学习总结
前端学习、面试总结踩坑文档
11-22
个人校招总结的前端笔面试文档，县分享给大家，后期会不定时更新。内容包含基础面试题、笔试、vue以及自己的踩坑指南。
前端笔试面试题学习总结
05-27
"前端笔试面试题学习总结"这个主题涵盖了前端开发者需要掌握的关键知识点，包括HTML、CSS、JavaScript、DOM操作、浏览器工作原理、性能优化、响应式设计、前端框架等方面。以下是对这些知识点的详细解析： 1. **...
HTML课程总结
2303_81262041的博客
03-14 947
学习HTML，对HTML的课程进行总结，并且分享一些学习心得。
html学习心得
louderIII的博客
03-13 1463
学习内容： 1.通过这几节课对web应用基础的学习，我在最开始了解到了在学习这门技术的最开始应该下载其开发软件，分别下载了webstorm和Visual Studio Code这两个软件。在下载了VScode后又下载了安装了以下插件，其中包含：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。同时了解到了使用google c
HTML的学习心得
weixin_47223561的博客
03-30 4389
HTML一、HTML简介二、HTML文档结构二、使用步骤1.引入库2.读入数据总结 经过这段时间对HTML的学习，深刻了解了网页的结构和组成以及对网页界面构成的代码有了一定的认识基础，从之前对网页制造的白板认识，到现在能看懂网页代码的大致意思。这让我有了很多收获。 一、HTML简介 （1）超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 （2）HTML 不是一种编程语言，而是一种标记语言 （3）标记语言是一套标记标签 (marku
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1108
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 662
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 109
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 140
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
ReactRouter v6升级的步骤
feixin369的博客
07-14 353
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
在学期间html前端知识总结
06-03
在校期间的HTML知识总结，总结得不多，还望对大家有所帮助，内容有HTML常用标签、css、表格标签、javascript、JQuery以及案例笔记。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值