【HTML基础】黑马程序员web前端开发入门（二）视频笔记

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量5.2k 收藏 3
点赞数
分类专栏： web 前端 文章标签： 前端 html 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43437193/article/details/122427135
版权

标题

1 列表

在这里插入图片描述

1.1 无序列表

在这里插入图片描述

	<ul>
		<li>榴莲</li>
		<li>香蕉</li>
		<li>苹果</li>
	</ul>

1.2 有序列表

在这里插入图片描述

	<ol>
		<li>张三：100</li>
		<li>李四：90</li>
	</ol>

1.3 自定义列表

在这里插入图片描述

	<dl>
		<dt>帮助中心</dt>
		<dd>账户管理</dd>
		<dd>购物指南</dd>
		<dd>订单操作</dd>
	</dl>

2 表格

2.1 表格的基本标签

在这里插入图片描述

	<table>
		<tr>
			<td>姓名</td>
			<td>成绩</td>
			<td>评语</td>
		</tr>
		<tr>
			<td>小哥哥</td>
			<td>100分</td>
			<td>小哥哥真帅气</td>
		</tr>
		<tr>
			<td>小姐姐</td>
			<td>100分</td>
			<td>小姐姐真漂亮</td>
		</tr>
		<tr>
			<td>总结</td>
			<td>郎才女貌</td>
			<td>郎才女貌</td>
		</tr>
	</table>

2.2 表格的相关属性

在这里插入图片描述

	<table broder="1" width="600" height="300">
		<tr>
			<td>姓名</td>
			<td>成绩</td>
			<td>评语</td>
		</tr>
	</table>

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

在这里插入图片描述

加粗：使用 <th> </th>

	<table broder="1">
		<tr>
			<!-- <td></td> -->
			<th>姓名</th>
			<th>成绩</th>
			<th>评语</th>
		</tr>
		<tr>
			<td>小哥哥</td>
			<td>100分</td>
			<td>小哥哥真帅气</td>
		</tr>
		<tr>
			<td>小姐姐</td>
			<td>100分</td>
			<td>小姐姐真漂亮</td>
		</tr>
		<tr>
			<td>总结</td>
			<td>郎才女貌</td>
			<td>郎才女貌</td>
		</tr>
	</table>

在表格外增加大标题“学生成绩单”

	<table broder="1">
		<caption>学生成绩单</caption>
		<tr>
		<!-- -->
		</tr>
	</table>

2.4 表格的结构标签

在这里插入图片描述

2.5 合并单元格

在这里插入图片描述
在这里插入图片描述跨行合并：

		<tr>
			<td>张三</td>
			<td rowspan="2">100分</td>
			<td>真棒，第一名</td>
		</tr>
		<tr>
			<td>李四</td>
			<!-- <td>100分</td> -->
			<td>真棒，第一名</td>
		</tr>

跨列合并：

		<tr>
			<td>总结</td>
			<td colspan="2">郎才女貌</td>
			<!-- <td>郎才女貌</td> -->
		</tr>

在这里插入图片描述

3 表单

在这里插入图片描述

3.1 input系列标签

在这里插入图片描述

	<body>
		<!-- 写什么就显示什么 -->
		文本框：<input type="text">
		<br>
		<!-- 书写的内容都会变成* -->
		密码框：<input type="password">
		<br>
占位符

在这里插入图片描述

	<body>
		<input type="text" placeholder="请输入用户名">
	</body>
单选功能和默认选中

在这里插入图片描述

下列代码实现性别的单选：（点击“男”再点击“女”，“男”自动不选）

		性别：<input type="radio" name="gender">男 
			 <input type="radio" name="gender">女

增加checked，实现默认选中

		性别：<input type="radio" name="gender">男 
			 <input type="radio" name="gender" checked >女
文件选择

在这里插入图片描述

<body>
	<input type="file" multiple>
</body>
按钮

在这里插入图片描述

	<input type="submit"> <!-- 提交 -->
	<input type="reset">  <!-- 重置 -->

要实现提交和重置：将对应的组件放在同一个form中

	<form action="">
		用户名：<input type="text">
		<br>
		密码：<input type="password">
		<br>
		<input type="submit"> <!-- 提交 -->
		<input type="reset">  <!-- 重置 -->
	</form>

普通按钮：

	<input type="button" value="我是一个按钮">

3.2 button按钮标签

在这里插入图片描述

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

3.3 select下拉菜单标签

在这里插入图片描述

	<select>
		<option>上海</option>
		<option>北京</option>
		<option>广州</option>
		<option selected>深圳</option> <!-- 默认选中 -->
	</select>

3.4 textarea文本域标签

在这里插入图片描述

	<textarea cols="60" rows="30"></textarea>

3.5 label标签

在这里插入图片描述

选项“男”“女”，点击字体“男”能实现选项的选中（而不仅是只有通过点击圆圈）

	性别：
	<!-- 方法一 -->
	<input type="radio" name="gender" id="man"> <label for="man">男</label>
	<!-- 方法二 -->
	<label><input type="radio" name="gender">女</label>

4 语义化标签

在这里插入图片描述

4.1 没有语义的布局标签 - div和span

在这里插入图片描述

4.2 有语义的布局标签

在这里插入图片描述

主要用于手机端的网页编写

5 字符实体

在这里插入图片描述

5.1 HTML中的空格合并现象

在这里插入图片描述

5.2 常见字符实体

在这里插入图片描述

	靠近点~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;~我离不开你
20AD01
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Web前端学习之路】HTML基础知识（黑马课程学习笔记）
a123456_9的博客
04-10 303
基础认识 前段的代码是通过浏览器转化（解析和渲染）成用户看到的页面，其中解析和渲染的部分是由渲染引擎（浏览器内核）进行，解析和渲染通俗理解就是将代码变成图片、链接等。由此可知，即使是相同的网页，在不同的浏览器中解析效果会存在差异，所以显示效果不一定一样。由此，引入Web标准，可以让不同浏览器按照相同的标准显示结果。 ...
html表格
我爱美女S的博客
10-13 3746
第二天 table是表格，form是表单域 表单由三部分组成： 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性 别等完整的用户信息记录； 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓 名； 提示信息：提示用户每一个表单控件是收集什么信息的。 表格的主要作用是以行、列的方式（表格）整齐地展示数据 三个基本的表格标签：table 表格标签，用于包含多个 tr；tr 定义表格中的行，用于包含多个 td；td 定义表格中的单元格，用于存放单元格内容。
黑马程序员JAVA WEB全笔记pdf
03-26
Javaweb基础全课程笔记，黑马程序员上课笔记，主要涉及前端 jsp和servlet等
html教程课堂笔记（黑马程序员）
03-22
视频资料以及笔记代码（其实只有笔记资源）
2018黑马程序员前端36期全套视频教程【就业班+文档+代码+视频】
02-18
黑马程序员全套前端视频教程，网络分享赚点积分，如有侵权请联系删除
黑马程序员05-Web前端学习笔记
Spring Lee的博客
10-24 4061
部分资源地址 绿叶学习网 前端开发系统化学习，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。 HTML 一个HTML文档由4个基本部分组成： ① 一个文档声明：② 一个html标签对：③ 一个head标签对：④ 一个body标签对： html5是向下兼容的文档，用sublime text创建方法： h
黑马程序员 linux从入门到精通配套笔记.docx
06-17
黑马程序员 Linux 从入门到精通配套笔记 本资源汇总了 Linux 操作系统的发展史、安装方法、特点和分支等内容。下面是从文件中提取的知识点： 一、Linux 发展史 1. Linux 的前身是 Unix，于 1968 年由 Multics ...
程序员web前端视频教程（文档+代码+视频）.rar
05-29
本教程资源包"程序员web前端视频教程（文档+代码+视频）.rar"为初学者提供了一个全面的学习路径，旨在帮助他们掌握这个领域的基础知识并逐步进阶。 HTML（HyperText Markup Language）是构建网页的基础，它是所有...
黑马程序员Javase笔记
01-18
Java是世界上最流行的编程语言之一，尤其在...总结来说，"黑马程序员Javase笔记"涵盖了Java的基础语法、内存管理、面向对象编程、集合框架以及泛型和Map等内容，这些都是成为一名合格Java开发者必须掌握的核心知识。
web前端开发笔记整理（一）
01-08
文章目录一.HTML常用标签类二.CSS常用样式 一.HTML常用标签类 1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 在 ...
web 前端学习之制作网页视频
程序员小白的博客
12-14 5712
HTML引用视频文件时，运行没有画面解决方法如下文
web前端入门到实战：Html5新增视频功能——video API 事件
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-20 875
video API事件 ** play()  可以控制视频自动播放** 但是在chrome浏览器中不允许自动播放，只有在设置静音时才能允许自动播放 理由是：视频自动播放在终端非常耗电，因此被禁止 不过chrome浏览器允许自动播放7s以内的视频，然而很少有人会放7s以内的视频，而是直接用gif 专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的...
【前端学习笔记】移动web-黑马程序员学习笔记
张张张张张高高的博客
07-09 2707
该笔记是博主在b站学习的移动web-黑马程序员的学习笔记，记录自己的学习，资料均为免费获取，禁止商用。
黑马程序员：从零基础到精通的前端学习路线
热门推荐
黑马程序员官方博客
07-29 1万+
随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！   那么前端开发到底需要学什么？应该怎
Vue.js 实战系列之实现视频类WebApp的项目开发——9. 视频评论列表实现
XH_jing的博客
05-20 470
如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。 项目仓库地址，欢迎 Star 实现效果 功能实现 控制视频的播放与暂停 在 methods 中声明两个方法，play()播放方法、stop()暂停方法，控制视频的播放与暂停 Videos.vue 部分代码： methods: { // 播放 play() { this.$refs.videoPlayer.player.play(); this.palying = true;
python爬虫基础——Webbot库介绍
qq_56262770的博客
07-22 990
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 296
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 246
【代码】TS如何处理js模块的类型？
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值