HTML基础学习

Internet和web

Internet

Internet：是一组全球性的信息资源汇总，也叫做因特网、互联网、交互网。

Internet提供的常见服务：

Email邮件服务。
telnet远程登录。
www服务(万维网，world wide web，简称web)，通过网络访问网页。有一个具体的实现就是web应用程序。
bbs论坛，电子公告板，贴吧、天涯。
ftp，文件的上传下载。

Internet基本的实现技术：

分组交换原理。
tcp/ip协议。

web

web应用程序指的是网络环境下的一种应用程序——网页程序，简称网页。

作用：将各类信息和服务通过互联网进行无缝连接，并且提供生动的图形用户界面。
工作原理：
- 由web服务器、浏览器、通信协议(http/https, hyper text transfer protocol，超文本传输协议)组成。
- 浏览器：向指定网址(指向服务器)提交请求、作为HTML和JS的解释器、以图形化的形式显示文本。
- web服务器：存储web上的信息、响应浏览器的请求且执行服务器端程序。
  - 服务器产品：tomcat、apache、iis。
  - 服务端技术：Java、Python.......它们都有操作数据库的能力。
  - 前端技术：HTML、CSS、JavaScript，运行在客户端，由浏览器解析执行。

HTML文档结构

https://developer.mozilla.org/zh-CN/docs/Web

文档类型声明

<!DOCTYPE html>，文档类型声明，作用指定HTML的版本和风格。

html页面

<html lang="en"> </html>，位于<!DOCTYPE html>之下。

其中包括：

页面头部head，作用：定义页面的全局信息。
- 语法<head></head>，紧跟在html下，是html中的首个子元素。
- 头部包含：
  - 网页的标题：<title>Document</title>。
  - 网页的编码格式：<meta charset="UTF-8">。
  - 用于网站推广的关键字和描述：

<meta name="keywords" content="关键字....">
<meta name="description" content="描述">

引入外部CSS、JavaScript文件、定义内部样式：

<link rel="stylesheet" href="">
<script src=""></script>
<style></style>

页面的主题body。用户看到的内容。

语法<body></body>，在head标签下。
除了之前的标准属性之外，还有两个特殊属性需要我们注意：
- text：表示文本颜色。
- bgcolor：页面的背景颜色。

<!DOCTYPE html>  
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

在页面中，应该给用户呈现那些东西呢？来看看关于文本的标记。

文本标记

特殊字符

 表示一个空格，可以连续使用。
>大于；<小于。
©@符号。
¥人民币符号。

文本样式

<i>斜体</i>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<b>加粗</b>

标题元素

以标题的形式显示文本，从h1~h6对应一级标题~六级标题，注意没有七级标题。

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

特点：字体加粗、改变字体大小、上下文之间有空白间距、独自成一行。

段落元素

没得说，就是p标签，通常用来以段落的形式显示文本，特点：字体大小为默认大小；独自成一行；上下文之间也有间距。

换行元素

br标记，用来换行。

分割线元素

hr标记，表示分割线或者水平线。

<hr align="center" width="200px" color="red" size="5px">

预格式化

pre标签保留源文件中的格式，及保留源文件中的换行和空格效果。

一般都是用来展示代码块。

<pre>
x = 1
if x == 1:
    print(1111)
</pre>

分区元素

块分区，也叫做块级元素：

特点：每个元素都独占一行，无任何明显效果。
通常用来做布局。
div、标题元素、段落元素、结构标记(html5新添加的，做布局用)。

行分区，也叫做行内元素：

多个元素在一行内显示，也没有任何特殊的效果。
用来包裹文本，处理文本的不同样式。
span、i、b、s、u、sub、sup，大部分行内元素都是为了处理文件的显示效果。
也有特殊的行内元素img、a，专门用来处理图片和链接的。

注意，这里再补充一点嵌套的问题：

尽量不要行内元素嵌套块级元素。
p标签不允许嵌套其他块级元素，也不允许嵌套p标签本身。

错误示范：
<span>
    <div></div>
</span>

错误示范，运行f12检查就能看出来问题：
<p>
    这是父元素p1
    <p>这是子元素p2</p>
</p>
<p>
    这是父元素p1
    <div>这是子元素p2</div>
</p>

图像和链接

先来了解一些概念性的东西：

url：我们先来分析下url(uniform resource locator;URL)，url，统一资源定位符，也叫做统一资源定位器。作用是标识资源的位置。
- 目录结构：web应用中文件夹的组成结构。
- 表现形式：
  - 绝对路径，某个(本地或者网络)资源的完整的路径，一般由协议、主机名、目录结构、资源名组成，如http://baikebcs.bdimg.com/cms/static/baike-icon.svg或者D:\tmp\web\a.png。
  - 相对路径，从当前文件开始，一直到资源文件所在的位置，所经过的路径就是相对路径。
    - 同级目录./a.png或者a.png。
    - 父目录../a.png。
    - 自目录./img/a.png或者img/a.png。
  - 根相对路径，永远都从web应用的根目录开始找。
    - 由/作为开始，表示web应用的根目录，如/index/img/a.png。

图像

图像格式：jpg(jpeg)，有损压缩；png背景是透明的；gif动画。

引用图像的标签是img：

<!-- 默认以图片默认大小展示 -->
<img src="图片地址" alt="当图片加载失败将显示alt值" title="鼠标移动到图片上时，显示的文本">
<!-- 也可以指定大小，下面两种方式都可以 -->
<img src="图片地址" alt="" width="200px" height="200px">
<img src="图片地址" alt="" style="width: 200px;height: 200px;">
<!-- 如果设置了高宽，那么就会有一定的性能消耗，因为图片本身由高宽，你设置之后，要进行调整 -->
<!-- 另外，如果高宽只设置了其中一个，那么另一个也会跟着等比例缩放 -->

链接

链接又称超链接，使用a标签表示，设置页面中允许被点击的内容，在网页中，链接允许完成页面间的跳转动作。

<a>a标签中没有属性(href)，就是普通的标签</a>
<br>
<a href="">当href值为空时，点击时会刷新当前页面，即跳转到当前页面</a>
<br>
<a href="https://www.baidu.com">在当前标签页跳转到指定链接，未点击时字体颜色是蓝色的，点击后，是紫色的</a>
<br>
<a href="https://www.baidu.com" target="_blank">在新标签页跳转到指定链接，未点击时字体颜色是蓝色的，点击后，是紫色的</a>
<!--
target:打开链接的方式
    _blank: 在新标签页打开网址
    _self: 默认值，在当前标签页打开网址
 -->
<br>
<a href="#" title="鼠标移动到链接上时，显示的文本">href值为#号时，返回页面顶部</a>
<br>
<a href="javascript:js代码">链接到js</a>
<a href="javascript:;">禁止a标签跳转</a>
<a href="*.zip/*.rar">如果链接地址是压缩文件，你点击后就是下载操作</a>
<a href="mailto:xxx@163.com">如果由对应的邮箱客户端，点击直接打开该客户端</a>

a标签的锚点，在页面的某个位置，做一个记号，方便页面能够随时跳转到记号位置处。

定义锚点：
- 通过a标签的name属性定义锚点，<a name="自定义锚点名称"></a>
- 通过任意标签的id属性定义锚点，<div id="自定义锚点名称">可以是任意的标签，只认id值</div>
链接到锚点：
- 跳转到本页面的锚点处，<a href="#锚点名称"></a>
- 跳转到其他页面的锚点处，<a href="页面的url#锚点名称"></a>

<!-- 链接到锚点处 -->
<a href="#n1">第1章</a>
<a href="#i2">第2章</a>
<a href="#i3">第3章</a>
<a href="https://www.cnblogs.com/Neeo/p/10864123.html#web">外链</a>
<!-- 定义锚点 -->
<div id="i1" style="height: 1000px;">
    <a name="n1">第1章内容</a>
</div>
<a href="#">返回顶部</a>
<div  id="i2" style="height: 1000px;">第2章内容</div>
<a href="#">返回顶部</a>
<div  id="i3" style="height: 1000px;">第3章内容</div>
<a href="#">返回顶部</a>

表格table

基础表格

定义表格：<table></table>。

width/height:宽/高。
border边框，指定边框的宽度。
bgcolor，表格的背景颜色。
cellspacing，单元格外边距，即单元格与单元格之间的距离。
cellpadding，单元格内边距，，即单元格边框与内容之间的距离。
align(left,center,right)，表格在页面的水平对齐方式。

创建行：<tr></tr>。

align(left,center,right)，该行内容的水平对齐方式。
valign(top,center,bottom)，该行内容的垂直对齐方式。
bgcolor，该行的背景颜色。

创建列：<td></td>。

align/vlign，水平对齐/垂直对齐。
width/hegiht，列宽/列高。
colspan，值是数字，设置单元格跨列，水平方向。从指定的单元格位置处，横向向右合并几个单元格(包含自己)。
rowspan，值是数字，设置单元格跨行，垂直方向。从指定的单元格位置处，纵向向下合并几个单元格(包含自己)。

注意，每行中的指定列的宽度，都是一致的，默认以最宽的列为主，每行中列的高度也是一致的，默认也是以最高的为主。

<table border="2px" cellpadding="5px" cellspacing="4px" align="center" width="300px" height="200px" bgcolor="#ffc0cb">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
    </tr>
    <tr>
        <td colspan="2">1</td>
        <!--<td>zhangkai</td>-->
        <td>19</td>
    </tr>
    <tr>
        <td>2</td>
        <td rowspan="2">likai</td>
        <td>20</td>
    </tr>
    <tr>
        <td>3</td>
        <!--<td>wangkai</td>-->
        <td>24</td>
    </tr>
</table>

表格的标题caption和行/列标题th

caption标签紧跟在table标签之后，且一个表格中只能有一个caption标签。注意，caption的align属性在HTML4.01开始已废弃，HTML5中不支持该属性。

th标签相当于对于单元格的内容加粗，且默认让内容水平居中。

<table border="1px">
    <caption style="text-align: left">信息表</caption>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    <tr>
        <th >1</th>
        <td>zhangkai</td>
        <td>19</td>
    </tr>
    <tr>
        <th>2</th>
        <td >likai</td>
        <td>20</td>
    </tr>
    <tr>
        <th>3</th>
        <td>wangkai</td>
        <td>24</td>
    </tr>
</table>

表格分组

可以通过设置将表格分为三组：

表头：thead标签。
表主体，tbody标签。
表尾，tfoot标签。

浏览器在渲染表格的时候，会依次渲染表头、表主体、表尾，但用户看起来没啥变化。

<table border="1px">
    <caption style="text-align: left">信息表</caption>
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>zhangkai</td>
        <td>19</td>
    </tr>
    <tr>
        <th>2</th>
        <td>likai</td>
        <td>20</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>3</th>
        <td>wangkai</td>
        <td>24</td>
    </tr>
    </tfoot>
</table>

表格的嵌套

表格中允许嵌套表格，但要注意的是，被嵌套的表格必须放在td中。

<table border="1px">
    <caption style="text-align: left">信息表</caption>
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <td>zhangkai</td>
        <td>19</td>
    </tr>
    <tr>
        <th>2</th>
        <td>likai</td>
        <td>20</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>3</th>
        <td>wangkai</td>
        <td>
            <table border="1px">
                <caption>嵌套表格</caption>
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张开</td>
                </tr>
            </table>
        </td>
    </tr>
    </tfoot>
</table>

列表

列表的作用：将具有相似特征或者具有先后顺序的内容按照从上到下或者从左到右的方式进行排列展示。

列表的分类：

有序列表。
无序列表。
具有缩进功能的列表。

有序列表

olroder list嵌套li list item来构建有序列表。

ol标签的属性：

style="list-style: decimal",默认按照数字排序，默认从1开始，还有其他取值方式：
- list-style: decimal，数字。
- list-style: decimal-leading-zero，0开头的数字标记。(01, 02, 03, 等)。
- list-style: lower-roman，小写罗马数字(i, ii, iii, iv, v, 等)。
- list-style: upper-roman，大写罗马数字(I, II, III, IV, V, 等。)
- 更多参考：https://www.w3school.com.cn/cssref/pr_list-style-type.asp
start="1"，排序起始值，默认从1开始。

<ol>
    <li>吸烟</li>
    <li>喝酒</li>
    <li>烫头</li>
</ol>

无序列表

ulunorder list嵌套li，属性：

style="list-style: none"，无标记。
style="list-style: disc"，默认，标记是实心圆。
style="list-style: circle"，标记是空心圆。
style="list-style: square"，标记是实心方块。

<ol style="list-style: disc">
    <li>吸烟</li>
    <li>喝酒</li>
    <li>烫头</li>
</ol>

嵌套列表

可以在有序或者无序列表中进行嵌套列表，嵌套列表必须放在li标签中。

<ul>
    <li>河北
        <ul>
            <li>石家庄</li>
            <li>邯郸</li>
        </ul>
    </li>
    <li>河南
        <ul>
            <li>周口</li>
            <li>驻马店</li>
        </ul>
    </li>
</ul>

定义列表

定义列表的作用，用于要给一类事务的定义情景，比如对于专业名词的解释，或者图文混排的布局场景。

<dl>
    <dt>Python</dt>
    <dd>Python是世界上最好的语言！</dd>
    <dt>Java</dt>
    <dd>Java是世界上最好的语言！</dd>
</dl>

结构标记

什么是结构标记

结构标记是HTML5中，专门提出一组标记用来表示网页的结构，即做网页布局用。

目的是取代div布局，提升布局代码的语义性和可读性，本身也是块级元素、没有特殊属性和样式，就当成div来用，但要比div的布局可读性更强。

常用的结构标记有：

<header>头部信息：定义网页或者其他部分内容的页眉</header>
<nav>导航：定义网页的导航(链接)部分</nav>
<section>用于定义页面的主体内容</section>
<footer>底部信息：网站备案、解释说明，一般用户不太关心...</footer>
<aside>定义页面中左右边栏信息，也可以放到section中使用</aside>
<article>定义简短的内容，章、节信息，或者论坛帖子，用户评论、微博条目</article>

注意，如果以后出现无法被结构标记取代的模块，请继续使用div布局。

form表单

表单的作用：用于显示、收集数据、并提交数据到服务器。

完整的表单处理包含两部分：

实现数据交互的可见界面元素(前端)。如：文本框、密码、按钮
提交后的表单的数据处理(后端，服务器端)。

表单元素用form标签表示，属性：

action：数据提交的后端应用的url。如果该属性不写，默认提交给本页。
method，提交数据的方式，常用get(默认)/post。
enctype，指定数据编码的方式，有这些值：
- enctype="application/x-www-form-urlencoded"，默认值，可以将表单中的普通文本、特殊字符、标点符号都可以进行二进制编码后，进行提交，但注意，无法提交文件。
- enctype="multipart/form-data"，将表单中的文件进行二进制编码的，即专门用于提交文件的。但注意，普通文本、特殊字符、标点符号这些就不能提交了。
- enctype="text/plain"，将表单中的普通字符进行二进制编码后提交，但其他的就不能提交了。
name，定义表单名称，js操作时用的多。
id，元素的独有标识。

一般的，通过不同的标签或者按钮或者选择框来提交不同的数据类型。

<form action="提交路径" method="get">  <!-- action:地址 method: 提交方式 -->
    <input type="text" name="username" placeholder="用户名">  <!-- name值为key，将输入的值为value，在提交时发送到后台 -->
    <input type="password" name="username" placeholder="密码">  <!-- 将输入的值在前端以密文显示 -->
    <input type="submit" value="登录">  <!-- 默认带有提交事件的按钮 -->
    <input type="button" value="注册">  <!-- 生成的按钮没有默认提交事件 -->
    <input type="reset">  <!-- 点击后，将form表单内的各个输入框内容清空 -->
    <input type="date">  <!-- 日期输入框 -->
    <input type="datetime-local">  <!-- 日期时间输入框 -->
    <input type="file">  <!-- 上传文件 -->
    <input type="number">  <!-- 纯数字选择框 -->
    <input type="hidden">  <!-- 隐藏标签，在项目中验证中使用 -->
    <input disabled>  <!--禁用，该属性没有值 -->
    
    <br>
    单选选择框(多选一):
    <!-- 将来的数据是这样提交的 gender='1' -->
    <input type="radio" name="gender" value="1"> 男
    <input type="radio" name="gender" value="0"> 女
    
    <br>
    多选选择框：
    <!-- 将来的数据是这样提交的 hobby=['1', '2'] -->
    <input type="checkbox" name="hobby" value="1"> 吸烟
    <input type="checkbox" name="hobby" value="2"> 喝酒
    <input type="checkbox" name="hobby" value="3"> 烫头

    <br>
    长文本输入框：
    <!-- cols:输入框的宽度是30字符；rows:输入框的高度是10个字符；但在页面同样可以手动调整大小 -->
    <textarea name="desc" id="desc" cols="30" rows="10"></textarea>

    <br>
    单选下拉框：
    <select name="pub" id="pub">
        <option value="1">北京</option>
        <option value="2">河南</option>
        <option value="3">河北</option>
    </select>
    
    <br>
    单选下拉框：
    <!-- 将来的数据是这样提交的 city='1' -->
    <select name="city" id="xx">
        <option value="1">北京</option>
        <option value="2">河南</option>
        <option value="3">河北</option>
    </select>
    
    <br>
    多选下拉框：
    <!-- 按ctrl进行多选，将来的数据是这样提交的 citys=['1', '2'] -->
    <select name="citys" id="yy" multiple="multiple">  <!-- 当属性名和属性值一样的时候，可以直接简写为属性名即可 -->
        <option value="1">北京</option>
        <option value="2">河南</option>
        <option value="3">河北</option>
    </select>
</form>

注意，要提交数据的input框，必须指定name属性。

posted @ 2022-10-04 17:53 Einewhaw 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部