html学习小节

HTML总结 h2 { text-align: center; font-size: x-large; } * { background-color: rgb(199, 237, 204); } a { text-decoration: none; font-size: small; } a:hover { color: blue; } h6 { text-align: right; } input:focus { color: red; }

day-1(html总结)

前端的学习方向

html是学习前端的入门，html的网页的结构，css是网页的样式，JavaScript是网页的交互。最佳的前端体现方案是：结构、样式、行为相分离。

关于html的语法

< 标签名> < /标签名>这样子为一个双标签， < 标签名/>这样子为一个单标签

< 标签名>=》标签的开始，< /标签名>=》标签的结束

HTML的基本结构

< html> < /html>这是根标签（页面中最大的标签）

< head> < /head>这是头标签（页面中的头标签里面必须要设置的是标签的title）

< title> < /title>这是文档的标题（让网页有一个属于总结的标题）

< /body>这是文档的主体（让网页中的所有元素都放在此处）

在vscode中开发html的小技巧

！加tab键可以形成html的主要框架

ctrl +（放大当前编辑的页面） ctrl -（缩小当前编辑的页面）

开发html的好用的vscode的插件

open in browser用此插件可以在vscode中右键直接打开浏览器

auto Rename tag 此插件可以很方便的同时修改前后标签

vscode形成的骨架说明

< ！DocType> ==》文档类型说明。例如：< ！DocType html>（告诉浏览器这个是html5版本）

< html lang=“en”> ==》语言说明。例如：< html lang=“en”>（告诉浏览器这个是英文版本）中文版本为lang=“zh-CN”

(字符集是UTF-8的格式)这种格式用的比较多

html的常用标签

一、标题标签：< h1>~< h6>

1. 单行显示
2. 一共有6个等级
3. h1字号最大

二、段落标签：< p><\p>

把文字分成若干个段落

三、换行标签：< br \>

这是一个单标签（强制换行）

四、文本格式化标签（加粗，斜体，下划线）----在css中也有类似的样式

• 加粗：< strong>或者< b>此处strong用的比较多
• 倾斜：或者< i>此处em用的比较多
• 下划线：< ins>或者< u>此处ins用的比较多
• 删除线：< del>或者< s>此处del用的比较多

五、div和span标签

• div标签用来布局单个一行只能放一个
• span标签用来布局一行可以防多个

六、图像标签< img src="" alt=""/>

• src是必须属性要指定图片的地址和名称（图片可以是本地图片也可以是网上图片）
• alt为替换文本（在图片不能显示的时候显示的文字）
• title为提示文本(将鼠标防到图片上显示的文字)
• width为图片宽度（单位为px）
• height为图片高（单位为px）
• borer为图像边框粗细
• 各个属性间无，用 隔开

图像的路径

• 相对路径：图片相对与html页面的位（…/表示上一级./表示下一级/表示同一级）这一种用的比较多
• 绝对路径：在电脑上的绝对路径/网络上的绝对路径（其中电脑上的路径用\来分割）

链接标签

1. 外部链接 例如：baidu
2. 内部链接 例如:demo
3. 空链接 例如:XXX
4. 下载链接 例如:下载
5. 网页元素链接 在网页中的各种元素（文本，图像，表格音频都可以超链接）
6. 锚点链接 当我们点击页面的时候可以快速定位到页面的位置:用法(首先：在超链接的href属性中设置属性值的名字。然后：在目标的位置加上对于的id属性)

html中的注释和特殊字符

<！—注释语句— >（快捷键为ctrl+/）

HTML 原代码

显示结果

描述

<

<

小于号或显示标记

>

>

大于号或显示标记

&

&

可用于显示其它特殊字符

"

“

引号

®

®

已注册

©

©

版权

™

™

商标

 

半个空白位

 

一个空白位

 

不断行的空白

表格标签

• table定义表格的标签
• tr定义表格的行(必须在table中))
• td定义表格的单元格(必须在tr中)
• th定义表头单元格（位于表格的第一行/第一列 文本内容加粗居中显示）

表格属性

表格的属性

属性值

用法

align

left/right/center

规定表格周围的元素的对齐方式

border

1或" "

单元格是否有边框（默认为“ ”表示无边框）

cellspacing

像素值

单元格之间的空白（默认为2px）用的最多是0

cellpadding

像素值

单元格边沿与其内容之间的空白（默认1像素）用的多的是2

width

像素值

表格宽度

合并单元格的三部曲

1. 确定要合并行（rowspan）还是列（colspan）------》特别提醒：横着是跨列，竖着是跨行
2. 找到目标单元格，协商合并的方式和合并的单元格数量
3. 删除多余的单元格

三大列表

列表名

列表项

用法

无序列表(ul)

li

各个列表之间无先后顺序的时候可以使用

有序列表(ol)

li

各个列表之间会自动生成1234…的顺序

自定义列表(dl)

dt(主项，大哥）dd（副项，小弟）

有主次关系，可以有一个主无数个次（次关系对主关系进行说明）

表单标签

表单的组成：表单域、表单控件、提示信息

表单域：（form）会把范围内的表单提交到后台的服务器上

属性

属性值

说明

action

url地址

用于指定接收并处理表单的数据的服务器地址

method

post/get

用于设置表单数据的提交方法

name

用户自定义名称

用于指定提交的页面

表单元素

表单元素：input，select，textarea

input的用法

input type=" 属性值"

属性值：image（图像），button（按钮），text（默认文本），checkbox（多选框），file（文件），password（密码），reset（重置），submit（提交），radio（单选框），hidden（隐藏输入的字段）

input的其他属性

属性

属性值

说明

name

自定义

定义input的元素名称

value

自定义

定义input的元素的值

checked

checked

规定首次就默认选中（多用于选择框中）

maxlength

正整数

输入的字符的最大长度

label标签

作用：用于绑定表单元素，当点击文本时会自动定位到相应的表单元素上实现方便快捷

语法："label for=“sex” nan
label input type=“radio” id="sex "

核心：label的标签for属性和相关的元素的id一致

下拉表单（select）

• option为下拉的选项
• 默认选中的属性为selected=“selected”

文本域（textarea）

• 多用于留言板
• 可以设置cols和row

而塞过 2020-10-11

下一站(css)