HTML基础-黑马程序员-web前端零基础

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端 阅读详情

目录

1.1列表标签

1.1.1无序列表

1.1.2有序列表

1.1.3自定义列表

 1.2表格标签

 1.2.1表格标题和表头单元格标签

1.2.2合并单元格

1.3表单标签

1.3.1input系列标签

 1.3.2input系列标签-文本框

1.3.3input系列标签-单选框-单选功能和默认选中

1.3.4input系列标签-文件选择

1.3.5input系列标签-按钮

1.3.6button按钮标签

1.3.7select下拉菜单

1.3.8textarea文本域标签

 1.3.9label标签

1.4语义化标签

1.5字符实体


Summary:
这里的name是为了将选项归为一组,只能选一个
只有在select下拉菜单时,默认选中用selected,其他的都用checked,比如checkbox, radio
在文本框中用placeholder--这时显示的是有透明度的字,输入时没有影响

value中的内容会呈现出来,对输入有影响
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 用来提示输入者输入的类型

1.1列表标签

1.1.1无序列表

标签名说明
ul表示无列表的整体,用于包裹li标签
li表示无序列表的每一项,用于包含每一行的内容

列表的每一项前默认显示圆点标识

         <ul>
            <li>lll</li>
            <li>hhh</li>
         </ul>

1.1.2有序列表

标签名说明
ol表示有列表的整体,用于包裹li标签
li表示有序列表的每一项,用于包含每一行的内容

 列表的每一项前有序号标识(1,2,3)

1.1.3自定义列表

标签名说明
dl表示自定义列表的整体,用于包裹dt/dd标签
dt表示自定义列表的主题

dd

表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进的效果

        <dl>
            <dt>个人信息</dt>
            <dd>姓名</dd>
            <dd>性别</dd>
        </dl>

 1.2表格标签

table表格整体,可用于包裹多个tr
tr表格每行,可用于包裹td
td表格单元格,可用于包裹内容
    <table border="1px" width="500px">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>小米</td>
            <td>98分</td>
        </tr>
    </table>

 1.2.1表格标题和表头单元格标签

标签名名称说明
caption表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

caption标签书写在table标签内部

th标签书写在tr标签内部

    <table border="1" width="300">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>99分</td>
            <td>真棒</td>
        </tr>
    </table>

一个快捷键        Tab     Shift+Tab就是退回四个空格

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部

用这些标签,其实并没有什么效果,只是让浏览器更好识别

1.2.2合并单元格

将水平或垂直的多个单元格合并成一个单元格

左上原则:

        上下合并——只保留最上的,删除其他

        左右合并——只保留最左的,删除其他

属性名属性值说明
rowspan合并单元格的个数跨行合并,将多行的单元格垂直合并
colspan合并单元格的个数跨列合并,将多列的单元格水平合并
        <tr>
            <td>小明</td>
            <td rowspan="2">99分</td>
            <td>真棒</td>
        </tr>
        <tr>
            <td>小米</td>
            <td>真棒</td>
        </tr>

1.3表单标签

1.3.1input系列标签

input标签可以根据type属性值的不同,展示不同效果

type属性值说明
text文本框,用于输入单行文本
password密码框,用于输入密码
radio单选框,用于多选一  (圆圈)
checkbox多选框,用于多选多(方块)
file文件选择,用于之后上传文件
submit提交按钮,点击之后提交数据给后端服务器
reset重置按钮,点击之后恢复表单默认值
button普通按钮,默认无功能,之后配合js添加功能
 文本框:<input type="text">

 1.3.2input系列标签-文本框

text/password常用属性:

属性名说明
placeholder占位符。提示用户输入内容
   文本框:<input type="text" placeholder="请输入用户名">

1.3.3input系列标签-单选框-单选功能和默认选中

radio常用属性

属性名说明
name分组,有相同name属性值的单选框为一组
checked默认选中
    性别: <input type="radio" name="sex">男 
          <input type="radio" name="sex" checked>女
    <br>
         <input type="checkbox" checked>

1.3.4input系列标签-文件选择

file常用属性

属性名说明
multiple多文件选择
 <input type="file" multiple>

1.3.5input系列标签-按钮

按钮标签需要配合form标签使用

form使用方法:用form标签把表单标签一起包裹起来即可

<form action="">
        文本框:<input type="text" placeholder="请输入用户名">
        <br>
        性别:<input type="radio" name="sex">男 
         <input type="radio" name="sex" checked>女
         <br>
         <input type="checkbox" checked>
         <br>
         <input type="file" multiple>
         <br>
        <input type="submit" value="">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>

action属性规定当提交表单时,向何处发送表单数据

1.3.6button按钮标签

    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>

1.3.7select下拉菜单

提供多个选项的下拉菜单

select下拉菜单的整体
option下拉菜单的每一项

selected:下拉菜单的默认选中

    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="" selected>苏州</option>
    </select>

1.3.8textarea文本域标签

提供可输入多行文本的表单控件

cols规定了文本域内可见宽度
rows规定了文本域内可见行数

colspan水平合并

rowspan垂直合并

文本域右下角

可进行拖拽,以此改变大小

<textarea name="" id="" cols="30" rows="10"></textarea>

 1.3.9label标签

用于绑定内容与表单标签的关系

 性别:
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <label><input type="radio" name="sex">女</label>
    <!-- 这里要把for删除掉 -->

1.4语义化标签

div标签一行只显示一个(独占一行)
span标签一行可以显示多个

1.5字符实体

网页不认识多个空格,只认识一个

空格&nbsp;
我在学&nbsp;&nbsp;&nbsp;空格

【黑马程序员前端】JavaScript入门到精通(1)--20230801 【黑马程序员前端】JavaScript入门到精通 阅读详情

相关推荐

Uniapp H5端SEO优化全攻略:提升搜索引擎排名与流量

在移动互联网时代,H5页面因其跨平台、低成本、易传播的特性,成为许多企业的首选。Uniapp作为一款优秀的前端跨端开发框架,能够快速开发H5、小程序、App等多端应用。然而,由于Uniapp默认采用SPA(单页应用)架构,H5端在SEO(搜索引擎优化)方面存在一定劣势,如爬虫难以抓取动态内容、页面标题和描述不易优化等。 本文将系统性地介绍Uniapp H5端的SEO优化方案,涵盖基础优化、SPA优化策略、内容优化、技术优化、外部优化及监测分析,帮助开发者提升网站在搜索引擎中的排名,获取更多自然流量。

vvilkin的学习备忘 1973

《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选》学习笔记总目录

本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选》所有知识点的笔记进行总结分类。 学习时总结的目录笔记以及思维导图和实训,将在后续更新。

放下华子我只抽RuiKe5的博客 3991

如何使用3D高斯分布进行环境建模

使用3D高斯分布来进行建模,关键在于通过引入不确定性描述来提高建图的鲁棒性和精度。与传统点云表示相比,3D高斯分布提供了一种更为灵活和有效的方式来处理空间数据,能够通过协方差矩阵表示点的空间不确定性,帮助优化SLAM过程中的定位和地图更新。

JaydenQ的博客 2356

黑马程序员——html css基础——day03——CSS基础

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。CSS 是开放网络的核心语言之一

qq_56444564的博客 1134

从设计到实战:手把手教你用SolidWorks完成一个简易离心泵叶轮的水力设计全流程

本文详细介绍了使用SolidWorks进行简易离心泵叶轮水力设计的全流程,涵盖参数计算、水力设计和三维建模等关键步骤。通过实际案例演示,帮助机械设计工程师和学生掌握从理论到实践的转化技巧,特别适合低比转速离心泵叶轮的设计需求。

weixin_30621711的博客 234

【ComfyUI】Animate 保留原视频背景角色替换视频生成

本文介绍了智能创作与视频生成的工作流设计,强调其作为围绕业务目标、数据流转和模型能力的有机整体。工作流由数据输入、模型处理、结果合成和输出展示构成,通过节点化连接实现高效复用与扩展。文章重点解析了核心模型(如CLIP Vision、WanVideo等)的功能和协作方式,以及各类节点(输入、处理、控制、输出)的作用。最后展示了工作流在视频角色替换、虚拟试衣等场景的应用价值,并提供了相关开发资源链接。该设计通过模块化实现了灵活适配不同业务需求的能力。

Mr数据杨 1868

黑马程序员html基本笔记

黑马程序员html个人笔记

weixin_57140106的博客 2526

【视频】GStreamer+WebRTC(九):使用NVIDIA硬编解码

2)下载 GStreamer-bad 插件包源码注意要下载和 GStreamer版本对应的插件包3)下载NVIDIA硬编解码SDK最新的SDK下载地址注意 GStreamer 1.24.2 中调用的 NVIDIA Video_Codec_SDK 不是最新的,先使用下面的方法,查看gst-plugins-bad-1.24.2.tar.xz 对应的NVIDIA Video_Codec_SDK 的版本是多少。

郭老二 263

黑马程序员学web前端HTML学习笔记

学习笔记

Wddym的博客 1039

Android 14.0 Launcher3定制化之最近任务的全部清除由左边移到下边显示

在最近14.0的系统rom产品开发中,在Launcher3的定制化开发中,在最近任务列表中,发现点击recents最近任务键后 显示的全部清除按键在左边 由于是横屏的产品显示在左边不太合理 所以要求显示在下边比较合理,所以要从Launcher3的显示流程来解决这个问题

安卓兼职framework和app工程师的博客 765

YOLOv8改进 | 主干篇 | 轻量级的低照度图像增强网络IAT改进YOLOv8暗光检测(全网独家首发)

本文给大家带来的改进机制是轻量级的变换器模型:Illumination Adaptive Transformer (IAT),用于图像增强和曝光校正。其基本原理是通过分解图像信号处理器(ISP)管道到局部和全局图像组件,从而恢复在低光或过/欠曝光条件下的正常光照sRGB图像。具体来说,IAT使用注意力查询来表示和调整ISP相关参数,例如颜色校正、伽马校正。模型具有约90k参数和约0.004s的处理速度,能够在低光增强和曝光校正的基准数据集上持续实现优于最新技术(State-of-The-Art, SOTA)

Snu77的博客 7961

HTML认知--黑马程序员-web前端零基础

大一寒假假期自学前端的笔记 黑马程序员零基础-HTML认知部分 很基础,适合刚了解web的同学 2022/12/18

weixin_73579310的博客 251

Python之achatbot包语法、参数和实际应用案例

本书是一本PyTorch深度学习实战指南,分为基础(前6章)和进阶(后5章)两大部分。基础部分涵盖张量运算、神经网络、数据预处理及CNN等核心内容;进阶部分则深入图像、文本、音频建模技术,重点解析Transformer架构及大语言模型开发。全书采用"理论+实践"模式,适合从零基础到进阶的PyTorch学习者。

王国平的博客 632

黑马程序员web前端零基础html5 +css3

一:网站基础认识: 1.网页由哪些部分组成?? 答:文字,图片,音频,视频,超链接 2.程序员写的代码是通过什么软件转换成网页的? 答:浏览器(是网页显示,运行的平台) 常见五大浏览器(推荐谷歌!!!) 代码用Web标准来写 二:网页初体验 把扩展名后缀txt改成html, Win11找不到文件扩展名在设置里面改 或者在文件--查看--显示--扩展名 HTML文档右击---打开方式--记事本 记事本:Ctrl+S保存 <strong&g

欢迎来到“Python算法探索”,我是GT算法工程师,一名热爱计算机算法的博主。在这里,我们将一起深入探索Python世界中的各种算法,从基础到高级,从理论到实践。我参加过很多算法比赛,积累了丰富的经验,希望通过这个播客与你分享。让我们一起用Python探 1070

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

【Web学习笔记1】前端Web开发HTML5+CSS3+移动web

<li>第一项</li><li>第二项</li><li>第三项</li>......

qq_57437052的博客 898

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

黑马程序员web前端 HTML、CSS、Bootstrap框架、less笔记

HTML 超文本标记语言-- HyperText Markup Language超文本 = 链接标记 = 标记也叫标签,带尖括号的文本标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述/详情注意事项:dl 里面只能包含 dt 和 dddt 和 dd 里面可以包含任何标签层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种样式表语言,用来描述 HTML 文件的呈现(美化内容)。

小梁的博客 767

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

2021黑马前端程序员学习路线

2021年黑马程序员前端学习路线图 黑马程序员 ​ 已认证的官方帐号 73 人赞同了该文章 前端学习路线图火热出炉啦,还在为如何系统学习苦苦寻觅资源么? 2021年新版前端学习路线图这不就来了么!小伙计们甩开膀子学起来吧。 只要能坚持学下来走上人生巅峰不再是梦。 PS:别忘了收藏呦,此套路线图不定期更新呦 第一阶段:前端入门HTML5 +Css3+电商网页制作 课程内容: 1、HTML5 是网页开发的基础,从最简单的网页开发基础入手,使用常见的标签制作网页内容 2、Css3通过浮

qq_21729177的博客 1991

从零基础到前端大牛的学习路线

随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才。许多学生,包括以前的UI,java,或者完全零基础,想学习的前端。下图是广泛流传于互联网上的前端学习地图。许多初学者说,当他们看到这些密集的知识点时,他们会头晕。事实上,前端是一个广泛的主题。但你要学的前端你不必惊慌,虽然内容比较多,但没有跟踪可循,只要一步一步地不怕学习不好的前端!前端学习交流企鹅组606 721 798那么前端开...

web123456780的博客 9934

黑马程序员:从零基础到精通的前端学习路线

随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才。很多同学,包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实,前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端!   那么前端开发到底需要学什么?应该怎

黑马程序员官方博客 1万+

【免费下载】 黑马程序员JAVA WEB全笔记PDF下载

本仓库提供了一份名为“黑马程序员JAVA WEB全笔记pdf”的资源文件下载。该文件包含了黑马程序员Java Web基础课程的完整笔记,涵盖了前端技术、JSP、Servlet等内容。 ## 资源内容 - **Java Web基础知识**:详细介绍了Java Web开发的基础概念和核心技术。 - **前端技术**:包括HTML、CSS、JavaScript等前端技术的基本知识和应用。 - **J

gitblog_09810的博客 2485

B站黑马程序员pink老师前端课程学习笔记_01 HTML5

本篇博客为B站对应课程的学习笔记,跟实际视频ppt内容有一定差异,欢迎一起交流学习。 课程地址:https://www.bilibili.com/video/BV14J4114768

PancrasG的博客 4048

黑马程序员, html css javascript 前端笔记 pink老师教程

黑马程序员, html css javascript 前端笔记 pink老师教程

alexwang的博客 2397

前端HTML+CSS学习(黑马程序员总结)

黑马程序员---前端学习笔记

qq_61071742的博客 4597

【黑马程序员】1、CSS基础_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 CSS 是开放网络的核心语言之一

qq_37581764的博客 2076

黑马程序员前端Web开发_Day01

此博客主要用于本人自己温故复习,对老师讲的每段代码和思路及时记录下自己的理解,有误会会进行修改,持续更新,偶尔会分享歌曲,反正是我写给自己看的哈哈哈......HTML 定义:超文本标记语言--HyperText Markup Language链接标记也叫标签,带尖括号的文本1.标签成对出现,中间包裹内容2.<>里面放英文字母(标签名)3.结束标签比开始标签多 "4.拓展双标签:成对出现的标签单标签:只有开始标签,没有结束标签--<br>:换行 <hr>:水平线。

2401_87950702的博客 1422

从零开始学WEB前端——JavaScript基础介绍

JavaScript(简称“JS”) 是一种具有**函数优先**的轻量级,**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于**原型编程**、多范式的动态脚本语言,并且支持**面向对象**、命令式、声明式、函数式编程范式。

su_zui的博客 1526
上一篇: HTML认知--黑马程序员-web前端零基础
下一篇: CSS基础-黑马程序员-web前端零基础
羊羊的代码笔记本
博客等级 码龄4年 2粉丝 21原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值