HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

欢乐的每一天

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量76

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/a3026836480/article/details/108553382

版权

笔记专栏收录该内容

37 篇文章 1 订阅

订阅专栏

W3C标准包括结构化标准语言(HTML、XML)，表现标准语言(CSS)，行为标准(DOM、ECMAScript)

html网页基本结构及常用标签

<!--DOCTYPE 描述使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
    <!--meta 描述网页信息-->
    <meta charset="UTF-8">
    <!--title 网页标题-->
    <title>Title</title>
</head>
<!--body 网页主体-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>hello world</p>
<p>happy</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
test<br/>
test1<br/>
<!--字体标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号-->
空格 &nbsp;<br>
&gt;<br>
&lt;<br>
&copy;<br>
<!--图像标签
src图片地址，相对地址，绝对地址
../  上一级目录
alt 图片不能加载时显示
 -->
<img src="1.jpg" alt="desc" title="悬停文字"><br>
<!-- a href 要跳转到哪个网页
  target 窗口在哪里打开
  _blank 在新标签中打开
  _self 在当前网页打开-->
<a href="www.baidu.com" target="_blank">跳转</a><br>
<a href="www.baidu.com" target="_blank">
    <img src="1.jpg" alt="desc">
</a><br>


<!--锚链接
 需要一个锚标记 name属性
 跳转到标记 #name属性-->
<a href="#top">回到顶部</a><br>
<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:1234@qq.com">邮箱</a><br>
<!--有序列表-->
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>
<!--无序列表-->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>
<!--自定义列表
dl 标签
dt 列表名
dd 列表项
-->
<dl>
    <dt>测试</dt>
    <dd>列表项1</dd>
    <dd>列表项2</dd>
</dl>
<!--table表格
tr 行 rowspan设置表格占几行
td 列 colspan设置表格占几列
border设置表边框宽度-->
<table border="1px">
    <tr><td colspan="1">1</td><td rowspan="1">2</td></tr>
    <tr><td>3</td><td>4</td></tr>
</table>

<!--音频和视频
src资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../1.mp4" controls></video>
<audio src="../caihua.mp3" controls></audio>

<!--内联框架
src 引用页面地址，name 框架标识名
-->
<iframe src="" name=""></iframe>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post,get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post：比较安全，传输大文件-->
<form action="main.html">
<!--    文本输入框input type="text"
value 默认初始值
maxlength 最长能写几个字符
size="20" 文本框的长度-->
    <p><input type="text" name="username" size="50"></p>
    <p><input type="password" name="pwd"></p>
    <!--    单选框标签input type="radio"
         value: 单选框的值
         name: 标识组 -->
    <p>性别<input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女</p>
<!--    多选框
        input type="checkbox"-->
    <p>爱好：<input type="checkbox" value="run" name="hobby">跑步
    <input type="checkbox" value="game" name="hobby">打游戏</p>
<!--    按钮-->
    <input type="button" name="btn" value="test">
    <p><input type="submit"><input type="reset"></p>
    <input type="image" src="../test.png">

<!--    文件域-->
    <p>
        <input type="file" name="files">
    </p>

<!--    下拉框，列表 selected默认选中-->
    <p>下拉框
        <select name="列表名称">
            <option value="选项值" selected>中国</option>
            <option value="选项值">美国</option>
        </select>
    </p>
    <p>
    
<!--        文本框-->
        <textarea name="text" cols="50" rows="10">文本内容</textarea>
    </p>
<!--    邮箱验证-->
    <p>邮箱<input type="email"  name="email"></p>
<!--    URL-->
    <p>
        <input type="url" name="url">
    </p>
<!--    数字 step 增长步长-->
    <p><input type="number" name="num" max="100" min="0" step="10"></p>
<!--    滑块-->
    <p><input type="range" min="0" max="100"></p>
<!--    搜索框-->
    <p>搜索<input type="search" name="search"></p>
<!--    增强鼠标可用性-->
    <p><label for>点击试试</label>
    <input type="text"></p>
</body>
</html>

块元素：无论内容多少，该元素独占一行
(p, h1~h6,…)
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
(a, strong, em,…)
页面结构分析

元素名	描述
header	标记头部区域的部分，用于页面或页面中的一块区域
footer	标记脚部区域的内容，用于页面或页面中的一块区域
section	web页面中的一块独立区域
article	独立的文章内容
aside	相关的文章或内容，常用于侧边栏
nav	导航类辅助内容