一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

我们都没有自己想象当中那么强大，所以得不断前进。 ----南城不春

前面我们了解了html部分基础标签，接下来我们继续学习。

链接

外部链接

新窗口打开链接<a href="http://www.baidu.com" target="_blank">百度</a>

示例：百度

ps:没有target默认当前窗口打开

内部链接

<a href="index.html">首页</a>

ps:得事先准备好一个html页面

空链接

<a href="#">首页</a>

这个链接里面什么也没有

下载链接

<a href="xxx.zip">压缩包</a>

点击下载压缩包

ps:此处是同级文件目录下

网页元素链接（图片，视频，音频等等）

<a href="http://www.baidu.com"><img src="xxx.jpg"/></a>

点击图片会跳转到百度

锚点链接（快速定位到某个地方）

<a href="#two">定位链接</a> <h id="two">定位到这里</h>

点击定位到外部链接

ps:#必须加上且必须是id选择器

表单

各种属性及属性值

input中type有多种属性值

属性值	描述
button	不提交数据，只是做某件事
checkbox	复选框（多选）
file	定义输入字段和“浏览”按钮，供文件上传，打开文件目录并选择文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password
radio	定义单选按钮
reset	重置
submit	提交按钮
text

属性	属性值	描述
name	自定义
value	自定义
checked	checked	规定该复选框被选中
maxlength	正整数

name和value必须要有（供后台人员使用）
name要求单选框和复选框要有相同的值

label标签（增加用户体验）（增大光标点击范围）

<label for="username">用户名</label> <input type="text" id="username"/>

通过id实现选择,用户可以不必点击男前面的小圆圈，直接点击男也可以选中，这样可以增加用户的体验范围

select下拉表单

<select>
    <option selected="selected">北京</option>
    <option>山东</option>
    <option>上海</option>
    <option>深圳</option>
</select>

文本域标签

<tr>
    <td>自我介绍</td>
    <td>
        <textarea placeholder="自我介绍"></textarea>
    </td>
</tr>

文本域标签相对于文本框能够输入的范围较大，通常用来描述一件事物等

字体

1.font-family: '宋体','Microsoft Yahei',xxx,xxx

ps:中文或者有空格分开的单词用引号括起来，填写多个字体，防止前面的字体浏览器无法识别

2.font-style设置字体样式（是否倾斜）

3.字体复合属性

font: italic(style) 700(weight) 16px(size) "Microsoft Yahei(family)"

4.装饰文本

text-decoration: undrline(下划线)/line-through(删除线)

6.文本缩进(只缩进首行)

text-indent:20px/-20px

7.行间距

line-height

ps:这里有一个小技巧，当文本框或者盒子中的文字上下间距不相等时，可以将行间距设置为与盒子等高就可以解决啦！

总结：在实际开发中，链接和表单标签用的还是比较多，尤其是在开发网页注册或者登录页面的时候，需要进行巩固复习，而考虑到浏览器的版本兼容性，字体属性用的比较少，通常用到的是字号。

今天就聊到这里，辛苦掘金的运营同学啦！🥰🥰

HTML初学笔记（二）

链接