前端 HTML 笔记

最新推荐文章于 2021-05-04 16:41:57 发布

曾经有过的未来

最新推荐文章于 2021-05-04 16:41:57 发布

阅读量156

点赞数

分类专栏：跟着狂神学JAVA JAVA 学习

本文链接：https://blog.csdn.net/u012861792/article/details/109991117

版权

跟着狂神学JAVA 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

JAVA 学习

8 篇文章 0 订阅

订阅专栏

HTML

1. 初始HTML

HTML：Hyper Text Markup Language 超文本标记语言
W3C：World Wide Web Consortium 万维网联盟，W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

2. 网页基本信息

标签	作用
DOCTYPE	告诉浏览器使用什么规范（默认是html）
head	网页头部
meta	描述性标签，用来描述网站的一些信息，一般用来做SEO(搜索引擎优化)
title	网页标题
body	代表网页主体
	注释

<!-- DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，用来描述网站的一些信息 -->
    <!-- meta一般用来做SEO(搜索引擎优化) -->
    <meta charset="UTF-8">
    <meta name="keywords" content="html">
    <meta name="description" content="学习html">
    <!-- title网页标题 -->
    <title>这是网页标题</title>
</head>

<!-- body代表网页主体 -->
<body>
    Hello World!
</body>
</html>

3. 网页基本标签

3.1 标题标签

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

3.2 段落标签

<!-- 段落标签 -->
<p>中国改编版</p>
<p>两只老虎    两只老虎</p>
<p>跑得快    跑得快</p>

注意：中间无论加多少空格，网页中都只会显示一个空格，想要加多个空格需要特殊符号

3.3 水平线标签

<hr/>

3.4 换行标签

中国改编版<br/>
两只老虎    两只老虎<br/>

3.5 字体标签(粗体和斜体)

粗体：<strong> I love you，</strong><br/>
斜体：<em> I love you.</em>

3.6 特殊符号

<br/>空格： &nbsp;               1
<br/>空格： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1
<br/>大于号：&gt;
<br/>小于号：&lt;

4. 图像标签

src:资源地址
相对地址，绝对地址
…/上级地址
alt：在图片加载失败的时候，就会用文字代替
title：鼠标悬停在图片上时，所显示的名字

<!--
src:资源地址
    相对地址，绝对地址
    ../上级地址
alt：在图片加载失败的时候，就会用文字代替
title:鼠标悬停在图片上时，所显示的名字
-->
<img src="../resources/img/1.jpg" alt="玄斗" title="悬停文字">

5. 链接标签

5.1 超链接

href：跳转页面的地址
a标签内文字：即显示的文字，也可以把图片放在a标签内，点击图片跳转网页
target：表示在哪打开新网页，_self表示在当前标签打开 _blank表示在新的页面中打开

<!--
href：跳转页面的地址
a标签内文字：即显示的文字，也可以把图片放在a标签内，点击图片跳转网页
target:表示在哪打开新网页 _self:当前标签打开 _blank:新的页面中打开
-->
<a href="01%20我的网页.html" target="_blank">我的网页</a>
<a href="http://www.baidu.com">百度</a>

5.2 锚链接

需要一个标记锚
跳转到标记，可用来实现页面内跳转

<!--锚链接
1.需要一个标记锚
2.跳转到标记
页面内跳转
#
-->
<a name="top">顶部</a>
...
<a href="#top">回到顶部</a>

5.3 功能性链接(邮箱推广、QQ推广)

邮箱连接：mailto
QQ推广：https://shang.qq.com/v3/index.html

<!--功能性链接
邮箱链接：mailto
qq链接
-->
<br/><hr/>
<a href="mailto:xxxxxxqq.com">点击联系我</a>

<!-- QQ推广 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1574412&site=qq&menu=yes">
    <img border="0"
         src="http://wpa.qq.com/pa?p=2:1574412:53"
         alt="加我领取学习资料"
         title="加我领取学习资料"/>
</a>

6. 行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- 如：段落标签§、标题标签(h)
行内元素
- 撑开宽度，左右都是行内元素的可以排在一行
- 如：超链接标签(a)、字体标签(strong , em)

7. 列表

7.1 有序列表

ol：ordered lists
li：list
应用范围：试卷、问答

<ol>
    <li>java</li>
    <li>C++</li>
    <li>python</li>
</ol>

7.2 无序列表

ul：unordered lists
li：list
应用范围：导航，侧边栏

<ul>
    <li>java</li>
    <li>C++</li>
    <li>python</li>
</ul>

7.3 自定义列表

dl：definition lists 自定义列表
dt：definition term 自定义列表组
dd：definition description 自定义列表描述
作用：公司网站底部

<dl>
    <dt>编程语言</dt>
    
    <dd>java</dd>
    <dd>c++</dd>
    <dd>python</dd>
</dl>

8. 表格

表格：table标签
行：tr，table row，表格中的一行
列：td，table data cell，表格中的一个单元格
跨行：rowspan，代表当前内容占几行
跨列：colspan，代表当前内容占几列

<table>
    <tr>
        <!-- 跨列 colspan 代表当前内容占几列-->
        <td colspan="3">1-1</td> <!--占3列-->
    </tr>
    <tr>
        <!-- 跨行 rowspan 代表当前内容占几行-->
        <td rowspan="2">2-1</td><!--占2行-->
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

9. 媒体元素

video ， audio
controls 控制面板
autoplay 自动播放

<!--视频
controls 控制面板
autoplay 自动播放
-->
<video src="xxx/xxx.xxx" controls autoplay></video>
<!--音频
-->
<audio src="xxx/xxx.xxx" controls autoplay></audio>

10. 页面结构

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

<header>网页头部</header>
<section>网页主体</section>
<foot>网页脚部</foot>

11. 内联框架

iframe标签，必须要有src属性即引用页面的地址
- src：页面地址
- w-h：宽度和高度
- name：框架标识名
也可以通过如下方式设计内联框架

<!--
iframe内联框架
src：页面地址
w-h：宽度和高度
name：框架标识名
也可以通过如下方式设计内联框架
-->

<iframe src="https://www.youdao.com"
        name = "IFrame"
        frameborder="0"
        width="1000px"
        height="800px">
</iframe>

<a href="https://www.baidu.com" target="IFrame">点击跳转到百度</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no"-->
<!--        border="0"-->
<!--        frameborder="no"-->
<!--        framespacing="0"-->
<!--        allowfullscreen="true">-->
<!--</iframe>-->

12. 表单

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

<form action="01%20我的网页.html" method="get">

常用属性

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称（提交时所对应的key）
value	元素的初始值，radio必须提供
size	指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位
maxlength	type为text或者password时，输入的最大字符数
checked	type为radio或者checkbox时，指定按钮是否被选中

其他属性

属性	说明
readonly	只读，不可更改
disable	禁用
hidden	隐藏，虽然不可见但是会提交
id	标识符，可以配合label的for属性增加鼠标的可用性
placehoder	text 文字域等输入框内的提示信息
required	不能为空
patten	正则表达式验证

12.1 文本输入框(用户名、密码…)

input type=“text”
value：默认内容
maxlength：内容最大长度

    <!--
        文本输入框：input type="text"
        value：默认内容
        maxlength：内容最大长度
    -->
    <p>名字： <input type="text" name="username" value="hello" maxlength=8"></p>
    <!-- 密码框：input type="password"-->
    <p>密码： <input type="password" name="pwd"></p>

12.2 单选框

input type=“radio”
value：单选框的值
name：组，组相同的只能选一个
checked：默认被选中

	<!-- 单选框
        input type="radio"
        value：单选框的值
        name：组，组相同的只能选一个
        checked：默认被选中
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

12.3 多选框

input type=“checkbox”
value：多选框的值
name：组，组相同的只能选一个
checked：默认被选中

	<!-- 多选框
        input type="checkbox"
        value：多选框的值
        name：组，组相同的只能选一个
        checked：默认被选中
    -->
    <p>编程语言：
        <input type="checkbox" value="java" name="code" checked/>java
        <input type="checkbox" value="python" name="code"/>python
        <input type="checkbox" value="c++" name="code"/>c++
    </p>

12.4 按钮(submit , reset…)

input type=“button”
value：按钮上面的字
name：按钮的值

	<!-- 按钮 (submit、reset都是按钮)
        input type="button"
        value：按钮上面的字
        name：按钮的值
    -->
    <p>按钮：
        <input type="button" value="这是一个按钮" name="btn1"/>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="清空">
    </p>

12.5 下拉框列表框

value：选项的值
selected：默认选择的值

	<!-- 下拉框 列表框
        value：选项的值
        selected： 默认选择的值
     -->
    <p>国家：
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="Franch" selected>法国</option>
            <option value="English">英国</option>
        </select>
    </p>

12.6 文本域

rows：行
cols：列
作用：写反馈、说明等等……

	<!-- 文本域
        rows： 行
        cols： 列
     -->
    <p>反馈
        <textarea name="text" cols="10" rows="5"></textarea>
    </p>

12.7 文件域

input type=“file” name=“files”

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

12.8 邮箱

	<!-- 邮件验证 有校验功能 -->
    <p> 邮箱：
        <input type="email" name="email">
    </p>

12.9 网址

	<!-- URL 有校验功能 -->
    <p> 网址：
        <input type="url" name="url">
    </p>

12.10 数字选择框

	<!-- 数字选择框
        max：最大值
        min：最小值
        step：步长-->
    <p> 商品数量：
        <input type="number" name="num" max="100" min="0" step="5">
    </p>

12.11 滑块

	<!-- 滑块 （调节声音大小） -->
    <p> 音量：
        <input type="range" name="voice" min="0" max="100">
    </p>

12.12 搜索框

	<!-- 搜索框 （输入后多了个×）-->
    <p> 搜索：
        <input type="search" name="search">
    </p>

13. 总结

html的知识相对来说比较简单，且不抽象，就是所见即所得，关键就是需要熟悉这些属性和功能，在需要实现的时候能想得起来即可。