HTML了解和操作

最新推荐文章于 2022-02-15 13:43:01 发布

White.Magic

最新推荐文章于 2022-02-15 13:43:01 发布

阅读量86

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/weixin_44659258/article/details/104369802

版权

python 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

HTML

1. HTML介绍

HTML是Hyper Text Markup Language (超文本标记语言)的缩写
HTML不是一种编程语言，而是标记语言

2. HTML的语法

双标签:
<标签名></标签名>
单标签:
<标签名/>
3. 元素和属性
<标签名属性名=属性值>元素</标签名>
<标签名属性名=属性值/>
4. 主要结构：
1. < !DOCTYPE html> 文件为html文件
2. < html lang=“en”> 语言类型：英语
3. < head> 头标签
4. < body> 主体
5.< /html>

HTML常用标签：
1. title
2. 标题与段落
3. 水平线与换
4. 常见的转义符
5. 链接
6. 图片标签
7. 表格
8. 列表
9. 常见的无意义标签
10. 表单
11. < meta charset=“UTF-8”> #指定网站编码格式
title标签

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

</body>
</html>

标题与段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>

<p>段落标签p</p>
</body>
</html

水平线和换行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.水平线和换行符</title>
</head>
<body>
水平线：hr
<hr/>
换行符：br
<hr/>
csdn1
csdn2
<br/>
csdn3
</body>
</html>

常见的转义符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.常见的转义符</title>
</head>
<body>
    空格：&nbsp;
    大于号：&gt;
    小于号：&lt;
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.链接标签</title>
</head>
<body>
<!--
    a标签
        href:  超链接地址
        target="_self"   本窗口访问（默认）
        target="_blank"  新窗口访问
-->
<a href="//www.baidu.com">点击我，本窗口访问百度</a>
<a href="//wwww.baidu.com" target="_blank">点击我，新窗口访问百度</a>
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.img标签</title>
</head>
<body>
    <!--
        img标签：
            src     图片的地址
            alt     如果图片加载异常，显示的文字
    -->
    <img src="csdn.png" alt="如果图片加载失败，显示的文字">
    <img src="csdn.pngxxxx" alt="如果图片加载失败，显示的文字">

</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.表格标签</title>
</head>
<body>
    <!--
        table标签：
            border      边框
            width       宽度
            tr          行
            th          表头
            td          普通列
    -->
    <table border="lpx" width="300px">
        <tr>
            <th>表头th</th>
            <th>表头th</th>
        </tr>
        <tr>
            <td>普通列td</td>
            <td>普通列td</td>
        </tr>
    </table>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.列表标签</title>
</head>
<body>
    <!--
        ul  无序列表
        ol  有序列表
        li  列表项
    -->
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
    </ul>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
    </ol>
</body>
</html>

常见的无意义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.常见的无意义标签</title>
</head>
<body>
    <!--
        div     占用整行
        span    不占用整行，长度取决于每部元素的长度
    -->
    <div>div标签</div>
    <div>div标签</div>
    <span>span标签</span>
    <span>span标签</span>
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单标签</title>
</head>
<body>
    <!--
        form标签
            action      提交地址
            method      请求方式（get或post，默认get）
            enctype="multipart/form-data"   如果提交文件，需要添加这个参数
    -->
    <form action="#" method="post" enctype="multipart/form-data">
        
    </form>
</body>
</html>

表单输入框input标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单2输入框</title>
</head>
<body>
    <!--
        input标签
            1.文本框   type="test"
            2.密码框   type="password"
            3.单选框   type="radio"
            4.复选框   type="checkbox"
            5.文件筐   type="file"
            6.按钮     type="button"
            7.提交     type="submit"
            8.重置     type="reset"
    -->
    <form action="#" method="post" enctype="multipart/form-data">
        1.用户名（文本框text）:<input type="text" name="username">
        <hr/>
        2.密码（密码框password）:<input type="password" name="password" value="">
        <hr/>
        3.性别（单选框radio）:
            男<input type="radio" name="gender" value="0">
            女<input type="radio" name="gender" value="1">
        <hr/>
        4.爱好（复选框checkbox）:
            学Wed<input type="checkbox" name="hobby" value="wed">
            学爬虫<input type="checkbox" name="hobby" value="spider">
        <hr/>
        5.上传头像（文本框file）:
            <input type="file" name="img">
        <hr/>
        6.按钮（button）:
            <input type="button" value="空按钮">
        <hr/>
        7.提交（submit）:
            <input type="submit" value="提交按钮">
        <hr/>
        8.重置（reset）:
            <input type="reset" value="重置按钮">

            </input>
    </form>
</body>
</html>

下拉框和大文本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单3</title>
</head>
<body>
    <!--
        下拉框：select 和 option
        大文本：textarea
            cols    列数
            rows    行数
    -->
    <form action="#" method="post" enctype="multipart/form-data">
        <select name="year">
            <option value="2019">2019</option>
            <option value="2018">2018</option>
        </select>
        <textarea name="comment" cols="30" rows="10"></textarea>
    </form>
</body>
</html>

White.Magic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML了解和操作

HTML1. HTML介绍HTML是Hyper Text Markup Language (超文本标记语言)的缩写HTML不是一种编程语言，而是标记语言2. HTML的语法双标签:<标签名></标签名>单标签:<标签名/>3. 元素和属性<标签名属性名=属性值>元素</标签名><标签名属性名=属性值/&g...
复制链接

扫一扫