HTML笔记——hyper text markup language

发布于：2023-01-04 ⋅ 阅读:(570) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

HTML笔记——hyper text markup language

（ 超文本标记语言）超文本包括：文字、图片、音频、视频、动画等

IDEA官网下载

Desktop Screenshot 2022.08.26 - 20.18.01.98 (2)

image-20220827074539615

指定浏览器

image-20220827075115807

image-20220827075737514

image-20220827080057668

<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="关键词">
    <meta name="description" content="描述信息">

    <!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主题-->
<body>
今天是2022年8月27日星期六
</body>
</html>

注释快捷键Ctrl+/

P按住Tab生成段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--水平线标签-->
<hr/>

<!--段落标签-->
<p> 一段</p>
<p> 二段 </p>
<p> 三段 </p>
<p> 四段 </p>

<!--换行标签-->
换行标签<br/>
换行标签换行标签换行标签<br/>
换行标签<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：   <strong>i love you</strong>
斜体：   <em>i love you</em>
<br/>
<!--特殊符号-->
空   格：
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
<!--
特殊符号记忆方式
&   ;
-->
&g
</body>
</html>

Tab自动闭合补齐Ctrl+C复制Ctrl+D粘贴光标段Ctrl+V复制所选

image-20220827174945906

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址（必填）
 相对地址，绝对地址
 ../  --上一级目录

alt:图片名字（必填）

-->

<img src="resources/image/1.jpg"  alt="图片名称" title="悬停文字" width="400" height="400">

</body>
</html>

image-20220827205426090

链接标签

image-20220827205819374

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签学习
href :必填，表示要跳转到那个页面
target :表示窗口在哪里打开
    _blank   在新标签中打开
    _self   在自己的网页中打开
-->
<a href="跳转网页地址">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_blank " >点击我跳转到百度</a>

<!--锚链接
1.需要一个锚标记 
2.跳转到标记    跳转名称前加#，和markdown语法一样
-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接 ：mailto;
QQ链接   ：百度QQ推广
-->
<a href="mailto:308679108@11.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=308679108&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:308679108:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

</body>
</html>

反复复习理解a标签

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围 ：试卷，问答...
orderlist简称ol大标签，小标签li;Tab自动补全
-->
<ol>
  <li>Java</li>
  <li>python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/c++</li>
</ol>
<hr/>
<!--无序列表
应用范围： 导航， 侧边栏
-->
<ul>
  <li>Java</li>
  <li>python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/c++</li>
</ul>
<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
公司网站底部
-->
<dl>
  
  <dt>学科</dt>
  <dd>Java</dd>
  <dd>python</dd>
  <dd>linux</dd>
  <dd>C</dd>
  
  <dt>位置</dt>
  <dd>西安</dd>
  <dd>重庆</dd>
  <dd>四川</dd>
</dl>

</body>
</html>

image-20220828134812307

列表标签总结：orderlist简称ol大标签，小标签li,无序列表ul,自定义dl,dt列表名称，dd列表内容。Tab自动补全！

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr       table rows
列 dr
border="1px"   边框1个像素

-->
<table border="1px">
  <tr>
<!--colspan 跨列-->
    <td colspan="4">1-1</td>

  <tr/>
  <tr>
<!--rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    
  </tr>
  
</table>

</body>
</html>

表格标签总结：table表格，tr行，dr列，border边框，colspan跨列,rowspan跨行

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src: 资源路径
controls: 控制条
autoplay： 自动播放

-->

<video src="../resources/video/111.mp4" controls autoplay ></video>

<audio src="http://localhost:63342/HTML/resources/audio/mp3.mp3?_ijt=6arlj2g66nf6o6sa25brc015h2&_ij_reload=RELOAD_ON_SAVE" controls autoplay></audio>

</body>
</html>

src: 资源路径
controls: 控制条
autoplay： 自动播放

第二种路径可以先用浏览器打开本地文件后转换播放路径

image-20220828182301113

image-20220828182626552

页面结构分析

image-20220829013217186

header头,footer脚,section区,article文,aside边,nav导

内链框架

image-20220829142748418

image-20220829142450912

a,tab自动补全a标签=

image-20220829143742597

表单语法

image-20220829170155782

image-20220829172918224

tab向后缩进，shift+tab向前缩进

image-20220829174900257

表单元素格式

image-20220829175144888

image-20220829180941655

image-20220830110750213

image-20220830112458278

image-20220830114202739

image-20220830114348775

image-20220830114734648

image-20220830115558022

image-20220830120146699

placeholder提示信息

image-20220830120411630

image-20220830120752528

image-20220830120832293

image-20220830120949015

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form

action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post,get, 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post: 比较安全，传输大文件
-->

<form action="第一个网页.html" method="get">
    <!--文本输入框 ：input type="text"
     value="我好厉害"   默认初始值
     maxlength="8"    最长能写几个字符
     size="30"        文本框的长度
     -->
    
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required> </p>

    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" hidden value="123456"> </p>

    <!--单选框标签
    input type="radio"
    value ；单选框的值
    name ； 表示组
    -->
    <p>性别：
    <input type="radio" value="man" name="sex" checked disabled/>男
    <input type="radio" value="women" name="sex"/>女
    </p>
  
    <!--多选框
    input type="checkbox"
    -->
    
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/image/1.jpg">
    </p>
    
    <!--下拉框，列表框
    -->
   <p>国家 ：
       <select name="列表名称" >
           <option value="china">中国</option>
           <option value="usa">美国</option>
           <option value="japan" selected>日本</option>
           <option value="korea">韩国</option>
       </select>
   </p>
    <!--文本域
    text area : 文本区域
    
    -->
    <p>反馈：
        <textarea name="textarea"  cols="90" rows="10"></textarea>
    </p>
    
    <!--文件域
    input type="file"   name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    
    <!--邮件验证-->
    <p> 邮箱：
        <input type="email" name="email">
    </p>
    
    <!--URL-->
    <p> URL：
        <input type="url" name="url">
    </p>
    
    <!--数字-->
    <p> 数字：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
    
    <!--滑块
    input type="range"
    -->
    <p>音量 :
        <input type="range" name="voice" min="0" max="100">
    </p>
    
    <!--搜索框-->
    <p>搜索 :
        <input type="search" name="search" >
    </p>
    
    <p>
        <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
    
    <p>自定义邮箱:
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
    
    <p>
    <input type="submit">
    <input type="reset" value="清空表单">
    </p>

</form>
</body>
</html>

正则表达式速查表_脚本之家 (jb51.net)

自定义邮箱pattern

HTML总结

HTML总结

【【狂神说Java】HTML5完整教学通俗易懂】 https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web&vd_source=0e96973c49dcca902daad2367a6fd072

net)](https://www.jb51.net/tools/regexsc.htm)

自定义邮箱pattern

HTML总结

[外链图片转存中…(img-q36wht9G-1661844318653)]

【【狂神说Java】HTML5完整教学通俗易懂】 https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web&vd_source=0e96973c49dcca902daad2367a6fd072

跟着视频里记

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布