day01

文本格式化标签

突出重要性的强调语境：

strong 加粗

ins 下划线

em 倾斜

del 删除线

不常用：

b 加粗

u 下划线

i 倾斜

s 删除线

音、视频标签

使用：

<audio src="">音频</audio>
<video src="">视频</video>

属性：src 路径

controls 显示播放的控件

autoplay 自动播放（部分浏览器不支持）

loop 循环播放

muted 视频静音（需要跟autoplay一起使用）

超链接

<a href=""></a>

day02

列表

无序列表

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

ul表示无序列表的整体，用于包裹li标签

li表示无序列表的每一项，用于包含每一行的内容

使用：

<ul><li></li>
</ul>

有序列表

列表的每一项前默认显示有序号标识

ol表示有序列表的整体，用于包裹li标签

Li表示有序列表的每一项，用于包含每一行的内容

使用：

<ol><li></li>
</ol>

自定义列表

dl标识自定义列表的整体，用于包裹dt/dd标签

dt表示自定义列表的主题

dd表示自定义列表的正队主题的每一项内容。 dd前会默认显示缩进

使用：

<dl><dt>列表主题</dt><dd>内容</dd>
</dl>

表格使用

table表格整体，可用于包裹多个tr

tr 表格每行，可用于包裹td

td表格单元格，可用于包裹内容

table > tr > td

使用：

<table><tr><td></td></tr>
</table>

快速创建多个单元格：table > tr*3 > td*3

表格相关属性

border 边框宽度

width 表格宽度

height 表格高度

使用：

<table border="1" width="500" height="200" ></table>   (一般推荐用CSS使用的属性)

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

表头单元格

caption 表格大标题。表示表格整体大标题，默认在表格整体顶部居中位置显示

th 表头单元格。表示一列小标题，通常用于第一行，默认内部文字加粗并居中显示

注意点:

caption标签书写在table标签内部

th标签书写在tr标签内部（用于替换td标签）

使用：

<table border="1"><caption><strong>学生成绩表</strong></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>张三</td><td>100分</td><td>真棒</td></tr>
</table>

表格结构标签

thead 表格头部

tbody 表格主体

tfoot 表格底部

使用：

<table><thead><th>表格头部</th></thead><tbody><td>表格主体</td></tbody><tfoot><td>表格</td></tfoot>
</table>

表格--合并单元格

合并单元格步骤：

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并---只保留最上的，其他删除

左右合并---只保留最左的，其他删除

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

<tr><td>张三</td><td rowspan="2">100分</td>    //rowspan 垂直合并    2表示合并的数量<td>真棒</td>
</tr>
<tr><td>张四</td><td>真棒，第二名</td>
</tr>
<tr><td>总结</td><td colspan="2">69分</td>    //colspan 水平合并
</tr>

表单标签

表单：

<form action=""></form>

input系列标签

input标签可以通过type属性值的不同，展示不同效果。

type属性值：
标签名	type属性值	说明
input	text	文本框，用于输入单行文本
	password	密码框，用于输入密码
	radio	单选框，用于多选一
	checkbok	多选框，用于多选多
	file	文件选择，用于之后上传文件
	submit	提交按钮，用于提交
	reset	重置按钮。用于重置
	button	普通按钮，默认无功能，之后配合js添加功能

占位符：placeholder

<input type="text" placeholder="请输入账号">

单选框：checked

name 分组。有相同name属性值的单选框为一组，一组同时只能有一个被选中

checked 默认选中

<input type="radio" name="sex"  checked>男  <input type="radio" name="sex">女

多选框：checkbox

checked 默认选中

<input type="checkbox" checked>

上传文件：file

multiple 上传多个文件选择

<input type="file" multiple>

按钮input：

submit 提交按钮。点击之后提交数据给后端服务器

reset 重置按钮。点击之后恢复表单默认值

button 普通按钮。默认无功能，之后配合js添加功能

value 给按钮添加文字

<input type="submit" name="" id="">    //提交按钮
<input type="reset" name="" id="">    //重置按钮
<input type="button" value="普通按钮">    //普通按钮

button按钮

button标签时双标签，更便于包裹其他内容：文字、图片等

<button>点我！</button>
<button type="submit">点我！</button>

下拉菜单select

select 下拉菜单:提供多个选项的下拉菜单表单控件

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

属性：selected:下拉菜单的默认选中

<select><option>A</option><option selected>B</option>    //selected 设置B为下拉菜单的默认选中
</select>

textarea文本域标签

cols:规定了文本域内可见宽度

rows:规定了文本域内可见行数

注意：

右下角可以拖拽改变大小

实际开发时针对于样式效果推荐使用CSS设置

<textarea cols="30" rows="10">请输入您宝贵的意见</textarea>

label标签

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

使用方法一：

使用label标签把内容（如：文本）包裹起来

在表单标签上添加id属性

在label标签的for属性中设置对应的id属性值

使用方法二：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来

需要把label标签的for属性删除即可

//方法一：
性别: <input type="radio" name="sex" id="dd"><label for="dd">男</label>//方法二：兴趣：<label><input type="checkbox" name="xq" id="">羽毛球</label>

语义化标签

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

实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

<div>这是div标签</div>
<span>这是span标签</span>

有语义的布局标签

在HTML5 推出了一些有语义的布局标签开发者使用

标签名	语义
header	网页头部
nav	网页导航栏
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

字符实体

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
￥	元	¥
©	版权	©

黑马程序员html基本笔记相关推荐

黑马程序员Maven学习笔记
前言这里是黑马程序员Maven学习笔记分享,这是视频链接. 我还有其它前端内容的笔记,有需要可以查看. 文章目录前言基础 Maven简介 Maven是什么 Maven的作用 Maven的下载 M ...
黑马程序员C++学习笔记（第三阶段核心：STL）--- 更新中
目录迭代器序列式容器 vector -- 可随机访问 list -- 不支持随机访问 deque -- 动态关联式容器 -- 红黑树 map multimap set multiset -- 废 ...
黑马程序员Javaweb学习笔记01
该博客主要记录在学习黑马程序员Javaweb过程的一些笔记,方便复习以及加强记忆文章目录一 . BS架构,HTTP协议 http请求数据格式和相应数据格式二 . web服务器 2.1 tomca ...
黑马程序员C++学习笔记＜第一阶段_基础篇＞
配套视频网址: 黑马程序员:http://yun.itheima.com/course/520.html?bili B站:https://www.bilibili.com/video/BV1et411 ...
黑马程序员飞机大战笔记上
飞机大战前言近来,受到朋友嘱托,做一款简单的小游戏,本小白很久没有碰过这方面的东西了,想知新还需温故,便书写此篇博客,本人只是利用博客记录自己的学习经历,水平较低. 很久之前,曾在b站观看黑马程序 ...
黑马程序员Javaweb学习笔记02【request和response】
该博客主要记录在学习黑马程序员Javaweb过程的一些笔记,方便复习以及加强记忆
黑马程序员SSM-MyBatisPlus学习笔记
目录一.MyBatisPlus简介 1.1 SpringBoot整合MyBatisPlus入门程序 1.2 MyBatisPlus概述二.标准数据层开发 2.1 标准数据层CRUD功能 2.2 分 ...
黑马程序员---微服务笔记【实用篇】
微服务技术栈导学微服务实现流程: 所有要学的技术: 分层次教学: 具体分层: 实用篇---第一天一.认识微服务单体架构将业务所有功能集中在一个项目中开发,打成一个包部署优点:架构简单.部署成 ...
黑马程序员C++学习笔记（第二阶段核心：面向对象）（一）
目录内存分区:代码区,全局区,栈区,堆区程序运行前:代码区,全局区程序运行后:栈区,堆区引用--给变量起别名注意事项引用做函数参数引用做函数返回值引用的本质---指针常量(值可变,指向 ...
“黑马程序员”视频学习笔记之面向对象基础及调试问题
------- Windows Phone 7手机开发. .Net培训.期待与您交流! ------- ]方法: 语法:[访问修饰符][static] 返回值类型方法名() ...

黑马程序员html基本笔记