HTML知识点-笔记总结

最新推荐文章于 2022-03-07 09:33:43 发布

鱼泡泡小梦

最新推荐文章于 2022-03-07 09:33:43 发布

阅读量414

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_46559029/article/details/104911394

版权

They say when you meet the love of your life,time stops.
人们说，当你遇上你的挚爱，时间在那一刻便停止了。 ——《大鱼》

文章目录

一、`html`介绍
二、多媒体与嵌入
- 1.媒体元素
- 2.内敛框架
三、`html`表格与列表
- 1.表格`table`
- 2.列表`ol有序列表 ul无序列表 dl定义列表`
四、`html`表单`form`

一、`html`介绍

1.什么是`html`？

HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML的英文全称是Hypertext Marked Language（超文本标记语言）。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。

HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

2.`html`文件的基本结构

<!-- DOCTYPE全称为Document Type，意思为文档种类，html全称为HyperText Mark-up Language，意思为超文本标记性语言。
    这行代码代表文档声明，告诉浏览器这是一个html文件。 -->
<!DOCTYPE html>
<!--  lang="en"(lang->language)，lang取值为en/zh-cn，en表示英文，zh-cn表示中文。
      html文件的最外层标签，包裹着所有标签代码。 -->
<html lang="en">
<!-- head用于定义文档的头部 -->
<head>
<!-- meta-源信息，是编写网页中的一些赋值信息，charset="UTF-8"国际编码，让网页不出现乱码 -->
<meta charset="UTF-8">
<!-- 理想视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title是设置网页标题 -->
<title>我是网页标题</title>
</head>
<body>
<!-- body是设置网页内容 -->
</body>
</html>

3.基础标签

<!-- 标题标签——h1~h6（字号从大到小） -->
<h1>我是标题标签</h1>

<!-- 段落标签——有默认属性 -->
<p>我是段落标签</p>

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

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

<!-- 注释 -->
<!--  -->

<!-- 特殊符号 -->
&nbsp;    空格
&lt;      小于
&gt;      大于
&bull;    黑点
&quot;   单引号
&copy;    版本号

<!-- 字体样式标签 -->
<strong>我是加粗</strong>
<em>我是斜体</em>

4.`img`标签

src="" 图片路径
alt="" 图片无法显示时的替代文字
title="" 鼠标放在图片上面的提示文字

<img src="" alt="" title="" />

5.`a`标签

href="" 跳转地址，实现超链接的效果
target="_self" _self 返回本身 _blank 返回空页

<a href="" target=""></a>

<!-- 锚链接 -->
<!-- 1.在本页面跳转 -->
<!-- 首先在开始部分上面写上a标签，在a标签上添加属性name/id="属性值"
     第二在结束部分下面写上a标签，将a标签的属性href="#属性值"-->
     
<!-- 例如： --> 
<a href="#" name="a"></a> 
开始部分
<!-- 这里添加合适的内容 -->
结束部分
<!-- 当点击回顶部时页面会跳转到开始部分 -->
<a href="#a">点击回顶部</a>


<!-- 2.不同页面跳转 -->
<!-- 例如： -->
<!-- 首先在A页面，设置属性href="目标页面地址#目标位置"-->
<a href="./B.html#part">跳转到B页面</a>

<!-- 当点击`跳转到B页面`时，跳转到`我是B页面的part部分` -->

<!-- 在B页面中 -->
<!-- 这里添加合适的内容 -->
<a href="#" name="part">我是B页面的part部分</a>

<!-- 功能性链接 -->
<!-- 这里的邮箱会被当做收件人 -->
<a href="mailto:2574908304@qq.com">点击打开电脑默认邮箱</a>

二、多媒体与嵌入

1.媒体元素

<video src="">视频</video>
<audio>音频</audio>
当中的一些属性如下：
        src="" 路径
        controls 如果出现该属性，则向用户显示控件，比如播放按钮。
        autoplay 如果出现该属性，则视频在就绪后马上播放

2.内敛框架

<iframe src="" name=""></iframe>
当中的一些属性如下：
        src="" 引用页面地址
                1.可为线上网址http://www.bdqn.cn
                2.可为网页subframe/the_second.html
        name="" 框架标识名
                在超链接上设置target目标窗口属性为希望显示的框架窗口名

三、`html`表格与列表

1.表格`table`

在这里创建了一个2*2表格

<!-- border="1"指的是table边框为1像素，这个数值越大，边框就越粗。 -->
<table border="1">
<!-- tr行标签  td单元格标签 -->
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>小刘</td>
<td>18</td>
</tr>
</table>

注：表格的跨行跨列：
1.所谓“跨行”，是指一个单元格占据两行或两行以上。
rowspan=“n”——跨行

2.所谓“跨列”，是指一个单元格占据两列或两列以上。
colspan=“n”——跨列

2.列表`ol有序列表 ul无序列表 dl定义列表`

<!-- 有序列表 -->
<ol>
<li></li>
</ol>
	 
<!-- 无序列表 -->
<ul>
<li></li>
</ul>
 
<!-- 定义列表 dt-标题  dd-列表项-->
<dl>
<dt>面条</dt>
<dd>刀削面</dd>
<dd>烩面</dd>
</dl>

注：
有序列表的特性：
        1.有顺序，每个<li>标签独占一行（块元素）。
        2.默认<li>标签项前面有顺序标记。
        3.一般用于排序类型的列表，如试卷、问卷选项等。

无序列表的特性：
        1.没有顺序，每个<li>标签独占一行（块元素）。
        2.默认<li>标签项前面有个实心小圆点。
        3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

定义列表的特性：
        1. 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）。
        2.默认没有标记。
        3.一般用于一个标题下有一个或多个列表项的情况。

四、`html`表单`form`

action="" 表单提交的地址
method="" 有两个属性值
post：非明文，数据没有长度限制，类型可多变
get：明文显示要提交的数据在地址栏，多个参数以&隔开

<form action="" method=""></form>

<!-- 常用的表单元素 -->
<input type=""  name=""  value="" size=""  maxlength="" placeholder="" />
<!-- type="" 指定元素类型
             属性值有：text 文本框
                      password 密码框
                      checkbox 复选框
                      radio 单选按钮
                      submit 提交
                      reset 重置
                      button 按钮
                      hidden 隐藏文本域
                      image 图片按钮
                      email 会自动验证Email地址格式是否正确
                      url 会自动验证URL地址格式是否正确
                      number 数字框
                      range 滑块
                      search 搜索框
                      ...
-->
<!-- name="" 指定表单元素名称
     value="" 元素的初始值
     size="" 指定表单元素的宽度的初始值
     maxlength="" 输入的最大字符数
     placeholder="" 设置输入框的提示文字
     ...
-->

<!-- 下拉列表框 -->
   <select>
   <option>请选择国家</option>
   <option>中国</option>
   <option>美国</option>
   </select>
<!-- 多行文本域 col="" 列数  row="" 行数 -->
   <textarea col=""  row=""></textarea>
<!-- 文件域 -->
   <input type="file">
<!-- 表单的特殊的属性 -->
   checked 选中
   readonly 只读
   selected 选中
   disabled 禁用
   required 必填