HTML基本内容回顾

1. HTML的全称是Hyper Text Markup Language，即超文本标记语言。

百度百科：HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

 

2. HTML标签分为单标签和双标签

单标签：例如<mata>和<hr>只有自己一个的标签，因此中间不能添加内容，因为它不像双标签一样有开始，有结束。

双标签：例如<div></div>和<strong></strong>标签一样，具有开始标签和结束标签，所以说双标签是成对出现的。

 

3.HTML标签(元素)显示分类

（1） 块级元素(block)：例如 div, p, ul, ol, li...

特点：

1. 独占一行显示

2. 块级元素如果没有设置宽度，那么它的宽度默认和父容器(元素)一样宽

3. 块级元素可以直接通过设置宽高来改变大小

/* 通过这段CSS代码可以将其它类型元素转换成块级元素 */
display: block; 

 

（2）行内元素(inline)：例如 span, a, em, i, u...

特点：

1. 行内元素都会在同一行上显示

2. 行内元素无法直接通过设置宽高来改变大小

3. 行内元素不能直接设置上下内外边距

/* 通过这段CSS代码可以将其它类型元素转换成行内级元素 */
display: inline; 


/*注意： 在实际工作中，请不要把元素手动转换成行内元素 */

 

（3）行内块元素(inline-block)：img, input...

特点：

1. 行内块元素也在同一行显示

2. 可以直接通过设置宽高改变大小

缺点：行内块元素由于基线对齐有三像素的底部空白

/* 通过这段CSS代码可以将其它类型元素转换成行内块元素 */
display: inline-block; 

 

4. 常见的元素隐藏方式

（1）display系列：完全隐藏，在html结构中不占据原来的位置(常用来配合JS使用)

/*隐藏*/
display: none;

/*显示*/
display: block;

 

（2）visibility系列：仍旧在html结构中占据原来位置

/* 可见性(视觉上的)隐藏 */
visibility: hidden;

 

（3） overflow系列：只有溢出当前容器(元素)的部分会被隐藏

/* 溢出隐藏 */
overflow: hidden;

 

5. 实体字符

因为在HTML中，有些特殊字符是不能直接使用的，因为它已经被赋予了特殊的作用。例如英文输入法下单的大于，小于号被用于包裹html标签

常见的实体字符：

1. 空格   &nbsp;

2. 大于  &gt;

3. 小于  &lt;

 

6. HTML中路径相关的问题

（1） 绝对路径

绝对路径有两种：

① 网络路径

例如：< img src = "http://www.baidu.com/1.jpg" >

② 本地路径

例如：< img src ="D:\img\1.jpg" >

（2）相对路径

① 如果当前html文件和被访问的资源在同一个文件夹内，那么我们就可以直接在src中上设置：src="文件.文件后缀名"

比如：<img src="logo.png" >

② 如果当前html文件在被访问资源的上一级目录中，那么我们可以通过(src="文件所在文件夹名称/文件.文件后缀名")的方式设置对应的路径

比如：<img src="img/logo.png">

③如果当前html文件在被访问的资源的下一级目录中，那么我们可以通过(src="../文件.文件后缀名")的方式设置对应对的路径

比如：<img src="../logo.png"> (每写一次‘../’就和你在文件夹左上角点击了回到上一目录的操作一般)

7. 表单控件

（1）输入框

格式：<input type="text">

 

属性值及其作用表

属性值	作用
maxlength	用来限制当前控件中最多允许输入的字符数
readonly	设置当前输入框为只读状态
disabled	表示当前输入框禁止用状态(禁止操作)
placeholder	占位符(即设置提示信息)
value	当前控件的默认值
name	用于识别当前控件，一般可用于单选控件中

 

 

 

 

 

 

 

 

 

(2) 密码输入框

格式：<input type="password">

注意：输入框内显示的字符为非明文状态，其它属性与输入框一样！

<!--示例-->
<input type="password" maxlength="10" placeholder="这是一个密码输入框"/>

 

（3）单选控件

格式：<input type="radio">

特殊属性：checked: 用来设置默认选中状态（其它属性和输入框一样）

注意：多个选项中的name必须一致，才能达到单选的效果！

<!--示例-->
<input type="radio" name="gender" checked="">男
<input type="radio" name="gender">女

 

（4）下拉列表框

<!--格式-->
<select>
<option> 选项内容 </option>
<option> 选项内容 </option>
<option> 选项内容 </option>
</select>

特殊属性：selected: 设置下拉菜单的默认选中项

总共有两种使用方法：

<!-- 用法一 -->
<select>
        <option value="上海">上海</option>
        <option value="北京" selected="">北京</option>
        <option value="深圳">深圳</option>
</select>


<!-- 用法二 -->
<select>
      <optgroup label="北京市">
            <option value="海淀区">海淀区</option>
            <option value="朝阳区">朝阳区</option>
       </optgroup>
       <optgroup label="上海市">
            <option value="徐汇区">徐汇区</option>
            <option value="浦东区">浦东区</option>
       </optgroup>
</select>

 

（5）多选控件

格式：<input type="checkbox">

特殊属性：checked: 设置默认选中项

<!-- 示例 -->

<input type="checkbox" checked>苹果
<input type="checkbox">香蕉
<input type="checkbox">车厘子
<input type="checkbox">百香果

 

（6）按钮系列

① 提交按钮

<!-- 格式 -->
<input type="submit">

作用：将表单控件中的值提交给后台

 

② 万用按钮 (啥都能干)

<!-- 格式 -->
<input type="button" value="按钮">

作用：常用于配合JS使用，因此基本功能都能实现

③ 重置按钮

<!-- 格式 -->
<input type="reset">

作用：将表单控件中的值恢复为默认

 

④ 图片提交按钮

<!-- 格式 -->
<input type="image" src="./login.png">

作用：将表单控件中的值提交给后台

 

（7）文本域

<!-- 格式 -->
<textarea cols="30" rows="10"> </textarea>

作用：在文本域内可以输入多行文本

特殊属性：

属性值	作用
cols	设置文本域的列数
rows	设置文本域的行数

 

 

 

 

 

 

注意：如果要设置文本域禁止拖拽，需要设置如下CSS属性

textarea {
    resize: none;
}

 

（8）上传控件

<!-- 格式 -->
<input type="file">

作用：用来上传文件

注意事项：如果想操作上传的文件，需要用到JS的内置对象 FileReader

 

注意事项：

除了以上内容需要知晓，还需要掌握底下的几个知识点：

1. html5中新增的语义化标签

2. 标签嵌套规则