HTML小白入门笔记

时间:2020-7-29 作者:admin


一、HTML简介

1. HTML是什么

​ HTML:Hyper Text Markup Language超文本标签语言

​ 由各种标签组成,用来制作网页,告诉浏览器该如何显示页面

2. 版本

​ W3C:World Wide Web Consortium万维网联盟,制定Web技术相关标准和规范的组织,HTML就是W3C制定的标准

​ 两个版本:HTML4.01、HTML5

​ 官网:http://w3school.com.cn/

3. 后缀名

​ HTML文件以 .html 为后缀

二、HTML文档结构

1. 基本结构

  • HTML标签是由尖括号包围的关键词,如 <html> ,通常都是成对出现,如 <html> </html>

    (也有不成对出现的特殊标签,如<meta>

  • <html>为根标签,包含 <head>头部和 <body>主体部分

  • 头部提供关于网页的相关信息,如标题、字符编码、关键字等摘要信息

  • 主体部分提供网页的具体内容,真正显示在页面中

  • 可以在网页文件的第一行使用 <!DOCTYPE html>声明文档的类型,表示使用HTML5版本规范

  • 合理的进行缩进;标签名不区分大小写,但一般都习惯全小写

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        欢迎来到HTML!
    </body>
    </html>
    

2. 标签组成

2.1 标签组成

​ 一个完整的HTML标签的组成:

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

​ 属性值要用引号引起来,一般使用双引号

2.2 标签分类

​ 根据标签是否关闭,可以分为:关闭型、非关闭型

  • 关闭型,有结束标签

    <title></title>
    <body></body>
    <h1></h1>
    
  • 非关闭型,没有结束标签

    <br>
    <hr>
    <meta>
    

​ 根据标签是否独占一行,可以分为:块级标签、行级标签

  • 块级标签:显示为块状,独自占一行

    <h1></h1>
    
  • 行级标签:在行内显示,可以与其他内容在同一行显示

    <span></span>
    

3. 注释

​ 注释在浏览器中不会显示,但通过查看源代码可以看到

<!-- 注释内容 -->

4. 实体字符

​ 也称为特殊字符,用于显示一些特殊符号,如:<、>、&、空格等

​ 语法:

&实体字符名称;

​ 常用实体字符:

&lt;       <      小于号      less than
&gt;       >      大于号      more than
&nbsp;            空格        space          对于连续的空白字符(包含空格、缩进、换行等),在浏览器中显示时只会显示为一个空格
&amp;      &       与
&copy;     ©      版权符号    copyright
&reg;      ®      注册符号    register

​ 注:实体字符名称区分大小写,即大小写敏感

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#ffe4c4">
    欢迎来到HTML!
    <hr>
    <h1>Java软件工程师</h1>
    welcome to
    <br>
    nanjing
    <hr>
    <!--
        块级标签,行级标签
        span标签是一个行级标签
    -->
    <span>嘿嘿</span>哈哈
    <hr>
    书名:&lt;&lt;HTML从入门到放弃&gt;&gt;
    <br>
    好好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学习,天天向上
    <br>
    在HTML中使用&amp;lt;表示小于号&lt;
    <br>
    在HTML中使用&amp;copy;表示版权符号&copy;
    <br>
    在HTML中使用&amp;reg;表示注册符号&reg;
    <hr>
    <p>HTML:Hyper Text Markup Language超文本标签语言</p>
    <p>由各种标签组成,用来制作网页,告诉浏览器该如何显示页面</p>
    <hr>
    <h2>Java</h2>
    <h3>Web</h3>
    <h4>Android</h4>
    <h5>IOS</h5>
    <h6>Python</h6>

</body>
</html>

三、常用标签

1. 基本标签

标签 含义 说明
br 换行标签 非关闭型
p 段落标签 关闭型,块级标签,前后有明显的间隔
h1、h2…h6 标题标签 按照h1到h6逐渐变小,块级标签,加粗显示
div 分区标签 常作为容器来使用,一般用在页面布局中,块级标签
span 范围标签 默认没有任何效果,一般用来设置行内的特殊样式
ol、li 有序列表 有顺序的项目列表
ul、li 无序列表 无顺序的项目列表
hr 水平线标签 非关闭型,块级标签
img 图像标签 非关闭型,行级标签

​ hr标签的常用属性:

  • color 颜色

    两种写法:

    ​ 颜色名称,如red、green、blue、white、black…

    ​ 16进制的RGB:Red、Green、Blue,用法:#RRGGBB,每个颜色的范围是0­255,转换为16进制 是00—­FF

    ​ 如#FF0000红、#00FF00绿、#0000FF蓝、#FFFFFF白、#000000黑、#CCCCCC灰色、#FF7300橙色

    ​ 特定情况下可以简写,要求每种颜色的两位值各自必须都相同,如#0f0、#00f、#ccc

  • size 粗细

  • width 宽度

    两种写法:

    ​ 像素,绝对值(固定值)

    ​ 百分比,相对值,相对于父容器的宽度百分比

  • align 对齐

    取值:center(默认值)、left、right

​ img标签的常用属性:

  • src:source 指定图片的路径,必须有

    如果图片和html页面在同一个文件夹中,可以直接写图片名称

    习惯上,我们会把多个图片统一放到特定文件夹中,如images,此时需要在图片名称前添加文件夹的名 称images/

  • alt:当图片无法显示时的提示信息

  • title:当鼠标停留在图片上时显示的提示信息

  • width/height: 设置图片的宽和高

    默认按图片原尺寸显示

    如果只设置其中一个,则另一个按比例缩放

    如果同时设置宽和高,可能会导致图片变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 1200px; height: 100px; background: antiquewhite">顶部的导航菜单</div>
    <div style="width: 1200px; height: 400px; background: beige">
        中间的主体部分
        <br>
        iPhone XR不要9998,也不要1888,只要<span style="color: brown; font-size: 30px">198</span>!
        <hr>
        <h2>期末考试前三名</h2>
        <ol>
            <li>唐伯虎</li>
            <li>秋香</li>
            <li>石榴姐</li>
        </ol>
        <h2>可爱的同学们</h2>
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
        <h2>hr标签的常用属性</h2>
        <hr color="#00F" size="5px" width="50%" align="left">
    </div>
    <div style="width: 1200px; height: 120px; background: aquamarine">
        底部的版权部分
        <br>
        <img src="image/like.jpg" alt="这是一张图片" title="你敢点我试试" width="160px">
    </div>
</body>
</html>

2. 标签嵌套

​ 标签不能瞎嵌套,如以下嵌套就是错误的,p标签中不能嵌套div标签

<p>
<div>world</div>
</p>

​ 浏览器渲染后显示的页面代码与编码时可能会有所不同

3. 开发者工具

​ 用来帮助开发人员查看和调试页面,浏览器基本上都提供了类似的工具

​ 如何打开:

  • 在页面中右击——>检查/查看元素/审查元素

  • 按F12

    常用工具:

  • Console:控制台,显示各种警告和错误信息

  • Elements:从浏览器的角度查看页面,浏览器渲染页面时的HTML、CSS、DOM等

  • Network:查看网络请求信息,浏览器向服务器请求了哪些资源、资源的大小以及加载资源花费的时间

四、超链接

1. 简介

​ 使用超链接可以从一个页面跳转到另一个页面,实现页面间的导航

​ 当把鼠标移动到超链接上时,鼠标箭头会变成一只小手

​ 使用 <a> 标签来创建超链接

  • 普通链接,跳转到另一个页面
  • 锚链接,跳转到锚点
  • 功能性链接,实现特殊功能

2. 超链接的种类

​ 分为三种:

  • 普通链接,跳转到另一个页面
  • 锚链接,跳转到锚点
  • 功能性链接,实现特殊功能

2.1 普通链接

​ 语法:

<a href="链接地址" target="链接打开位置">链接文本或图像</a>

​ 常用属性:

  • href 链接地址/路径,必须的

  • target 链接打开的位置,常用取值: _self (自身、当前,默认值)、 _blank (空白、新的)

    路径分类:

    • 相对路径

      相对于当前文件的路径

      如果链接目标文件和当前页面文件在同一个文件夹,可以直接写名称如果不在同一个文件夹中,则需要指定相对路径

      .表示当前位置

      ..表示上一级位置

    • 绝对路径

      以根开始的路径

      D:/software/dd.html

      https://www.baidu.com/

2.2 锚链接

​ 点击链接后跳转到指定的位置(锚点anchor)

​ 使用步骤:

  1. 定义锚点(标记)
<a name="锚点名称">目标位置</a>
  1. 链接锚点

    <a href="#锚点名称">当前位置</a>
    

2.3 功能性链接

<a href="images/heihei.gif">点击此处下载图片</a>
<a href="javascript:alert('胆子不小!')">点我试试</a>

3. URL

​ Uniform Resource Locator 统一资源定位符,用来定位资源所在位置,最常见的就是网址

​ URL组成: 协议://域名:端口/路径/资源?参数#锚点

​ 示例:http://www.baidu.com:8080/shop/product/add.html?name=tom&age=21#abc

  • 协议 ,通信的协议,如:http、https、ftp、file

  • 域名,服务器的地址,一般开发中使用ip地址,如:192.168.1.8;项目上线后使用域名,如

    www.baidu.com

  • 端口,通信时使用的端口号,如:http默认使用80、https默认使用443、ftp默认使用21

    如果使用的是默认端口,则端口可以省略;如果使用的不是默认端口,则端口不能省略

  • 路径,目标文件所在的路径结构,如:/shop/product

  • 资源,要访问的目标文件,如:add.html

  • 参数,也称为查询字符串,以?开头,参数名和参数值之间以=隔开,多个之间以&隔开,如:? name=tom&age=21

  • 锚点,以#开头,如:#abc

五、表格

1. 简介

表格是一个规则的行列结构,每个表格由若干行组成,每行由若干单元格组成。

table、row、column

2. 基本结构

2.1 table标签

​ 用来定义表格

​ 常用属性:

  • border 边框,默认为0
  • width/height 宽度/高度
  • align 水平对齐,取值:left、center、right
  • bordercolor 边框颜色
  • bgcolor 背景颜色
  • background 背景图片
  • cellspacing 间距,单元格与单元格之间的距离
  • cellpadding 边距,单元格内容与边界之间的距离

2.2 tr标签

​ 用来定义行,table row

​ 常用属性:

  • align 水平对齐,取值:left、center、right
  • valign 垂直对齐,取值:top、middle、bottom
  • bgcolor 背景颜色
  • background 背景图片

2.3 td标签

​ 用来定义单元格,table data

​ 常用属性:align、valign、bgcolor、background

​ 注: 表格必须由行组成, 行必须由单元格组成, 数据必须放到单元格td中

2.4 使用idea插件快速建表小技巧

​ 比如要建一个两行两列的表

步骤:
1.输入table>(tr>td{td$}*2)*2
#花括号里代表td的内容,$代表序号按照列数自动增长,tr括起来*行数,td*列数
2.按下Tab
3.自动转换成如下代码
	<table>
        <tr>
            <td>td1</td>
            <td>td2</td>
        </tr>
        <tr>
            <td>td1</td>
            <td>td2</td>
        </tr>
    </table>

3. 合并单元格

​ 也称为表格的跨行跨列

​ 两个属性:

  • rowspan

    设置单元格所跨的行数,如rowspan=2,表示跨越2行

  • colspan

    设置单元格所跨的列数,如 colspan=4,表示跨越4列

​ 步骤:

  1. 在跨越的单元格中设置rowspan/colspan属性
  2. 将被跨越的单元格删除

注: 必须要保证每行的实际列数是相同的, 否则表格可能会出现错乱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px"  width="500px" height="300px" align="center" bordercolor="#f00" bgcolor="#ffe4c4"
           background="image/like.jpg" cellspacing="0px" cellpadding="0px">
        <tr align="center" bgcolor="#ffe4c4">
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
        </tr>

        <tr valign="top">
            <td>HTML</td>
            <td valign="bottom">HTML</td>
            <td>HTML</td>
            <td>HTML</td>
        </tr>

        <tr>
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
        </tr>

        <tr>
            <td>HTML</td>
            <td colspan="3">HTML</td>
        </tr>
    </table>
</body>
</html>

4. 高级标签

  • caption标签,表格的标题

  • thead标签,表格的头部 table head

  • tbody标签,表格的主体 table body(浏览器会自动为表格添加tbody)

  • tfoot标签,表格的脚部 table foot

  • th标签,表格的头部标题 table head title,一般用在thead中,设置列的标题,替代td标签,与td的区别在于:加粗和居中对齐

注:使用thead、tbody、tfoot标签来划分表格结构的好处:

可以同时修改一部分表格的样式

比如设置tbody里面的字体全部居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="500px" height="200px" align="center">
    <caption><h2>学生信息表</h2></caption>
    <thead>
        <tr>
            <th width="20%">编号</th>
            <th width="20%">姓名</th>
            <th width="20%">年龄</th>
            <th width="20%">性别</th>
            <th width="20%">爱好</th>
        </tr>
    </thead>
    <tbody align="center" bgcolor="#ccc">
        <tr>
            <td>1001</td>
            <td>张三</td>
            <td>td3</td>
            <td>td4</td>
            <td>td5</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>李四</td>
            <td>td3</td>
            <td>td4</td>
            <td>td5</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>王五</td>
            <td>td3</td>
            <td>td4</td>
            <td>td5</td>
        </tr>
        <tr>
            <td>1004</td>
            <td>赵六</td>
            <td>td3</td>
            <td>td4</td>
            <td>td5</td>
        </tr>
        <tr>
            <td>1005</td>
            <td>乔七</td>
            <td>td3</td>
            <td>td4</td>
            <td>td5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总人数:</td>
            <td colspan="4">6</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

六、表单

1. 简介

​ 表单是一个包含若干表单元素的区域,用于获取不同类型的用户信息

表单元素是允许用户在表单中输入信息的元素,如:文本框、密码框、单选按钮、复选框、下拉列表、按钮等

2. 基本结构

2.1 表单语法

<form action="表单提交的地址" method="表单提交的方式" enctype="数据传输的方式">
多个表单元素
</form>

2.2 form标签

​ 用来定义表单,可以包含多个表单元素

​ 常用属性:

  • action 提交数据给谁处理,默认为当前页面

  • method提交数据的方式,取值:get (默认值)、post

    get和post的区别:

    • get: 以查询字符串形式提交、地址栏能看到、长度有限制、不安全
    • post: 以表单数据组形式提交、地址栏中看不到、长度无限制、安全(较常用)
  • enctype 数据传输的方式,默认为application/x­www­form­urlencoded,上传文件时要改为multipart/form­ data

3. 普通表单元素

​ 大多数表单元素都是使用input标签,通过type属性设置表单元素的类型

<input type="表单元素类型">
表单元素类型 含义 说明
text 单行文本框 省略不时写默认就是text
password 密码框 输入时以点号显示,安全
radio 单选按钮 只能选择其中的一个
checkbox 复选框 可以同时选择多个
submit 提交按钮 提交表单数据
reset 重置按钮 重置表单元素的初始值
image 图像按钮 可以使用图片作为按钮,也具有提交的功能
button 普通按钮 默认无功能
file 文件选择器 选择要上传的文件
hidden 隐藏域 在页面上不显示,但会提交,可以用来存储数据

3.1 单行文本框

​ 常用属性:

  • name 名称,很重要,如果没有name,则该表单元素的数据不会被提交

  • value 初始值

  • placeholder

  • size 宽度

  • maxlength 最大字符数,默认没有限制

  • readonly 只读,readonly=“readonly”,可简写为readonly,即只写属性名

  • disabled 禁用,完全不能用

    注:readonly和disabled区别:readonly的数据会提交,而disabled的数据不会提交

    表单元素被提交的两个条件:1.有name属性 2.非disabled

3.2 单选按钮

​ 常用属性:

  • name 名称,多个radio的name属性值必须相同,才能实现单选(互斥)
  • value 值
  • checked 默认是否选中,两种状态:选中、未选中

3.3 复选框

​ 常用属性和radio类似

3.4 文件选择器

​ 常用属性:

  • name 名称

  • accept 设置可选的文件类型,用来限制上传的文件类型

    使用MIME格式字符串对资源类型进行限制

    常用MIME类型:

    ​ 纯文本:text/html、text/css、text/javascript、text/xml、text/plain

    ​ 图像:image/jpeg、image/png、image/gif

    注:可以通过类似 image/* 来匹配所有图像文件

4. 特殊表单元素

表单元素 含义 说明
select 下拉列表
option 下拉列表的选项
textarea 文本域/多行文本框 用来创建多行文本框

4.1 下拉列表

​ select常用属性:

  • name 名称

​ option常用属性:

  • value 选项值

  • selected 设置默认选中项

4.2 文本域

​ textarea常用属性:

  • name 名称
  • rows 行数
  • cols 宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>用户注册</h2>
    <form action="" method="post" enctype="application/x-www-form-urlencoded">
        编号:  <input type="text" name="id" value="1" readonly> <br>
        用户名:<input type="text" name="username" placeholder="请输入用户名"> <br>
        手机号:<input type="text" name="phone" size="10px" maxlength="11"> <br>
        密码:  <input type="password" name="password"> <br>
        性别:  <input type="radio" name="sex" value="man" checked><input type="radio" name="sex" value="woman"><br>
        爱好: <input type="checkbox" name="hobby" value="eat" checked>吃饭
             <input type="checkbox" name="hobby" value="sleep">睡觉
             <input type="checkbox" name="hobby" value="play">打豆豆 <br>
        头像: <input type="file" name="header" accept="image/png"> <br>
        学历: <select name="degree">
                <option value="0" selected>--请选择学历--</option>
                <option value="1">大专</option>
                <option value="2">本科</option>
                <option value="3">研究生</option>
                <option value="4">博士</option>
             </select>
        <br>
        简介: <textarea name="introduction" cols="30" rows="10"></textarea> <br>
        <input type="hidden" name="_id" value="3"> <br>
        <input type="submit" value="注 册">
        <input type="reset" value="重 置">
        <input type="image" src="image/like.jpg" height="20px">
        <input type="button" value="普通按钮">
    </form>
</body>
</html>

七、内嵌框架

1. 简介

​ 使用iframe可以在一个页面中引用另一个页面,实现复用,灵活

2. 基本用法

​ 语法:

<iframe src="" width="" height=""></iframe>

​ 常用属性:

  • src 引用的页面
  • width/height 宽度/高度,像素或百分比
  • frameborder 是否显示边框,取值:0、1(默认)
  • scrolling 是否显示滚动条,取值:yes、no、auto(默认)
  • name 为框架定义名称

3. 在框架中打开链接

<iframe name="content"></iframe>

<a href="" target="content"></a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <iframe src="top.html" frameborder="0" height="130px" width="800px" name="nav"></iframe>
    <div style="height: 400px; width: 800px; background: #ccc">
        页面的主体部分 <br>
        <a href="test01.html" target="nav">打开test01页面</a>
    </div>
    <div>
        底部的版权部分
    </div>
</body>
</html>

八、多媒体标签

1. audio标签

​ 在页面中插入音频,不同浏览器对音频格式的支持不一样

​ audio标签常用属性:

  • src 音频文件的来源
  • autoplay 是否自动播放,默认不自动播放
  • controls 是否显示控制面板,默认不显示
  • loop 是否循环播放

注:不一定所有的浏览器都支持该标签或属性,比如Chrome就不支持autoplay属性

可以通过网址:<www.caniuse.com>去具体查看浏览器对标签的支持情况

2. video标签

​ 在页面中插入视频,不同浏览器对视频格式的支持不一样

​ 用法与audio标签基本相同,增加属性:

  • width/height 视频播放器的尺寸
  • poster 在视频加载前显示的图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <audio src="audio/water.mp3" autoplay controls loop></audio>
    <hr>
    <video src="video/cloud.mp4" autoplay controls width="500px" poster="image/like.jpg"></video>
</body>
</html>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。