HTML

最新推荐文章于 2023-04-28 07:17:26 发布

都枯槐

最新推荐文章于 2023-04-28 07:17:26 发布

阅读量307

点赞数 1

分类专栏： node.js

本文链接：https://blog.csdn.net/qq_36883141/article/details/95086996

版权

node.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML(超文本标记语言)，它使用标签来定义文本的显示方式，简单来说HTML就是一种文本文件，里面的内容超出一般文本文件的表示，它是用来控制显示格式和对内容进行排版的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜鸡</title>         
</head>
<body>
    <p>西伯利亚大尾巴狼<p>
    <h1>小奶狗<h1>
    <div>
        <a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank">链接</a>
    </div>
    <div id="log"><img src='E:/blog/themes/gal/source/imgs/slide/background3.jpg' style="width: 70%">
    </div>
    </body>
</html>

在这里插入图片描述

<p>这是分段</p>
<h1>这是大标题</h1>

<p>中的p就是标签，且是开始标签，</p>是结束标签，开始、结束标签和内容组成完整的元素,

标签，它的作用范围是下一个和它层次对应的结束标签</p>

<a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank">链接</a>>

hre和target是标签的属性
<p/>空元素可以在开始标签中关闭，也可以<p></p>
在HTML中使用单独标签
标签名可以使用大小写，但是推荐小写
标签会被解析成一个有层次的DOM树，不要出现标签交错的现象。

HTML文档内容

文档声明：<! IDOCTYPE html>声明文档类型，这个是Html5的声明方式。
根标签：html标签是根标签
头部：head标签就是头部，一般写meta信息
正文：body标签才是游览器显示的正文部分

常用标签

链接

<a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank" onclick="alert('nonono')">链接</a>

href属性，指定链接
target属性，指定是否在本窗口打开。_blank就是指新窗口打开链接
onclick是点击事件，其中可以写一个js函数或脚本执行，很多HTML标签都支持很多事件属性，常见有onclick、ondblclick、onkeydown、onkeyup等
图片

<img src='E:/blog/themes/gal/source/imgs/slide/background3.jpg' style="width: 70%">

图片标签，src指定图片路径
标题
<h1>-<h6>，标题标签，默认h1字体最大，h6字体最小
图层

<div id="logo" class="logo"></div>

id属性，标签的唯一标识
class属性，样式表定位并附加样式
列表

无序列表

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

有序列表

<ol>
        <li>比特犬</li>
        <li>狸花猫</li>
</ol>

表格
HTML表格的基本解构：
<table>…</table> 定义表格
<th>…</th>：定义表格的标题栏
<tr>…</tr>：定义表格的行
</td>…</td>：定义表格的列

 <table border="1">
        <tr>
            <td>名字</td>
            <td>体型</td>
        </tr>
        <tr>
            <td>秋天犬</td>
            <td>小型犬</td>
        </tr>
        <tr>
            <td>狸花猫</td>
            <td>小型猫</td>
        </tr>
    </table>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="awm.js"></script>     
    <style>
        td {padding: 5px}
    </style>    
</head>


<body>
    
    <p>西伯利亚大尾巴狼<p>
    <h4>小奶狗<h4>
    <ul>
        <li>秋田犬</li>
        <li>中华田园猫</li>
    </ul>
    <ol>
        <li>比特犬</li>
        <li>狸花猫</li>
    </ol>
    <table border="1">
        <tr>
            <td>名字</td>
            <td>体型</td>
        </tr>
        <tr>
            <td>秋天犬</td>
            <td>小型犬</td>
        </tr>
        <tr>
            <td>狸花猫</td>
            <td>小型猫</td>
        </tr>
    </table>
    <div id="logo" class="logo"></div>
    <div>
        <a href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN" target="_blank" onclick="alert('nonono')">链接</a>
    </div>
    <form action="" method="POST",enctype="application/x-www-form-urlencoded">
        <table border="1" style="border-collapse:collapse">
            <tr>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" id="gender" checked value="M">男
                    <input type="radio" name="gender" id="gender" value="F">女
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="interest" id="interest" value="music"> 音乐
                    <input type="checkbox" name="interest" id="interest" value="movie"> 电影
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>
            </table>
        </form>
    <div id="log"><img src='E:/blog/themes/gal/source/imgs/slide/background3.jpg' style="width: 70%">
    </div>
    </body>
</html>

在这里插入图片描述
特别注意：
表单控件如果想要提交数据，必须使用name 属性，否则不能提交到服务端
form标签的重要属性

action，表单数据submit提交到那里
method，提交的方法，常用POST
enctype，对提交的数据编码
- application/x-www-form-urlencoded，在发送前编码所有字符
  - 空格转化为"+"加号，特殊符号转换为ASCII HEX值
- multipart/form-data，不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
- text/plain，空格转换为"+"加号，但不对特殊字符编码。

都枯槐

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML(超文本标记语言)，它使用标签来定义文本的显示方式，简单来说HTML就是一种文本文件，里面的内容超出一般文本文件的表示，它是用来控制显示格式和对内容进行排版的标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
复制链接

扫一扫

专栏目录