【前端之旅】HTML 大总结

【前端之旅】HTML 大总结_第1张图片

一名软件工程专业学生的前端之旅,记录自己对三件套(HTML、CSS、JavaScript)、Node.js、Vue、小程序开发(uniapp)以及各种UI组件库、前端框架的学习。

【前端之旅】Web基础与开发工具
【前端之旅】HTML 大总结

HTML 大总结

      • 一、HTML基础结构标签
        • HTML骨架格式
        • HTML元素标签分类
        • 文档类型声明
        • 页面语言 lang
        • 字符集
        • 注释
      • 二、HTML常用标签
        • 1.标题标签
        • 2.段落标签
        • 3.换行标签与水平线标签
        • 4.盒子标签
        • 5.文本格式化标签
        • 6.图像标签
        • 7.路径问题
        • 8.超链接标签与锚点链接
        • 9.特殊字符
        • 10.表格标签
          • 表格属性
          • 合并单元格
        • 11.列表标签
        • 12.表单标签
          • 表单域
          • 表单控件(表单元素)
          • input输入表单元素
            • 1、文本框与密码框
            • 2、单选框和复选框
            • 3、name和value属性
            • 4、checked和maxlength
            • 5、submit和reset
            • 6、button和文件域
            • 7、label
          • select下拉表单元素
          • textarea文本域元素

一、HTML基础结构标签

HTML(Hyper Text Markup Language) 超文本标记语言

之所以叫做超文本标记语言,一是因为它可以加入各类图片、音频、视频等多媒体,二是它可以实现从一个文本文件跳转到另一个文本文件,而且借助互联网,它可以与世界各个主机的文件链接。

HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

HTML元素标签分类

HTML标签是由尖括号包围的关键字,例如:

  • 常规标签(双标签):标签对中的第一个标签是开始标签,第二个标签是结束标签,例如
  • 空元素(单标签):例如:

文档类型声明

文档类型声明会告诉浏览器按照HTML5标准解析页面。

  • 声明位于文档中的最前面的位置,处于 标签之前。
  • 不是一个 HTML 标签,它就是文档类型声明标签

页面语言 lang

中 lang 指定该html标签内容所用的语言

  • en 定义语言为英语
  • zh-CN 定义语言为中文

lang的作用

  • 根据根据lang属性来设定不同语言的css样式,或者字体
  • 告诉搜索引擎做精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别

字符集

标签内,可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

  • charset 常用的值有::GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符

注释

注释

  • 注释快捷键为 ctrl + /
  • 注释以 结束

二、HTML常用标签

排版标签 : 主要和CSS 搭配使用,显示网页结构的标签,是网页布局最常用的标签。

  • 标题标签
  • 段落标签

  • 水平线标签
  • 换行标签
  • div 与span标签:没有语义,是我们用于网页布局的2个常用的盒子。

标签属性(行内式):我们使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。

<标签名 属性1="属性值1" 属性2="属性值2" > 内容 标签名>

1.标题标签

<body>
    <h1> 一级标题h1>
    <h2> 二级标题h2>
    <h3> 三级标题h3>
    <h4> 四级标题h4>
    <h5> 五级标题h5>
    <h6> 六级标题h6>
body>
  • 标题标签下的文字会变的加粗,字号也会根据标签等级依次变大,并且一个标题独占一行。

2.段落标签

<p>
   这是一个段落。
p>
  • 写在一个段落标签里的文字,会根据浏览器窗口的大小进行自动换行,并且段落和段落之间保有空隙。

3.换行标签与水平线标签

<br/>
<hr/>

  • 是个单标签,作用是进行换行,不会产生垂直的间距。

  • 自动生成一条100%宽的水平线。

4.盒子标签

  • :一行只能放一个大盒子
  • : 一行可以放多个小盒子
<div>这是一个divdiv>
<span>这是一个spanspan>

5.文本格式化标签

  • 为文字设置粗体、斜体、下划线等效果

  • b和strong 文字以粗体显示

  • i和em 文字以斜体显示

  • s和del 文字以加删除线显示

  • u和ins 文字以加下划线显示

6.图像标签

<body>
   	<img src="" alt="" title="" />
body>
  • src是标签的必须属性,用来指定图像文件的路径与文件。

    属性 属性值 说明
    src 图片路径 必须属性
    alt 文本 替换文本(当图片不能显示时候显示的文字)
    title 文本 提示文本(鼠标放到图像上,显示的文字)

7.路径问题

在引入静态资源时(比如图片、音频等)需要通过文件路径进行引入,这里主要涉及到绝对路径与相对路径。

  • 绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
  • 相对路径:
相对路径分类 符号 说明
同一级路径 图形文件位于 HTML 文件同一级 如
下一级路径 / 图形文件位于 HTML 文件下一级 如
上一级路径 …/ 图形文件位于 HTML 文件上一级 如

8.超链接标签与锚点链接

超链接标签:点击触发后可以跳转对应链接或者下载相应资源。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
属性 作用
href (此项必填)用于填写指定链接目标的url地址,注意:如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
target 用于填写指定连接页面的打开方式:_self为默认值,_blank为在新窗口中打开

锚点链接标签:点击链接,可以实现快速定位到页面中的某个位置。

  • 在链接文本的href属性中,设置属性值为 #名字
  • 找到目标位置标签,里面添加一个 id属性=刚才的名字
<a href = "#demo">点击一下,进入自我介绍a>
<h3 id = "demo">自我介绍h3>

9.特殊字符

HTML 原代码 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" 引号
® ® 已注册
© © 版权
商标
半个空白位
一个空白位
  不断行的空白

重点记住:空格、大于号、小于号 这三个,其余的使用的很少,如果需要使用回头查阅即可

10.表格标签

表格标签现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理。

  • table 用来定义表格的标签
  • tr 用来定义表格中的行,必须嵌套在
    标签中
  • td 用来定义表格中的单元格,必须嵌套在 标签中
  • th 用来定义表格中的表头,表头单元格里面的内容加粗居中显示
<body>
    <table>
        <tr>  <th>姓名th>     <th>性别th>    <th>年龄th>        tr>
        <tr>  <td>孙铭td>     <td>td>     <td>18td>          tr>  
        <tr>  <td>孙不坚td>     <td>td>     <td>18td>          tr>       
        <tr>  <td>sunmingtd>     <td>td>     <td>18td>          tr>     
    table>
body>

代码效果:

【前端之旅】HTML 大总结_第2张图片

表格属性

表格标签的属性实际开发并不常用,后面样式基本都是通过CSS来设置的。

属性名 属性值 描述
align left center right 规定表格相对周围元素的对齐方式。
border 1或者’’ ‘’ 规定表格单元是否拥有边框,默认为" ",表示没有边框,1则表示有。
cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素。
cellspacing 像素值 规定单元格之间的空白,默认2像素。
width 像素值或百分比 规定表格的宽度。
<table align=center border="1" cellpadding="20" cellspacing="0" width="500">
合并单元格
  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan="合并单元格的个数"

确定目标单元格(合并写代码)

  • 跨行:最上面侧单元格为目标单元格,写合并代码
  • 跨列:最左面侧单元格为目标单元格,写合并代码
 <table align=center border="1" cellpadding="20" cellspacing="0" width="700">
        <tr>
            <th colspan="5">个人简历th>

        tr>
        <tr>
            <th>姓名:th>
            <th>th>
            <th>性别:th>
            <th>th>
            <th rowspan="4">照片th>
        tr>
        <tr>
            <th>婚姻状况:th>
            <th>th>
            <th>出生年月:th>
            <th>th>
        tr>
        <tr>
            <th>民族:th>
            <th>th>
            <th>政治面貌:th>
            <th>th>
        tr>
        <tr>
            <th>身高:th>
            <th>th>
            <th>学历:th>
            <th>th>
        tr>
    table>

代码效果:

【前端之旅】HTML 大总结_第3张图片

11.列表标签

列表容器里面装载着结构,样式一致的文字或图表的一种形式叫列表。列表最大的特点就是整齐 、整洁、 有序,跟表格类似,但是它可组合自由度会更高。一般网站的底部链接部分就是用列表标签制作。

  • 无序列表:
    • 有序列表:
      1. 自定义列表:
    标签名 定义 说明
      无序列表 里面只能包含li,没有顺序,li里面可以包含任何标签。
        有序列表 里面只能包含li,有顺序。
        自定义列表 里面只能包含dt和dd,dt和dd里面可以放任何标签。
         <ul>
                <ul>hahahaul>
                <ul>hahahaul>
            ul>
            <ol>
                <ul>xixixiul>
                <ul>xixixiul>
            ol>
            <dl>
                <dt>关注我们dt>
                <dd>新浪微博dd>
                <dd>联系我们dd>
            dl>
        

        代码效果:

        【前端之旅】HTML 大总结_第4张图片

        12.表单标签

        一个完整的表单通常由表单域,表单控件(表单元素)和提示信息这3部分组成,表单目的是为了收集用户信息。

        【前端之旅】HTML 大总结_第5张图片

        如图世纪佳缘网站中注册界面中就存在表单,该表单目的是为了收集用户信息。

        表单域
        • 表单域是一个包含表单元素的区域

        • 标签用于定义表单域,会把它范围内的表单元素信息提交给服务器

        属性 属性值 作用
        action url地址 用于指定接收并处理表单数据的服务器程序的url地址
        method get/post 用于设置表单数据的提交方式,其取值为get或post
        name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域
        <form action="url地址" method="提交方式" name="表单域的名称">    
        form>
        

        GET 和 POST 的区别(后面学 ajax 后台交互的时候用得到)

        • GET在浏览器回退时是无害的,而POST会再次提交请求。
        • GET请求会被浏览器主动cache,而POST不会,除非手动设置。
        • GET请求只能进行url编码,而POST支持多种编码方式。
        • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
        • GET请求大小一般是(1024字节),http协议并没有限制,而与服务器,操作系统有关,POST理论上来说没有大小限制,http协议规范也没有进行大小限制,但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
        • 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
        • GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
        表单控件(表单元素)

        表单元素三大组:input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素

        input输入表单元素
        • input是个单标签,type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等),type属性的属性值及描述如下:
        属性值 描述
        button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
        checkbox 定义复选框
        file 定义输入字段和"浏览"按钮,供文件上传。
        hidden 定义隐藏的输入字段
        image 定义图像形式的提交按钮
        password 定义密码字段。该字段中的字符被掩码
        radio 定义单选按钮
        reset 定义重置按钮。重置按钮会清楚表单中的所有数据。
        submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
        text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
        • 除 type 属性外, 标签还有很多其他很多属性,其常用属性如下:
        属性 属性值 描述
        name 由用户自定义 定义 input 元素的名称
        value 由用户自定义 规定 input 元素的值
        checked checked 规定此 input 元素首次加载时应当被选中
        maxlength 正整数 规定输入字段中字符的最大长度
        • name 和 value 是每个表单元素都有的属性值,主要给后端人员使用。
        • name 是表单元素的名字,要求单选框和复选框要有相同的name值。
        • checked 属性主要针对于单选框和复选框,主要作用是一打开页面,就可以默认选中某个表单元素。
        1、文本框与密码框
        • type 属性设置为 text 是文本框
        • type 属性设置为 password 是密码框
        <body>
            <form>
                用户名:<input type="text"> <br/> 
                密码:<input type="password">
            form>
        body>
        
        2、单选框和复选框
        • type 属性设置为 radio 是单选框
        • type 属性设置为 checkbox 是复选框
        • name 是表单元素的名字,要求 单选框和复选框要有相同的name值
        <form>
                用户名:<input type="text"> <br> 
                密码:<input type="password"> <br> 
                
                性别:男<input type="radio"><input type="radio">
                
                爱好:吃饭<input type="checkbox">  睡觉<input type="checkbox">   打游戏<input type="checkbox"> 
        form>
        
        3、name和value属性
        • name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单,name的主要作用就是用于区别不同的表单。
        <form>
                用户名:<input type="text" value="请输入用户名"> <br> 
                密码:<input type="password"> <br> 
                
                
                性别:男<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>
        
        4、checked和maxlength
        • 单选按钮和复选框可以设置checked 属性
        • 当页面打开时候就可以默认选中这个按钮
        • 单选框只能给其中一个加checked,复选框可以多加
        性别:男<input type="radio" name="sex" value="" checked="checked"><input type="radio" name="sex" value="">
        
        5、submit和reset
        • type 属性设置为submit:提交按钮会把表单数据发送到服务器
        • ``type` 属性设置为reset:重置按钮会清除表单中的所有数据
        6、button和文件域
        • type 属性设置为button:是一个按钮
        • type 属性设置为file:是一个文件域,可以上传文件
        <input type="button" value="获取短信验证码"> <br>
            
            上传头像:<input type="file">
        
        7、label
        • label标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到表单元素上,用来增加用户体验

        • label标签的 for属性 应当与相关元素的id 属性相同

          <label for="sex">lable>
          <input type="radio" name="sex" id="sex" />
          
        select下拉表单元素
        • 下拉表单元素