HTML

flash20230513

已于 2024-08-14 22:15:39 修改

阅读量871

点赞数 14

文章标签： html5

于 2023-11-22 21:41:40 首次发布

本文链接：https://blog.csdn.net/h_e_l_l_o_______/article/details/134563050

版权

W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

基础结构

<!DOCTYPE html><!--声明为html5-->
<html lang="en"><!--声明语言-->
<html>
<head>
    <!--设置编码方式-->
    <meta charset="UTF-8">
    <!--移动端设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>base</title>
    <!--引入外部资源-->
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/main.js"></script>
</head>
<body>
<!--内容区-->
<form></form>
<!--脚本区-->
<script></script>
</body>
</html>

标题标签 <h1> - <h6>
<p>段落标签</p>
换行标签 <br/>
<b></b>加粗<strong></strong>
<em></em>倾斜<i></i>
<del></del>删除线<s></s>
<ins></ins>下划线<u></u>
<div> 标签用来布局，一行只能放一个<div>。 大盒子 
<span> 标签用来布局，一行上可以多个 <span>。小盒子

img

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
alt替换文本。图像不能显示时看到的文字
title提示文本。鼠标悬停显示的文字
width宽度
height高度
border边框粗细

超链接

<a href="跳转目标" target="目标窗口的弹出方式，_self（默认，当前窗口），_blank（新窗口）。"> 文本或图像 </a>
外部链接：http:// www.baidu.com
内部链接：index.html
空链接<a href="#">
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
锚点链接:  快速定位<a href="#id1"><h1 id="id1">

特殊字符

空格" "：&nbsp;
大于>：&lt;
小于<：&gt;
与&：&amp;

table

属性
align="center" 对齐方式
border="" 边框
cellspacing="0" 单元格到内容之间的像素距离
cellpadding="0" 单元格之间的像素距离
width="100%" 宽度
结构
<table>
    <thead><!--表格的头部-->
        <tr>
            <th>1</th><!--加粗居中-->
        </tr>
    </thead>
    <tbody><!--表格的主体-->
    <tr>
        <td></td>
    </tr>
    </tbody>
</table>

合并单元格

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
// 删除多余的单元格

列表

无序列表

<ul> <!--只能嵌套 <li></li>-->
<li></li> <!--可以容纳所有元素-->
</ul>

有序列表

<ol> <!--只能嵌套 <li></li>-->
<li></li> <!--可以容纳所有元素-->
</ol>

自定义列表

<dl> 
<dt>dt1</dt> 
<dd>dd1</dd> 
<dd>dd2</dd> 
</dl>

表单

<form action="提交地址" method="get或post" name="表单域名称"></form>

input

// 属性
value 是表单元素都有的属性值,设置元素默认值. 
name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值. 
checked 属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素. 
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用
// 类型
button 定义可点击按钮(多数情况下，用于通过JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和"浏览"按钮，供文件上传。
hidden 走义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20个字符。

label
聚焦到目标元素

<label for="id1"></label>
<div id="id1"/>

select

<select>
    <option>默认选择第一个</option>
    <option selected="selected">selected 属性设置默认选中项</option>
</select>

textarea
多行文本

<textarea rows="显示的行数" cols="每行中的字符数"></textarea>

块级标签：独占一行

<div>div</div>
<p>段落一</p>
<h1>一级标题</h1>
<h6>六级标题</h6>
<ol>有序列表
    <li>项目一</li>
    <li>项目二</li>
</ol>
<ul>无序列表
    <li>项目一</li>
    <li>项目二</li>
</ul>
<dl>自定义列表
    <dt>列表一</dt>
    <dd>dd1</dd>
    <dd>dd2</dd>
    <dt>列表二</dt>
    <dd>dd3</dd>
    <dd>dd4</dd>
</dl>

行内标签：不能独占一行，不能设置宽高属性

<a href="http://www.baidu.com">百度</a>
<span>span1</span>
<strong>strong1</strong>

行内块级标签：不能独占一行，可以设置宽高属性

<br/>
<imgsrc="../img/demo.jpg" height="108" width="192"/>
<input>

块级标签与行内标签转换

<div style="display: inline">块级转行内</div>
<span style="display: block">行内转块级</span>

表单标签

<form action="" method="post"/>
    <input type="password"/>
    <input type="submit"/>
    <input type="button"/>
    <input type="date"/>
    <input type="reset"/>
    <input type="checkbox"/>
    <input type="radio"/>
    <select>
        <option></option>
    </select>
</form>

新表单标签

<form id="form2">
	<input type="email"/>
	<input type="url"/>
	<input type="number" value="0" step="10"/>
	<input type="range"/>
	<input type="datetime-local"/>
	<input type="search"/>
	<input type="color"/>
	<input type="text" placeholder="姓名"/>
	<input type="submit" form="form2"></button>
</form>

表格标签

<table border="1px" cellspacing="0px" cellpadding="10px">
    <tr>
        <td>td1</td>
        <td>td2</td>
    </tr>
    <tr>
        <td colspan="2">td3</td>
    </tr>
</table>

多媒体标签

<!--音频-->
<audio controls>
	<source src="../static/demo.mp4">
</audio>
<!--视频-->
<video muted controls style="width: 500px;height: 300px;">
	<source src="../static/demo.mp4">
</video>