html入门-1

最新推荐文章于 2024-09-30 14:01:51 发布

程序员zhi路

最新推荐文章于 2024-09-30 14:01:51 发布

阅读量53

点赞数

分类专栏： JAVAWEB入门文章标签： html servlet 前端

本文链接：https://blog.csdn.net/qq_53280238/article/details/130219459

版权

JAVAWEB入门专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

javaweb
	html
	css
	javascript
	jquery-> bootstrap、layui、easyui
	tomcat
		常用配置
		虚拟主机
		虚拟目录
		手写简易版tomcat
	servlet
		http请求
		http响应
		作用域
	监听器
	过滤器
	jsp
	ajax+json+跨域 实现前后端分离
	jwt token
	redis
	docker 容器介绍
	阶段项目

html的介绍

html全称 (Hyper Text Markup Language) 超文本标记语言，不算是编程语言

html是用来描述网页的一种标记语言

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

世界上五大浏览器：谷歌，ie/edge，苹果，火狐，欧鹏

html的标准结构

html5

<!-- 注释 标识当前的html为html5的版本 当前页面就可以添加html5的标签-->
<!DOCTYPE html>
<!--根节点-->
<html>
    <!--头-->
    <head>
        <!--指定当前html的编码，浏览器会以指定的编码解析html-->
    	<meta charset="utf-8"/>
        <title>页面标题</title>
    </head>
    <!--页面的内容-->
    <body>
        <!--网页的内容都应该出现在这儿-->
    </body>
</html>

html4

<!-- 注释 标识当前的html为html4的版本 当前页面就可以添加html4的标签-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!--根节点-->
<html>
    <!--头-->
    <head>
        <!--指定当前html的编码，浏览器会以指定的编码解析html-->
    	<meta charset="utf-8"/>
        <title>页面标题</title>
    </head>
    <!--页面的内容-->
    <body>
        <!--网页的内容都应该出现在这儿-->
    </body>
</html>

需要注意的是，html4的网页中不支持html5新增的标签

html的常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个是title</title>
</head>
<!--
    background 背景图片
        路径
        相对路径 从当前位置开始去找对应的文件  ../ 上一级  /进入某一个文件夹
        绝对路径
    bgcolor 背景颜色
        #ff1493
        在html中描述颜色有三种办法
        颜色名  deeppink
        十进制描述法 rgb(r,g,b) 每一个数字的取值范围是0-255
        十六进制描述法 #rrggbb  每一位上都是十六进制的数字 0-f
        #000000  #ffffff #ff0000  #00ff00 #0000ff
-->
<body bgcolor="#ffffff">
    <a name="top"></a>
    <!--标题标签
        h1 - h6 数字越大文字越小
        自动换行下来的标签称为块级(block)标签 默认宽占满 自动换行 可以设置宽高
    -->
    <h2 align="center">春晓</h2>
    <!--段落标签-->
    <p align="center">春眠不觉晓</p>
    <p align="center">处处闻啼鸟</p>
    <p align="center">夜来风雨声</p>
    <p align="center">花落知多少</p>

    <!--图片标签
        px 像素
        如果只设置宽高一个，另一个会等比例缩放
        alt 图片未正常显示的时候 显示的内容
        title 基本所有的标签都有的属性 鼠标放上去显示的内容
        行内块级(inline-block) 可以设置宽高 不会自动换行
    -->
    <img src="../images/timg.jpg" title="这是一个图片" width="100px" height="600px" alt="这是一个图片">
    <!--显示文字
        行内标签(inline) 不可设置宽高 不会自动换行  大小根据内容自动适配
    -->
    <span>啊啊啊啊啊</span>
    <!--超链接
        href 表示跳转的地址
        target 表示打开方式 _blank 新页面打开 _self 当前页面打开

        锚 #  https://www.baidu.com#top 去指定页面的指定位置

        发送邮件   mailto:123@qq.com
    -->
    <a href="https://www.baidu.com" target="_blank">去百度</a>
    <a href="mailto:123@qq.com">联系我们</a>
    <a href="https://www.baidu.com#top" target="_blank">去顶部</a>

    <!--列表
        有序列表  ol
        无序列表  ul
        两个都是块级元素 li也是块级元素
    -->
    <!--无序列表
        type
            desc 小圆点  默认
            square 小方块
            circle 空心小圆点
    -->
    <ul type="circle">
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
    </ul>

    <!--有序列表
        type
            1 阿拉伯数字
            a
            A
            i 罗马数字
            I
        start 从多少开始
    -->
    <ol type="a" start="5">
        <li>1111111111</li>
        <li>1111111111</li>
        <li>1111111111</li>
        <li>1111111111</li>
        <li>1111111111</li>
        <li>1111111111</li>
        <li>1111111111</li>
        <li>1111111111</li>
    </ol>

    <!--表格
        table 表格
        tr 行
        th 表头
        td 行里面的列


        border="1" 边框
        cellspacing 每个格子之间的间距
        cellpadding 边框和内容之间的间距
        borderColor 边框颜色

        合并单元格
        colspan 占多少列的宽度
        rowspan 占多少行的高度
    -->

    <table align="center" border="1" borderColor="red" cellspacing="0" cellpadding="10">
        <tr>
            <th colspan="2" rowspan="2">1-1</th>

            <th>1-3</th>
            <th>1-4</th>
            <th>1-5</th>
        </tr>
        <tr>

            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
        </tr>
        <tr>
            <td colspan="2" align="center">2-1</td>

            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
        </tr>
        <tr>

            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
        </tr>
    </table>

    <!--表单
        form
        action 数据提交到哪里去
        method 以什么方式提交数据 get post
    -->
    <form action="https://www.baidu.com" method="get">
        <!--单行输入框-->
        <label for="a">账号:</label> <input type="text" id="a" name="username"><br>
        <!--密码框-->
        <label for="b">密码:</label> <input type="password" id="b" name="password"><br>
        <label for="">性别:</label> <input type="radio" name="sex" value="男" checked="checked"> 男<input type="radio" name="sex" value="女">女
        <br>
        <label for="">爱好:</label>
        <input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="篮球">篮球
        <br>
        <label for="">地址:</label>
        <select name="address" id="">
            <option value="cd">成都</option>
            <option value="sh" selected="selected">魔都</option>
            <option value="cq">雾都</option>
            <option value="yd">妖都</option>
            <option value="dg">性都</option>
            <option value="bj">帝都</option>
        </select>
        <br>
        <!--文件选择器-->
        <label for="">头像:</label><input type="file" name="photo" multiple="multiple">
        <!--隐藏域-->
        <input type="hidden" name="a" value="b">
        <br>
        <label for="">个人介绍:</label>
        <!--文本域-->
        <textarea name=""  cols="30" rows="10"></textarea>
        <br>
        <!--提交按钮-->
        <input type="submit" value="注册">
        <!--重置按钮-->
        <input type="reset" value="重置">

        <input type="button" value="普通按钮">
        <!--html5新增-->
        <input type="color">
        <input type="range">
        <input type="number">
        <input type="email">
        <input type="date">
        <input type="datetime-local">
        <input type="time">

    </form>
    画布
    <canvas></canvas>

    内联框架 显示其他网页到自己的网页中
    <iframe src="https://www.baidu.com" frameborder="0"></iframe>
    <iframe allowtransparency="true" frameborder="0" width="385" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&w=385&h=96&align=center"></iframe>

</body>
</html>

html字符实体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlYOGQbD-1681794997453)(html.assets/image-20220317162942968.png)]

me allowtransparency=“true” frameborder=“0” width=“385” height=“96” scrolling=“no” src=“//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&w=385&h=96&align=center”>

```