【黑马程序员pink老师前端】HTML
目录
- 0 HTML语法规范❤️
- 0.1 基本语法概述⭐
- 0.2标签关系⭐
- 1 HTML基本结构标签❤️
- 2 开发工具❤️
- 3 标签❤️
- 3.1 标题标签⭐
- 3.2 段落标签⭐
- 3.3 换行标签⭐
- 3.4 文本格式化标签⭐
- 3.5 布局盒子标签⭐
- 3.6 图像标签⭐
- 3.7 路径⭐
- 3.7.1 文件夹和根目录
- 3.7.2 相对路径
- 3.7.3 绝对路径
- 3.8 超链接标签⭐
- 3.9 锚点链接⭐
- 3.10 注释⭐
- 3.11 特殊字符⭐
- 3.12 表格标签⭐
- 3.12.1 表格属性
- 3.12.2 表格结构标签
- 3.12.3合并单元格
- 3.13、列表标签⭐
- 3.14 表单标签⭐
- 3.14.1 表单域
- 3.14.2 表单控件(表单元素)
- ①input输入表单元素
- ②文本框与密码框
- ③单选框和复选框
- ④name和value属性
- ⑤checked和maxlength
- ⑥submit和reset
- ⑦button和文件域
- ⑧label
- 3.14.3 select下拉表单元素
- 3.14.4 textarea文本域元素
0 HTML语法规范❤️
0.1 基本语法概述⭐
都由肩括号括起来，一般成对出现。
0.2标签关系⭐
1 HTML基本结构标签❤️
2 开发工具❤️
常用插件
用来定义当前文档显示的语言
en 定义语言为英语
zh-CN 定义语言为中文
但是英文中可以写中文，中文中也可以写英文
比如你定义法国语言但是网页中有中文，他会提示翻译
charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符
3 标签❤️
3.1 标题标签⭐
<body><h1> 一级标题</h1><h2> 二级标题</h2><h3> 三级标题</h3><h4> 四级标题</h4><h5> 五级标题</h5><h6> 六级标题</h6>
</body>
- 加了标题的文字会变的加粗，字号也会依次变大
- 一个标题独占一行
- 一共六级
3.2 段落标签⭐
<p>段落标签</p>
- paragraph 的缩写
- 文本在一个段落这种会根据浏览器窗口的大小进行自动换行
- 段落和段落之间保有空隙
- 回车不分段
3.3 换行标签⭐
<br />
- 是个单标签
- 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
3.4 文本格式化标签⭐
强调作用：为文字设置粗体、斜体、下划线等效果
| 语义 | 标签 |
|---|---|
| 加粗 |
<strong></strong>或<b></b>
|
| 倾斜 |
<em></em> 或<i></i>
|
| 删除线 |
<del></del> 或<s></s>
|
| 下划线 |
<ins></ins> 或<u></u>
|
更推荐使用第一组
3.5 布局盒子标签⭐
<div></div> :一行只能放一个，大盒子
<span></span> : 一行可以放多个，小盒子
3.6 图像标签⭐
所有属性放在img后面
<img src="pink1.jpg" alt="替换文本" title="提示文本" />
| 属性 | 属性值 |
|---|---|
| scr | 图像路径 |
| alt | 替换文本（无法显示图像时，显示文本） |
| title | 提示文本（鼠标放在图像上，显示文本） |
| width | 图像宽度 |
| height | 图像高度 |
| border | 图像边框 |
- src是标签的必须属性，它用于指定图像文件的路径和文件
- 宽度和高度只修改一个，另外一个等比缩放。都加可能会图像变形
3.7 路径⭐
3.7.1 文件夹和根目录
- 目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
- 根目录：打开目录文件夹的第一层就是根目录
3.7.2 相对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 |
图形文件位于 HTML 文件同一级 如<img src="1.png">
|
|
| 下一级路径 | / |
图形文件位于 HTML 文件下一级 如 <img src="data:images/1.png">
|
| 上一级路径 | …/ |
图形文件位于 HTML 文件上一级 如 <img src="../1.png">
|
3.7.3 绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
3.8 超链接标签⭐
<a href="链接目标的url地址" target="目标窗口的弹出方式">文本或图像</a>
a是单词anchor的缩写，意思是锚。
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，必须属性 |
| target | 用于指定连接页面的打开方式。_self为默认值，在当前窗口打开，打开后本窗口没了，_blank为在新窗口中打开 |
- 外部链接必须以
http://开头 - 内部链接，使用地址找
- 空连接 使用
#代替 - 下载链接，文件压缩包所在的地址
- 网页元素(比如图片)链接：前面添加
<img src="pink1.jpg"/>
3.9 锚点链接⭐
作用：点击链接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中，设置属性值为 #名字
- 找到目标位置标签，里面添加一个 id属性=刚才的名字
<a href = "#two">标题个人生活</a>
<h3 id = "two">个人生活内容</h3>
3.10 注释⭐
- 注释快捷键为 ctrl + /
<!-- 注释语句 -->
3.11 特殊字符⭐
重点记住：空格、大于号、小于号 这三个，其余的使用的很少，如果需要使用回头查阅即可
3.12 表格标签⭐
table用来定义表格的标签tr用来定义表格中的行，必须嵌套在标签中td用来定义表格中的单元格，必须嵌套在 标签中th用来定义表格中的表头，表头单元格里面的内容加粗居中显示
<body><table><tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr><tr> <td>小可爱</td> <td>女</td> <td>永远18</td> </tr> </table>
</body>
3.12.1 表格属性
表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的
3.12.2 表格结构标签
为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两大部分
- 用
<thead></thead>标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行 - 用
<tbody></tbody>标签表示表格的主体区域，主要是用于放数据本体 - 以上标签都是放在
<table></table>标签中
3.12.3合并单元格
- 跨行合并：
rowspan=“合并单元格的个数”，写在最上一行 - 跨列合并：
colspan="合并单元格的个数"，写在最左侧
3.13、列表标签⭐
- 无序列表：
<li></li>，里面只能包含<li></li>，没有顺序。<li></li>里面可以包含任何标签 - 有序列表：
<ol>，里面只能包含<li></li>，有顺序 - 自定义列表：
<dl>，里面只能包含<dt>和<dd>，<dt>和<dd>里面可以放任何标签，<dd>围绕<dt>进行说明。
<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>小米部落</dd><dd>官方微信</dd>
</dl>
显示结果
3.14 表单标签⭐
一个完整的表单通常由表单域，**表单控件（表单元素）**和 提示信息 3部分组成。
3.14.1 表单域
- 表单域是一个包含表单元素的区域，写表单元素之前先写表单域。
- 标签用于定义表单域，会把它范围内的表单元素信息提交给服务器。
| 属性 | 作用 |
|---|---|
| action | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | 用于设置表单数据的提交方式，其取值为get或post |
| name | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
<form action="url地址" method="提交方式" name="表单域的名称">
</form>
3.14.2 表单控件(表单元素)
①input输入表单元素
input输入表单元素，是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)
type 属性
| 属性值 | 描述 |
|---|---|
| text | 单行文本框 ，默认宽度为 20 个字符。 |
| password | 密码框，该字段中的字符被掩码 |
| radio | 单选框 |
| checkbox | 复选框 |
| button | 按钮，如获取短信验证码 |
| file | 定义输入字段和"浏览"按钮，供文件上传。 |
| image | 定义图像形式的提交按钮 |
| hidden | 定义隐藏的输入字段 |
| reset | 重置，清楚表单中的所有数据。 |
| submit | 提交，把表单数据发送到服务器。 |
其常用属性：
| 属性 | 描述 |
|---|---|
| name | 定义 input 元素的名称 |
| value | 规定 input 元素的值 |
| checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 规定输入字段中字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
- name 是表单元素的名字，要求 单选框和复选框要有相同的name值
- checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
②文本框与密码框
<body><form>用户名：<input type="text"> <br/> 密码：<input type="password"></form>
</body>
③单选框和复选框
name 是表单元素的名字，要求 单选框和复选框要有相同的name值
<form><!-- radio是单选框，可以多选一 -->性别：男<input type="radio"> 女 <input type="radio"><!-- checkbox是多选框，可以多选 -->爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox">
</form>
④name和value属性
name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单
name的主要作用：区别不同的表单元素
<form><!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">爱好：吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
</form>
注意：单选框和复选框name必须一致，value可以不一样
⑤checked和maxlength
- 单选按钮和复选框可以设置checked 属性
- 当页面打开时候就可以默认选中这个按钮
- 单选框只能给其中一个加checked，复选框可以多加
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
maxlength:规定最多输入多少个字符
⑥submit和reset
type属性设置为submit：提交按钮会把表单数据发送到服务器type属性设置为reset：重置按钮会清除表单中的所有数据
⑦button和文件域
- type 属性设置为button：是一个按钮
- type 属性设置为file：是一个文件域，可以上传文件
<input type="button" value="获取短信验证码"> <br><!-- 文件域：上传文件使用的 -->上传头像：<input type="file">
⑧label
- label标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
- label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />
3.14.3 select下拉表单元素
- 下拉表单元素
- 中至少包含一对
- 在中定义 selected=“selected” 时，当前项即为默认选中项。
<select><option selected="selected">选项1</option><option>选项2</option><option>选项3</option>...
</select>
3.14.4 textarea文本域元素
用于定义多行文本输入的控件，而不是使用文本框
<textarea>文本内容
</textarea>
cols = “每行中的字符数” ， rows = “显示的函数”，实际开发中不会使用，都是用CSS来改变大小，文本内容会直接在网页默认显示。
【黑马程序员pink老师前端】HTML相关推荐
- 【黑马程序员pink老师前端】网页相关概念
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- 【黑马程序员pink老师前端】JavaScript对象
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性 说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
- 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（一）
一.计算机编程基础 编程语言 编程语言与标记语言的区别 编程语言 有很强的逻辑和行为能力,有if else等具有逻辑性和行为能力的指令,主动 标记语言(html)不用于向计算机发出指令,常用于格式化和 ...
- 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
一.基础班学习路线 三.CSS3基础 1.CSS的三大特性 CSS三大特性之层叠性 CSS三大特性之继承性 行高的继承 CSS三大特性之优先级 CSS权重的叠加 十个在最后累加会变成0,0,0,10: ...
- 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一.基础班学习路线 三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...
- B 站黑马程序员 pink 老师前端课程学习笔记_02 CSS3
CSS_01 1. CSS 简介 1.1 语法规范 <style>/* 选择器{样式} */p {color: red;font-size: 12px;} </style> 1 ...
- 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（jQuery1）
jQuery概述 JavaScript库 jQuery概述 jQuery优点 jQuery的基本使用 入口函数 jQuery的顶级对象$ DOM对象和jQuery对象 DOM对象和jQuery对象相互 ...
- 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM，事件高级）
DOM 节点操作 父节点和子节点 第一个子元素和最后一个子元素 新浪下拉菜单案例 兄弟节点 创建和添加节点 简单版发布留言案例 删除节点 删除留言案例 复制节点 动态生成表格-创建学生数据 动态生成表 ...
- 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）
API DOM DOM简介 什么是DOM DOM树 获取元素 getElementById获取元素 得到一个元素对象object 用dir打印,还可以得到它的属性 div#time getElemen ...
最新文章
- Laravel——消息通知
- JSP的7个动作include，forward，useBean。。。
- 转载--SqlAlchemy ORM 学习
- Win7系统中Microsoft Office Word2003已停止工作
- Angular No provider for EffectsRootModule错误消息的出现原因和修复方式
- GPS实验三：GPS接收机野外数据采集
- 远程桌面不能连接，提示awgina.dll取代错误的解决办法
- Aixs2发布webservice服务
- ResourceDictionary主题资源替换（二） ：编译期间，替换主题资源
- 大公司里学做人，小公司里学做事。
- 10个大数据领域的杰出公司
- 什么是lambda（函数）？
- 用台式机搭建服务器测试环境_2020年十大最佳台式机环境
- windows域与工作组概念
- opencv半透明填充不规则区域
- leetcode之Find All Numbers Disappeared in an Array（448）
- Padavan编译技巧
- 使用pynput监听键盘组合键
- 内功图说--十二段锦
- [AHK]按住左键可以移动鼠标下的窗口