HTML入门笔记

1.第一个HTML网页

<!-- DOCTYPE: 告诉浏览器使用的什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head：网页头部-->
<head>
    <!--meta：描述性标签，用来描述我们网站的一些信息，一般用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="鱼小；生命不息，bug不止">
    <meta name="description" content="来这个地方啥也学不到">
    <!--title：网页标题-->
    <title>鱼小</title>
</head>
<body>
        hello world!
</body>
</html>

效果如图：


hello.png

2.网页基本标签

1.标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
...

2.段落标签

使用<p></p>
<p>html基础教程</p>
<p>段落标签测试</p>

3.换行标签

使用<br/>，单标签
html基础教程<br/>
换行标签测试<br/>

4.水平线标签

<hr/>

5.字体样式标签

粗体：<strong>html基础教程</strong>
斜体：<em>html基础教程</em>

6.特殊符号

空格:html&nbsp;&nbsp;&nbsp;教程
<br/>
大于：&gt;
小于：&lt

7.注释

<!--注释-->

8.基础标签总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

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

<!--段落标签-->
<p>html基础教程</p>
<p>段落标签测试</p>

<!--换行标签-->
html基础教程<br/>
换行标签测试<br/>

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

<!--字体标签-->
<strong>html基础教程</strong>
<br/>
<em>html基础教程</em>

<!--注释-->

<br/>
<!--特殊符号-->
空格:html&nbsp;&nbsp;&nbsp;教程
<br/>
大于：&gt;
<br/>
小于：&lt

</body>
</html>
基础标签.png

3.图片标签

标签：<img src="" alt="">
1.src : 图片地址
相对地址（推荐）;绝对地址
相对地址 : ../ 上一级目录
2.alt : 图像替代文字
选填:
1.title : 鼠标悬停文字
2.width : 宽度
3.height : 高度
例：<img src="../resources/image/1.jpeg" alt="鱼小头像" title="鱼小头像">

4.链接标签

标签：<a><a/>
<a href=""></a>
href : 必填，表示跳转的页面
target : 窗口在哪里打开
       _blank : 在新标签中打开
       _self : 在自己的网页中打开
<a href="path" target="目标窗口位置">链接文本或图像</a>
例：
1.<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
2.嵌入图片，点击图片跳转：
<a href="HelloHtml.html">
    <img src="../resources/image/1.jpeg" alt="鱼小头像" title="鱼小头像">
</a>

2.锚链接：
（1）.需要一个标记
（2）.通过#跳转到标记
例：
<!--在页面顶部使用name作为标记-->
<a name="#top">顶部</a>
<!--底部跳回到顶部-->
<a name="#top">顶部</a>

3.功能性链接
邮件链接:mailto
例：<a href="mailto:tlxfish586@163.com">点击联系我</a>

4.块元素和行内元素

1.块元素：无论内容多少，该元素独占一行
2.行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

5.列表

1.什么是列表
列表就是信息资源的一种扩展形式。
使信息结构化和条理化，并以列表的样式显示出来，以便浏览。
html三种列表：有序列表、无序列表、自定义列表

2.有序列表

<!--有序列表：一列项目，列表项目使用数字进行标记-->
<ol>
    <li>早饭</li>
    <li>午饭</li>
    <li>晚饭</li>
    <li>夜宵</li>
</ol>
有序列表

3.无序列表

<!--有序列表：一列项目，列表项目使用数字进行标记-->
<ol>
    <li>早饭</li>
    <li>午饭</li>
    <li>晚饭</li>
    <li>夜宵</li>
</ol>
无序列表.png

4.自定义列表

<!--自定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合。
    dl : 标签
    dt : 列表名称
    dd : 列表内容
-->
<dl>
    <dt>时间</dt>
    <dd>早晨</dd>
    <dd>中午</dd>
    <dd>晚上</dd>
    <dd>半夜</dd>
    
    <dt>餐食</dt>
    <dd>早饭</dd>
    <dd>午饭</dd>
    <dd>晚饭</dd>
    <dd>夜宵</dd>
</dl>
自定义列表.png

6.表格

标签:<table></table>
<!--表格table
行 tr
列 td
-->
<!--border设置边跨宽度-->
<table border="1px">
    <tr>
        <!--colspan跨行-->
        <td colspan="3">1-1</td>
    </tr>
    <tr >
        <!--rowspan跨列-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
表格.png

7.媒体元素

视频元素video与音频元素audio

<!--音频与视频
src : 资源路径 推荐使用相对路径
controls : 控制条
autoplay : 自动播放
-->
例：
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/2.mp4" controls autoplay></audio>
媒体元素.png

谷歌会拦截自动播放，用其他浏览器就可以了，上面视频，下面音频

8.html页面结构

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

<header>
    <h1>头部</h1>
</header>

<section>
    <h1>内容</h1>
</section>

<footer>
    <h1>底部</h1>
</footer>

9iframe内联框架

<!--iframe内联框架
<iframe src="path" frameborder="0"></iframe>
src : 地址
width : 宽度
height : 高度
-->

<iframe src="https://www.baidu.com" frameborder="0" width="1920" height="1080">
</iframe>
iframe

10.表单

<!--表单
标签：<form></form>
action : 表单提交的位置，可以是网站或请求处理地址
method : post 、 get
         get:可以在url中看到提交的一些信息，不安全，比较高效，不能传输大文件
         post:在url中不会显示提交的一些信息，比较安全，可以传输大文件
-->
<form action="HelloHtml.html" method="get">
    <p>name: <input type="text" name="username"></p>
    <p>password: <input type="password" name="pwd"></p>
    <p><input type="submit"></p>
    <p><input type="reset"></p>
</form>

1.文本输入框

<!--文本输入框：<input type="text"
      value : 默认初始值
      maxlength : 输入最长字符串
      size : 文本框的长度
      -->
  <p>用户名: <input type="text" name="username"></p>

2.密码输入框

<!--密码输入框：input type="password" -->
    <p>密码: <input type="password" name="pwd"></p>

3.单选框

 <!--单选：input type="radio"
        value : 单选框的值
        checked : 默认选中
        name : 表示组
        需要放在一个组，不然每个单选都能选！
        -->
    <p>性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

4.多选框

<!--多选框：input type="checkbox"
        checked : 默认选中
        -->
    <p>爱好:
        <input type="checkbox" value="read" name="hobby" checked>阅读
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="code" name="hobby">编程
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

5.列表框

<!--列表框
        selected : 默认选中
        -->
    <p>国家:
        <select name="列表名称">
            <option value="china" selected>中国</option>
            <option value="japan">日本</option>
            <option value="italy">意大利</option>
            <option value="russia">俄罗斯</option>
        </select>
    </p>

5.文本域

<!--文本域：textarea name="textarea"-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>

6.文件域

<!--文件域：input type="file" name="files"-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

7.滑块

<!--滑块-->
    <p>音量:
        <input type="range" name="vol" min="0" max="100" step="5">
    </p>

8.搜索框

<!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>

9.按钮

<!--普通按钮：input type="button"
        图片按钮：input type="image"
        提交按钮：input type="submit"
        重置按钮：input type="reset"
       -->
    <p>按钮:
        <input type="button" name="btn" value="按钮">
        <input type="image" src="../resources/image/1.jpeg">
    </p>
    <p><input type="submit">
       <input type="reset">
    </p>

10.表单验证
(1)

<!--邮箱验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>

    <!--url验证-->
    <p>url:
        <input type="url" name="url">
    </p>

    <!--数字验证-->
    <p>年龄:
        <input type="number" name="number">
    </p>

(2)

<!--文本输入框：<input type="text"
        value : 默认初始值
        maxlength : 输入最长字符串
        size : 文本框的长度
        placeholder : 提示信息
        required : 非空判断
        pattern : 正则表达式验证（百度就好了）
        -->
    <p>名字: <input type="text" name="username" placeholder="请输入用户名" 
required></p>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML入门笔记01
    1. HTML简史 1.1 html是谁发明的？ 1990年左右，Tim Berners-Lee（蒂姆·伯纳斯·李...
    tinjunge阅读 2,540评论 0赞 1
  • HTML入门笔记1
    1. HTML发明者 李爵士(Tim Berners-Lee) 李爵士发明了WWW(万维网）、HTML、HTTP和...
    前端小白Z阅读 3,342评论 0赞 0
  • 前端html入门笔记
    网页的组成： 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以...
    前端小白i阅读 1,696评论 0赞 0
  • HTML入门笔记1
    1. HTML 起手式 新建demo-->新建html--><!DOCTYPE html> 2. 全局属性 sty...
    fanison阅读 708评论 0赞 0
  • HTML 入门笔记 － 初识HTML
    ＊＊＊＊＊＊＊＊＊＊ 未经本人允许，严禁转载任何网站 ＊＊＊＊＊＊＊＊＊＊ 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 13,742评论 46赞 548