其他分享
首页 > 其他分享> > 111111

111111

作者：互联网

你对力量一无所知！？

哈佛学习法

先听与看——>刻意练习——>分享

image

何为网页？

网页的集合——{网页1,网页2,...}

一页，本质为【.html】文件

何为元素？

文字、图片、声音、视频、链接等

HTML是什么？

HTML全称Hypertext Markup Language（超文本标记语言）——前端语言

常见浏览器

根据内核不同，做如下区分：

IE、猎豹、360、百度...

Firefox（火狐）...

Safari（苹果）...

Chrome、Opera...

W3C标准是什么？

开发人员——>W3C标准——>XXX浏览器——>展示同一内容

W3C定义：

一般的开发顺序为：

HTML（定义页面）——>CSS（修饰页面）——>JavaScript（定义交互），这样一来可以做到“结构/表现/行为”的分离模式。

标签是什么？

标签由“<”和“>”构成，根据起止标签划分为：

如：<br />

PS：但凡是单标签，推荐写法为<xxx />；不要问为什么，就显得很专业。

如：<html></html>

标签关系

<html><!-- html和head、body属于包含关系 -->
    <head></head><!-- head和body属于并列关系 -->
    <body></body><!-- head和body属于并列关系 -->
</html>

骨架标签

<html><!-- 根标签 -->
    <head><!-- 文档头部 -->
        <title></title><!-- 文档标题 -->
    </head>
    <body></body><!-- 文档主体 -->
</html>

字符集

<meta charset="UTF-8">

HTML5基础格式

<!DOCTYPE html><!-- 定义文档类型 -->
<html lang="en"><!-- 定义语言类型，常用于网页翻译 -->
<head>
    <meta charset="UTF-8"><!-- 定义字符集 -->
    <title></title><!-- 定义文档标题 -->
</head>
<body>
</body>
</html>

HTML属性

通用属性

特殊字符

&nbsp;<!-- 空格 -->
&lt;<!-- 小于 -->
&gt;<!-- 大于 -->
&copy;<!-- 版权 -->
...

标题标签

<!-- 全称：header -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

特点：

标题一共六级选，文字加粗一行显。

由大到小依次减，从重到轻随之变。

段落标签

<!-- 全称：paragraph -->
<p></p>

特点：

换行标签

<!-- 全称：break -->
<br />

特点：

文本格式标签

<!-- 粗体 -->
<strong></strong>
<b></b><!-- 全称：bold -->

<!-- 斜体 -->
<em></em><!-- 全称：emphasized -->
<i></i><!-- 全称：emphasized -->

<!-- 删除线 -->
<del></del><!-- 全称：deleted -->
<s></s><!-- 全称：strike -->

<!-- 下划线 -->
<ins></ins><!-- 全称：inserted -->
<u></u><!-- 全称：underline -->

布局标签

div标签

<!-- 全称：division -->
<div></div>

特点：

image.png

span标签

<!-- 全称：span -->
<span></span>

特点：

image.png

图像标签

<!-- 全称：image -->
<img src="" alt="">

HTML属性：

PS：同时设置width和height属性，可能会造成图片失真，以及在图像失效时、图像会占位显示。

何为路径？

绝对路径

URL绝对路径（网络位置）

如：src="http://www.baidu.com/path/xxx.png"

相对路径

如：src="/Image/xxx.png"

如：src="xxx.png"

如：src="Image/xxx.png"

如：src="../../Image/xxx.png"

链接标签

<!-- 全称：anchor -->
<a href=""></a>

HTML属性：

链接分类

如：<a href="http://www.baidu.com"></a>

如：<a href="#index.html"></a>

如：<a href="#"></a>

如：<a href="#xxx.exe"></a>

如：<a href="#xxx.png"></a>

快速跳转至网页的某个位置

<a href="#跳转的ID名"></a><!-- 如果ID存在重名，则从上往下匹配最近的那个 -->
<h2 id="跳转的ID名"></h2>

表格标签

作用：

显示/展示数据

特点：

整洁

<table>
    <thead><!-- 全称：table header -->
        <th></th><!-- 全称：table header cell -->
    </thead>
    <tbody><!-- 全称：table body -->
        <tr> <!-- 全称：table row -->
            <td></td><!-- 全称：table data cell -->
        </tr>
    </tbody>
</table>

image.pngimage.pngimage.png

HTML属性：

合并单元格

如：<td rowspan="合并个数"></td>（最上侧单元格）

如：<td colspan="合并个数"></td>（最左侧单元格）

列表标签

作用：

用于布局页面，显示数据

特点：

整洁、灵活

无序列表

<ul><!-- 全称：unordered list -->
    <li></li><!-- list item -->
    <li></li>
</ul>

有序列表

<ol><!-- 全称：ordered list -->
    <li></li><!-- list item -->
    <li></li>
</ol>

自定义列表

常用于对术语或名称的解释。

<dl><!-- 全称：definition list -->
    <dt></dt><!-- 全称：definition term -->
    <dd></dd><!-- 全称：definition description -->
</dl>

表单属性

常用于收集用户信息，主要分为：

<form action="" method=""></form>
<!-- action：URL -->
<!-- method：GET/POS -->

何为表单域？

包含表单元素的区域，用于收集信息和传递信息，把<from></form>范围内的所有信息提交给服务器

input标签

<input type="text" />

Type（类型）：

select标签

下拉列表，可节省网页空间

<select name="" id="">
    <option value="">选项1</option>
    <option value="">选项2</option>
</select>

textarea标签

常用于评价、介绍等场景

<textarea name="" id="" cols="30" rows="10"></textarea>

HTML属性：

label标签

常用于搭配<input /使用（绑定表单元素>；当点击<label></label>中的文本时，浏览器会自动将焦点转移到对应的表单元素上，增强UI体验效果

<input type="text" id="绑定的ID" />
<label for="绑定的ID"></label>

标签：...,标签,表单,111111,HTML,链接,属性
来源： https://blog.csdn.net/weixin_42009804/article/details/117397914