HTML基础笔记

最新推荐文章于 2024-10-17 09:40:47 发布

kkkk️

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量924

点赞数 35

文章标签：前端

本文链接：https://blog.csdn.net/m0_58533479/article/details/141156028

版权

<a id="section1"></a>
<h2>Section 1</h2>
<p>Content of section 1...</p>

HTML （Hyper Text Markup Language（超文本标记语言）)

W3C标准

World Wide Web Consortium（万维网联盟）成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构

W3C标准包括

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

HTML基本结构

<body>、</body>等成对的标签，分别叫开放标签和闭合标签

单独呈现的标签（空元素），如<hr/>；意为用 / 来关闭元素

<!--DOCTYPE: 告诉浏览器，我们要使用的是什么规范 -->
<!DOCTYPE html>

<html lang="en">
<!--head标签代表网页的头部-->
    <head>
        <!--meta描述性标签，它用来描述网站的一些信息-->
        <!--meta一般用来做SEO（是透过一系列的技术和策略，让你的网站更容易被搜寻引擎（如 Google、Bing）收录，并且在搜寻结果中排名靠前。）-->
        <meta charset="UTF-8">
        <meta name="hy" content="Hello">
        <meta name="description" content="欢迎来到我的网站">
        <!--title网页标题-->
        <title>我的第一个网页</title>
    </head>
    <!--body标签代表网页的主体-->
    <body>
        <h1>Hello world</h1>
    </body>
</html>

网页的基本标签

标题标签 h1~h6

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>无级标签</h5>
<h6>六级标签</h6>

段落标签 <p></p>

<!--段落标签-->
<p>这是一个段落标签</p>
<p>这是一个段落标签</p>
<p>这是一个段落标签</p>
<p>这是一个段落标签</p>

换行标签 <br/>

<!--换行标签-->
<p>这是一个段落标签</p><br/>

水平线标签 <hr/>

<!--  水平线标签  -->
<p>这是一个水平线标签</p>
<hr/>
<p>这是一个水平线标签</p>

字体样式标签

<!-- 粗体 斜体-->
<strong>粗体</strong>
<em>斜体</em>

注释和特殊符号

<!-- 特殊符号-->
空格符号：空&nbsp;格
</br>
大于符号：&gt;
<br/>
小于符号：&lt;
<br/>
版权符号：&copy;

常见的图像格式

JPG、GIF、PNG、BMP

相对地址（推荐使用）

绝对地址

alt：图片名字（必须）

链接标签

超链接

href：必填，表示要跳转到哪个页面

target：表示窗口在哪里打开

_blank 表示在新的窗口打开
_self 表示在当前窗口打开（默认值）

文本超链接

图像超链接

锚链接

需要一个锚标记（锚点）在页面的目标位置（一定是页面中的某个元素）处添加一个具有唯一标识符的锚点。

<a id="section1"></a>
<h2>Section 1</h2>
<p>Content of section 1...</p>

跳转到标记在页面的其他位置添加指向锚点的超链接，以便用户点击后跳转到锚点位置。

<a href="#section1">Jump to Section 1</a>

功能性链接

邮件链接：mailto：

<a href="mailto：xxxxxx@qq.com"></a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行（p、h1~h6...）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行（a、srtong、em...）

列表

概念

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表分类

无序列表

 <ul>
     <li>Java</li>
     <li>Web前端</li>
</ul>

有序列表

<ol>
    <li>Java</li>
    <li>Web前端</li>
</ol>

自定义列表

<!--  自定义列表
  dl：标签
  dt：列表名称
  dd：列表内容
  -->
    <dl>
        <dt>学科</dt>

        <dd>Java</dd>
        <dd>Web前端</dd>
    </dl>

表格

简单通用、结构稳定

基本结构

单元格
行
列
跨行
跨列

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小红</td>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>数学</td>
        <td>98</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>87</td>
    </tr>
</table>

视频和音频

视频元素：video

<!--src：视频资源路径  controls ：控制视频播放  autoplay：自动播放-->
    <video src="" controls autoplay></video>

音频元素：audio

<!--src：音频资源路径  controls ：控制音频播放  autoplay：自动播放-->
    <audio src="" controls autoplay></audio>

页面结构分析

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

iframe内联框架

<!--path：引用页面地址   mainFrame：框架标识名-->
    <iframe src="www.baidu.com" name="mainFrame"></iframe>
    
    <a href="mainFrame">点击跳转</a>

表单语法

action：表单提交的的位置，可以是网址，也可以是一个请求处理地址
method：表单提交的方式，get：get方式提交，post：post方式提交

get 方式提交：可以在url中看到提交的信息，不安全，但是高效

post方式提交：比较安全，可以传输大文件

<!--
 action：表单提交的的位置，可以是网址，也可以是一个请求处理地址
 method：表单提交的方式，get：get方式提交，post：post方式提交
   -->
    <form action="表单提交的位置" method="post">
        <p><input type="text" name="username" placeholder="请输入用户名"/></p>
        <p><input type="password" name="password" placeholder="请输入密码"/></p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Button" value="重置"/>
    </form>

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkboc时，指定按钮是否被选中

单选框 radio

<!--  
    单选框
    input type="radio" 
    value：单选框的值
    name：表示组 
  -->
    <p>
        性别：
        <input type="radio" name="sex" value="男" checked/>男
        <input type="radio" name="sex" value="女"/>女
    </p>

多选框 checkbox

<!-- 多选框
    input type="checkbox"
-->
<p>
    爱好：
    <input type="checkbox" name="like" value="篮球"/>篮球
    <input type="checkbox" name="like" value="敲代码"/>敲代码
    <input type="checkbox" name="like" value="睡觉"/>睡觉
    <!-- checked 默认选中 -->
    <input type="checkbox" name="like" value="游戏" checked/>游戏
</p>

按钮

<!-- 按钮
    input type="button" 普通按钮
    input type="image" 图片按钮
    input type="submit" 提交按钮
    input type="reset" 重置按钮
   -->
    <p>
        <input type="button" name="btn1" value="按钮"/>
        <input type="image" src="图片路径"/>
        <input type="submit" name="btn2" value="提交"/>
        <input type="reset" name="btn3" value="重置"/>
    </p>

下拉框

     <p>国家：
        <select name="列表名称">
            <!-- selected 默认选中 -->
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>

文本域

    <p>文本域：
        <textarea name="text"  cols="30" rows="10">文本内容</textarea>
    </p>

文件域

    <p>
        <!-- 文件域 -->
        <input type="file" name="files">
        <input type="submit" name="btn4" value="提交"/>
    </p>

搜索框滑块和简单验证

<!-- 邮箱验证 -->
    <p>
        <input type="email" name="email"/>
    </p>
    <!-- URl -->
    <p>
        <input type="url" name="url"/>
    </p>
    <!-- 数字 -->
    <p>商品数量：
        <input type="number" name="num" min="0" max="100" step="1"/>
    </p>    
<!--  滑块  -->
    <p>音量：
        <input type="range" name="range" min="0" max="100" step="1"/>
    </p>
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

表单的应用

隐藏域：hidden

 <p>name:<input type="text" name="username" value="admin" hidden="hidden"/></p>

只读：readonly

<p>id:<input type="text" name="username" value="admin" readonly/></p>

禁用：disabled

性别：<input type="radio" name="sex" value="男" disabled/>男

增强鼠标可用性

    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>

表单初级验证

常用方式：

placeholder：提示信息

<p>name:<input type="text" name="username"  placeholder="请输入用户名"/></p>

required：非空判断

<p>name:<input type="text" name="username"  placeholder="请输入用户名" required/></p>

pattern：正则表达式

    <p>
        <input type="text" name="email" pattern="[a-zA-Z0-9_]+@[a-zA-Z0-9_]+.com">
    </p>