HTML

最新推荐文章于 2023-03-04 16:12:12 发布

鑫～仔

最新推荐文章于 2023-03-04 16:12:12 发布

阅读量105

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44800244/article/details/95353332

版权

HTML 专栏收录该内容

0 篇文章 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>Document</title>
</head>
<body>
    
</body>
</html>

HTML（超文本标记语言——HyperText Markup Language），它使用标签来定义文本的显示方式
简单来说，HTML就是一种文本文件，里面的内容超出一般文本文件表示，它是用来控制显示格式和对内容进行排版的
1997年W3C发布HTML 4.0
2014年发布HTML5

Tag标签

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

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

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

<a href="www.magedu.com" target="_blank">这是链接</a>

href和target是标签的属性

<p /> 空元素可以在开始标签中关闭，也可以 <p></p>

在HTML中使用单独标签，例如 <br><hr> <img> 等

标签名可以使用大小写，但是推荐使用小写

标签会被解析成一个有层次的DOM树，不要出现标签交错的现象，这是错误的，但是浏览器有容错能力，但是可能显示的格式就不对了

HTML文档结构

* 文档声明： <!DOCTYPE html> 声明文档类型，这是Html5的声明方式。早期的文档声明很长，规定了HTML遵从的规范，能自动检查错误等
* 根标签：html标签是根标签
* 头部：head标签不是就是头部，一般写meta信息，css、js。title是网页标题
    * <meta charset="utf-8"> 定义网页编码格式为utf-8。浏览器会按照这个编码显示字符
* 正文：body标签才是浏览器显示的正文部分

常用标签

链接

<a href="www.magedu.com" target="_blank" onclick="alert('anchor')">这是链接</a>

href属性，指定链接

target属性，指定是否在本窗口中打开。_blank就是指新窗口打开链接

onclick是点击事件，其中可以写一个js函数或脚本执行。很多HTML标签都支持很多事件属性，常见有onclick、ondblclick、onkeydown、onkeyup、onkeypress、onmousedown、onmousemove、onmouseover、onsubmit、onchange等等

图片

<img src="http://www.magedu.com/wp-content/uploads/2017/09/logo.png">

图片标签，src指定图片路径

标题

<h1>-<h6> ，标题标签，默认h1字体最大，h6字体最小

列表

无序列表

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

有序列表

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

表格

HTML 表格的基本结构：

 <table>…</table>：定义表格  
 <th>…</th>：定义表格的标题栏（文字加粗）  
 <tr>…</tr>：定义表格的行  
 <td>…</td>：定义表格的列

不过th现在用的少了，表格表头是否字体加粗，都用css控制。所以表中有tr表示行，td表示格子

<table border="1">
    <tr>
        <td>1,1</td>
        <td>1,2</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
    </tr>
    <tr>
        <td colspan="2">占2列</td>
    </tr>
</table>

表单

<!DOCTYPE html>
<html>

<head>
    <title>刀锋</title>
    <meta charset="utf-8">
</head>

<body>
    <form>
        <table border="1">
        <tr>
            <td>序号</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>用户名</td>
            <td><input type="text" value="content"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input name='gender' type="radio" checked value="M">男<input name='gender' type="radio" value="F">女</td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                <input type="checkbox" checked value="music">
                <input type="checkbox" checked value="movie">
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交"> <input type="reset" value="重 置"></td>
            </tr>
        </table>
    </form>
</body>

</html>

特别注意: 表单控件如果要提交数据，必须使用name属性，否则不能提交到服务端

form标签的重要属性

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