javaweb黑马之html快速入门

2022-07-09 10:05:28

01-HTML介绍&快速入门

什么是HTML？

HTML是一门语言，所有网页都是用HTML这门语言编写出来的
HTML(HyperText Markup Language):超文本标记语言

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容
标记语言：由标签构成的语言

HTML在浏览器上运行，HTML标签由浏览器来解析
HTML标签都是预定义好的。
W3C标准：网页主要由三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScript

总结

HTML文件以.html或者.htm为扩展名
HTML结构标签

标签	描述
	定义HTML文档
	定义关于文档的信息
	定义文档的标题
	定义文档的主体

HTML标签不区分大小写
HTML标签属性值单双引皆可
HTML语法松散

基础标签

标签	描述
-	定义标题，h1最大，h6最小
	定义文本的字体，字体尺寸，字体颜色
	定义粗体文本
	定义斜体文本
	定义文本下划线
	定义文本居中
	定义段落
	定义换行
	定义水平线

h标签

hr标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCSwOvPL-1640006557860)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112192006674.png)]

font标签

<!--
        html颜色
        1. 英文单词：red
        2. rgb(值1，值2，值3)：值的取值范围：0-255 rgb(255,0,0)
       3. #值1值2值3：值的范围：00-FF

        -->

p标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izwtxJ5C-1640006557861)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112192028452.png)]

b，i，u标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r6xFXLPD-1640006557862)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112192030129.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcvE68ym-1640006557862)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112192046106.png)]

<h1>企业简介</h1>
<hr color="yellow">
<p><font color="red">传智教育</font>(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制
造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。</p>

<p>民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦
著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。</b>
</p>
<p>探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此“<b>探索教育本源，开辟教育新生态</b>”便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。
</p>

<hr color="yellow">
<center> <font color="#a9a9a9">江苏传智播客教育科技股份有限公司</font>
    </center>
<center> <font color="#a9a9a9">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 </font></center>

03-图片音频视频标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmXghHBI-1640006557863)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112192129743.png)]

图片，音频，视频标签

标签	描述
	定义图片
	定义音频
	定义视频

img：定义图片

src：规定显示图像的URL
height：定义图像的高度
width：定义图像的宽度

audio：定义音频。支持的音频格式：MP3,WAV,OGG

src：规定音频的URL
controls：显示播放控件

video：定义视频。支持的音频格式：MP4,WebM，OGG

src：规定视频的URL
controls：显示播放控件

资源路径：
                    1.绝对路径：完整路径
                    2.相对路径：相对位置关系
             xxx/html/02-图片音频视频.html
             xxx/html/a.jpg
               ./jpg & a.jpg


        xxx/html/img/a.jpg  img目录和0.2html目录同级
                           
         ../img/a.jpg  当img目录在02.html目录上级

04-超链接标签&列表标签

超链接标签

标签	描述
	定义超链接，用于链接到另一个资源

href：指定访问资源的URL
target：指定打开资源的方式

_self:默认值，再当前页面打开
_blank:在空白页面打开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMh50XQu-1640006557865)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112201608169.png)]

列表标签

有序列表
1. 咖啡
2. 茶
3. 牛奶
无序列表
- 咖啡
- 茶
- 牛奶

标签	描述
	定义有序标签
	定义无序列表
	定义列表项

type:设置项目符合

05-表格标签&布局标签

表格标签

标签

描述

定义表格

定义行

定义单元格

定义表头单元格

table：定义表格

border：规定表格边框的宽度
width：定义表格的宽度
cellspacing：规定单元格之间的空白

tr：定义行

align：定义表格行的内容对齐方式

td：定义单元格

rowspan：规定单元格可横跨的行数
colspan：规定单元格可横跨的列数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500" >
<tr>
        <th>序号</th>
        <th>序号</th>
        <th>序号</th>
        <th>序号</th>

</tr >
    <tr align="center">
    <td>010</td>
    <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
    <td>三只松鼠</td>
    <td>三只松鼠</td>
    </tr>
<tr align="center">
    <td>009</td>
    <td><img src="../img/优衣库.png" width="60" height="50"></td>
    <td>优衣库</td>
    <td>优衣库</td>


</tr>
<tr align="center">
    <td>008</td>
    <td><img src="../img/小米.png" width="60" height="50"></td>
    <td>小米</td>
    <td>小米</td>



</tr>
</table>

</body>
</html>

rowspan是合并行单元格，colspan是合并列单元格

<table border="1" cellspacing="0" width="500" >
    <tr>

        <th colspan="2">品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>

    </tr >
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td rowspan="2">009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>


    </tr>
    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>




    </tr>


</table>

<table border="1" cellspacing="0" width="1000">
    <tr >
       <th colspan="2"> </th>
        <th >星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr align="center">
        <td rowspan="4">上午</td>
        <td>早自习</td>
        <td>英语</td>
        <td>语文</td>
        <td>英语</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr align="center">
        <td>第1节</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>

    </tr>
    <tr align="center">
        <td>第2节</td>
        <td>物理</td>
        <td>物理</td>
        <td>物理</td>
        <td>物理</td>
        <td>物理</td>
    </tr>
    <tr align="center">
        <td>第3节</td>
        <td>化学</td>
        <td>化学</td>
        <td>化学</td>
        <td>化学</td>
        <td>化学</td>
    </tr>
    <tr align="center">

        <td colspan="7">午休</td>
    </tr>
    <tr align="center">
        <td rowspan="3">下午</td>
        <td>第4节</td>
        <td>生物</td>
        <td>生物</td>
        <td>生物</td>
        <td>生物</td>
        <td>生物</td>
    </tr>
    <tr align="center">
        <td>第5节</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>

    </tr>
    <tr align="center">
        <td>第6节</td>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>


    </tr>

</table>

布局标签

标签	描述
	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
	用于组合行内元素

div是块标签，所有会换行，而span是组合行内元素，不会换行

06-表单标签

表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项：不同类型的input元素，下拉列表，文本域等

标签	描述
	定义表单
	定义表单项，通过type属性控制输入形式
	为表单项定义标注
	定义下拉列表
	定义下拉列表的列表项
	定义文本域

form：定义表单

action：规定当提交表单时向何处发送表单数据。URL
method：规定用于发送表单数据的方式

get：浏览器会将数据直接附在表单的action URL之后。大小有限制
post：浏览器会将数据放到http请求消息体中。大小无限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<!--
    form:
       action：指定表单数据提交的URL
       * 表单项数据要想被提交，则必须指定其name属性
       method：指定表单提交的方式
              1.get：默认值
                      *请求参数会拼接在URL后边
                      *url的长度无限制的
                2.post:
                      *请求参数会在http请求协议的请求体中
                      * 请求参数无限制的

        -->
        <form action="#" method="post">
            <input type="text" name="username">
            <input type="submit">

        </form>




</body>
</html>

07-表单项标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRsQXY2I-1640006557868)(https://cdn.jsdelivr.net/gh/1wenjinjie/picture/img/202112201953378.png)]

表单标签-表单项

：表单项，通过type属性控制输入形式
select：定义下拉列表，option 定义列表项
textarea：定义文本域

type取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

input中type的取值

<body>
<!--
    form:
        action：指定表单数据提交的URL
                    * 表单项数据要想被提交，则必须指定其name属性
       method：指定表单提交的方式
                1.get：默认值
                      *请求参数会拼接在URL后边
                      *url的长度无限制的
                2.post:
                      *请求参数会在http请求协议的请求体中
                      * 请求参数无限制的

        -->
        <form action="#" method="post">

           <input type="hidden" name="id" value="123">
            <label  for="username">用户名：</label>
            <input type="text" name="username" id="username"> <br>
            <label  for="password" >密码 ：</label>
            <input type="password" name="password" id="password"><br>

            性别：
            <input type="radio" name="gender" value="1" id="male">  <label for="male">男</label>
            <input type="radio"  name="gender"  value="2" id="female">       <label for="female">女  </label>
            <br>

            爱好：
            <input type="checkbox" name="hobby" value="1"> 旅游
            <input type="checkbox" name="hobby" value="2">电影
            <input type="checkbox" name="hobby" value="3">游戏
            <br>

            头像：
            <input type="file"><br>
            <br>
            <input type="submit" value="免费注册">
            <input type="reset" value="重置">
            <input type="button" value="一个按钮">

        </form>




</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<!--
    form:
        action：指定表单数据提交的URL
                    * 表单项数据要想被提交，则必须指定其name属性
       method：指定表单提交的方式
                1.get：默认值
                      *请求参数会拼接在URL后边
                      *url的长度无限制的
                2.post:
                      *请求参数会在http请求协议的请求体中
                      * 请求参数无限制的

        -->
        <form action="#" method="post">

           <input type="hidden" name="id" value="123">
            <label  for="username">用户名：</label>
            <input type="text" name="username" id="username"> <br>
            <label  for="password" >密码 ：</label>
            <input type="password" name="password" id="password"><br>

            性别：
            <input type="radio" name="gender" value="1" id="male">  <label for="male">男</label>
            <input type="radio"  name="gender"  value="2" id="female">       <label for="female">女  </label>
            <br>

            爱好：
            <input type="checkbox" name="hobby" value="1"> 旅游
            <input type="checkbox" name="hobby" value="2">电影
            <input type="checkbox" name="hobby" value="3">游戏
            <br>

            头像：
            <input type="file"><br>

            城市：
            <select>
                <option>北京</option>
                <option value="shanghai">上海</option>
                <option>武汉</option>

            </select>
            <br>
            个人描述：
            <textarea cols="20" rows="5"></textarea>
            <br>
            <input type="submit" value="免费注册">
            <input type="reset" value="重置">
            <input type="button" value="一个按钮">

        </form>




</body>
</html>

希望大家给个点赞，支持一下！！谢谢

码农公寓

目录