新手小白自学录—HTML前端开发

最新推荐文章于 2024-06-07 08:21:52 发布

SYR-之之

最新推荐文章于 2024-06-07 08:21:52 发布

阅读量828

点赞数 16

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_55346657/article/details/138399254

版权

一、HTML第一个语言

<html>
    <head>  //浏览器的头部信息
            <title>我的第一个网页</title>  //标题
    </head>
    <body>
            欢迎来到我的学校
    </body>
</html>
注意事项

文件后缀名以 .html 结尾

在编写代码的过程中，< > 必须是英文状态下编写

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以 .html 结尾。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>

标签有两种表现形式：

双标签，例如：<html></html>

单标签，例如：<img>

HTML5的DOCTYPE声明

DOCTYPE是document type（文档类型）的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面，处于标签之前.

它是网页必备的组成部分，避免浏览器的怪异模式。
<!DOCTYPE html>

HTML5基本骨架

html标签

定义HTML文档，这个元素我们浏览器看到后就明白这是一个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
<!DOCTYPE html>
<html>
</html>

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

body标签

body元素定义文档的主体。

body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等）

它会直接在页面中显示出来，也就是用户可以直观看到的内容
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

title标签

可定义文档的标题。

它显示在浏览器窗口的标题栏或状态栏上。

title 标签是 head 标签中唯一必须要包含的东西，就是说写head一定要写title。

title 的增加有利于SEO优化
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset = "utf-8"是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8.
<!DOCTPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>itbaizhan</title>
    </head>
    <body>
    </body>
</html>

标题介绍与应用

标题（Heading）是通过<h1>-<h6>标签进行定义的。

h1 定义最大的标题，<h6>定义最小的标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
生成 h1~h6 快捷键：h$*6

标题标签位置摆放

在标签中添加属性：align = "left | center | right" 默认居左

标签之段落、换行、水平线

段落标签：<p> </p>
<p>这是一个段落</p>
<p>这是另一个段落</p>
换行标签：
<p>如果您希望在不产生一个<br/>新段落的情况下进行换行</p>
水平线标签：<hr/>
<hr color="" width="" size="" align=""/>
属性：

color：设置水平线的颜色

width：设置水平线的长度

size：设置水平线的高度

align：设置水平线的对齐方式（默认居中），可取值：left | center | right

标签之图片

img 标签定义HTML页面中的图像
<img src="" alt="" title="" width="" height="">
注意事项

img 是单标签，不需要进行闭合操作

属性：

src：路径（图片地址与名字）

alt：规定图像的替代文本

width：规定图像的长度

height：规定图像的高度

title：鼠标悬停在图片上给予提示

图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址
E:\DAGENGREN\1.jpg
<img src="E:\DAGENGREN\1.jpg">
相对路径

两者相对关系，两者在同一路径下可以直接访问

子父关系：/

父级关系：../

同级关系：./（可以省略）

网络路径

具体的网络地址：xxx
<img src="xxx">

标签之超文本链接

HTML使用标签<a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="url">链接文本</a>
超链接属性

在标签 <a> 中使用了 href 属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

一个未访问的链接显示为蓝色字体并带有下划线

访问过的链接显示为紫色并带有下划线

点击链接时，链接显示为红色并带有下划线

标签之文本

常用文本标签

列表标签之有序列表

有序列表

有序列表时一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
    <li>码学堂</li>
    <li>程序员</li>
</ol>
type属性

ol 的属性type拥有的选项

有序列表嵌套

列表是可以进行嵌套的
<ol>
    <li>尚学堂</li>
    <li>
        <ol>
            <li>阿里</li>
            <li>京东</li>
        </ol>
    </li>
    <li>百战程序员</li>
</ol>

列表标签之有序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圈圈）进行标记

无序列表始于 <ul>标签。每个列表项始于 <li> 标签
<ul>
    <li>尚学堂</li>
    <li>百战程序员</li>
</ul>
type属性

无序列表嵌套

列表是可以进行嵌套的
<ul>
    <li>尚学堂</li>
    <li>
        <ul>
            <li>阿里</li>
            <li>京东</li>
        </ul>
    </li>
    <li>百战程序员</li>
</ul>
常见应用场景

无序的列表效果

导航效果

快捷键

快速生成ul+li的布局：ul>li*3（数字根据自己的需要的 li 数量来修改）

标签之表格

表格标签

表格：<table>

行：<tr>

单元格（列）：<td>
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
快捷键

快速生成表格结构：table>tr*2td{单元格}

表格属性

border：设置表格的边框

width：设置表格的长度

height：设置表格的高度

表格单元格合并

水平合并：colspan （保留左边，删除右边）

垂直合并：rowspan （保留上边，删除下边）

<table border="3" width="500px" height="200px">
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td>单元格3</td>
         <td>单元格4</td>
         <td>单元格5</td>
     </tr>
     <tr>
         <td colspan="2">单元格6 单元格7</td>
         <td rowspan="3">单元格8单元格13单元格18</td>
         <td>单元格9</td>
         <td>单元格10</td>
     </tr>
     <tr>
         <td>单元格11</td>
         <td>单元格12</td>
         <td>单元格14</td>
         <td rowspan="2">单元格15单元格20</td>
     </tr>
     <tr>
         <td colspan="2" rowspan="2">单元格16,17,21,22</td>
         <td>单元格19</td>
     </tr>
     <tr>
         <td>单元格23</td>
         <td>单元格24</td>
         <td>单元格25</td>
     </tr>
 </table>

输出到的表格

From表单

用户输入，让网站具有交互性

表单在web网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件
<from action="url" method="get|post" name="myform"></from>
属性说明

action：服务器地址

name：表单名称

method中Get和Post的区别

数据提交方式，get把提交的数据 url 可以看到，post看不到

get一般用于提交少量数据，post用来提交大量数据

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

表单标签

表单域

表单按钮
<from>
    <input type="text">
    <input type="submit">
</from>

表单元素

文本框

文本域通过<input type="text">标签设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
<from>
    First name：<input type="text" name="fristname">
    <br/>
    Last name：<input type="text" name="lastname">
</from>
密码框

密码字段通过标签<input type="password">来定义
<from>
    password：<input type="password" name="pwd">
</from>
温馨提示

密码字段字符不会明文显示，而是以星号或圆点替代

提交按钮
<from name="input" action="url" method="get">
    Username：<input type="text" name="user">
    <input type="submit" value="Submit">
</from>