【前端】HTML

甚至还有一些关于招聘的“彩蛋”呢~在我们的控制台中，可以看到代码中有六个标题标签h1-h6。数字越大，字体越小。

标题的大小粗细都是取决于浏览器的实现不同浏览器的一样的标题大小可能不一样。实际开发中一般会手动指定样式这就属于 CSS 的事情了。

这里生成几级标题代码快捷键就是 h几 加上 enter 或者 h几 加上 Tab键注释快捷键是和 Java 一样 Ctrl 加上 / 。

段落标签: p

如上我们的段落不明显为了看起来明显一点我们使用长一点的文本但是我们手动添加显得很笨也有快捷键直接快速添加长段落使用 lorem 就可以自动生成一串随机的长文本对于排版测试很有帮助。但是我们要一段一段的添加长文本又太麻烦了如何同时构造多个段落同时构造一串随机的文本采用的是 “列编辑” 模式针对多个列同时进行编辑按住 Alt 键加上鼠标左键点击你要添加的地方每次点击就会多出一个光标接下来的输入就在所有的光标的地方同时产生相同的输出。

两个 P 标签的内容不会出现在同一行两个 P 标签之间会有一定的段间距此处的段落间距都是可以通过 CSS 来控制的

换行标签: br

如果想在一个段落内部换行直接使用 /n 或者 另起一行是行不通的在 HTML 中要想让内容真正换行需要使用 <br> 标签单标签

空格标签nbsp;

六个字符共同构建了一个空格这是 HTML 的转义字符的写法

格式化标签 加粗: strong 标签 和 b 标签倾斜: em 标签 和 i 标签删除线: del 标签 和 s 标签下划线: ins 标签 和 u 标签

图片标签: img 在同级目录下

图片保存到 image 文件夹中此时图片是下一级路径此时我们上述代码就运行出来图片就不能呈现在我们眼前了

这里要加上对应的目录名便又可以呈现出来此处就是 “相对路径” 的写法。相对路径涉及到 “工作目录”当前的工作目录是啥变数很大前面再加个 ./ 又是相同的

如果是存放到上一级路径那就需要再重新写这个代码 ../hhh.jpg

image 的 src 也支持绝对路径 d/hhh.jpg虽然绝对路径也行但是一般不建议html 要能够在多个电脑上都能运行如果是绝对路径的图片发布给别人别人的电脑不一定带有这个图片

image 更常见的写法是使用网络途径URL

如下我们随机搜索一张图片

把这个链接插入到我们的代码中

运行出来的结果就是

alt 的作用就是如果图片正常加载没啥效果如果图片加载失败这里的内容就会显示在图片位置上。

如果当前路径不正确此时这里就有一个图裂了的小图标然后就会在后面显示 alt 的内容了

title 可以让图片有描述信息

鼠标放在图片上就会显示 title

width/height: 控制宽度高度

高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

这里的单位是像素 px

HTML 虽然不难但是很复杂标签很多那么如何查询某个HTML标签的一些具体用法?直接使用搜索引擎来搜索mdn img

超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.

链接的几种形式:

外部链接: href 引用其他网站的地址

此处代码写了一个搜狗的超链接点击页面刷新即可看到如下

此处链接点进去就可以跳转到搜狗的页面

a 标签中的 href 这个属性有很多种写法可以写一个完整的网址可以跳转到任意的网站。还可以只写一个 文件名 / 相对路径 则表示在当前网站内部跳转。还可以写成#表示不进行任何跳转。还可以写成其他类型的文件(不一定是 html)这个时候会触发浏览器的 “下载 功能!!!

怎么控制点击是打开一个新页面而不是在当前页面跳转呢

此时就需要给 a 标签中添加一个属性 target 即可

内部链接: 网站内部页面之间的链接. 写相对路径即可.

在一个目录中, 先创建一个 1.html, 再创建一个 2.html

<!-- 1.html -->我是 1.html<a href2.html>点我跳转到 2.html</a><!-- 2.html -->我是 2.html<a href1.html>点我跳转到 1.html</a>

空链接: 使用 # 在 href 中占位.

<a href#>空链接</a>

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

<a hreftest.zip>下载文件</a>

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

<a href <img srcrose.jpg alt> </a>

禁止 a 标签跳转: <a hrefjavascript:void(0);> 或者 <a hrefjavascript:;>

表格标签 table 标签: 表示整个表格tr: 表示表格的一行td: 表示一个单元格th: 表示表头单元格. 会居中加粗thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)tbody: 表格得到主体区域.

但是如上表格制作不符合我们的审美没有方格划线的这些于是我们再进行相应的处理

加一个边框

但是此处仍然不是很好看我们再进行相应的调整

双层边框每个 table 有一个边框每个 td / th 又有一个边框

如果我们不想要双层边框那我们可以设置每个单元格之间的间距为 0在条件后面添加一个cellspacing0

能否让表格中的文字居中对齐纯 html 做不到还需要搭配 CSS

列表标签 无序列表[重要] ul li , .有序列表[用的不多] ol li自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

使用 li 标签表示一个列表项

注意

元素之间是并列关系ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 ddli 中可以放其他标签.列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

列表,尤其是无序列表,在开发的时候经常会用到如下

表单标签

在页面上填写信息并提交.这个操作就是通过表单标签来实现的表单是让用户输入信息的重要途径.。

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.表单控件: 输入框, 提交按钮等. 重点是 input 标签

form 标签

form的功能是进行前后端交互描述了提交给谁如何提交等交互细节。

input 标签

input标签有很多种形态这些形态就对应了不同的输入方式。

单行输入框

密码框

密码框的效果就是一些实心圆点避免密码直接展示出来

从此处我们可以展示一些小的技巧例如登录某款软件我们如果账号密码都在上面保存了但是我们看不到密码是多少于是乎我们可以通过开发者工具把 password 改为 text 就可以看到密码了不一定每个场景都适用有的经过加密可能看见的就是密文了

单选框


但是此处都可以选

作为一个单选框这明显不符合逻辑不应该能选择两个如何让单选框排他

只要把 name 设成相同的值此时就是排他”的

由于圆圈比较小可能点击不到有点麻烦于是做以下处理

使用 label把文字和单选框绑定在一起了媒介就是 id效果就是点击文字也可以选择而不仅仅只是圆圈

id 属性是 html 元素的身份标识一个页面中的 id 的值得是唯一的

使用checked 属性,就可以做到,当页面加载的时候,就自动的选中一个选项

复选框

复选框里的选项是都可以选的

我们还可以默认设置勾选哪些选项

普通按钮

上述操作之后会得到一个按钮

添加对按钮的文本信息

提交按钮

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送后续介绍

文件选择器

允许用户选择一个本地的文件进一步可以上传到服务器上

这里面可以直接选择电脑的本地文件 然后也可以打开浏览器中运行的代码通常是被严格限制的通常是不能直接访问硬盘的但是也不是绝对不能访问也有一些特殊操作被允许

select 标签

下拉菜单

也可以像前面一样设置默认的选项

textarea 标签

多行编辑框

无语义标签: div & span

没有特定的应用场景可以适用于大部分的场景h1h6aimgulolinput…都是有语义标签语义特定的功能和场景

 
前面介绍的标签中除了 imput 系列标签无法代替剩下的标签基本上都可以使用 div / span 来代替

二.综合案例

展示简历信息

在 github 和 博客 那里我们用 div 包裹或者 br 才能达到换行效果

填写简历信息

例如我们为了完成上述的简历信息我们可以看到上面简历的每一条信息都对的很齐由此根据上述代码就可以基于表格的方式来进行布局。

这里需要注意的是我们性别那一行里那两个图标使我们在本地文件里导入的文件然后需要调整尺寸
 
此处安排一个阿里的图库免费给我们提供了各种各样的图形点击此处 或者复制下方链接

于是经过上述代码的描述 我们网站的简历页面也就做出来了