前端知识学习笔记-一（HTML）

strugglegirl

已于 2024-04-10 10:11:12 修改

阅读量970

点赞数 9

分类专栏：前端知识文章标签：前端学习笔记

于 2024-04-03 11:04:00 首次发布

本文链接：https://blog.csdn.net/strugglegirl/article/details/135133078

版权

前端知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、HTML5基本骨架

是 document type(文档类型)的缩写DOCTYPE html是声明HTML5，位于文档的最前面。他是网页必备的组成部分，避免浏览器的怪异模式

<!DOCTYPE html>

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

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
</html>

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

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
</html>

title标签
①可定义文档的标题
②它显示在浏览器窗口的标题栏或状态栏上。
③title 标签是 head 标签中唯一必须要求包含的东西，就是说写head一定要写title
④title的增加有利于SEO优化
SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <title>Title</title>
</head>
</html>

meta标签（单标签）
meta标签用来描述一个HTML网页文档的属性，关键词等，例如:charset="u-8” 是说当前使用的是ut-8 编码格式，在开发中我们经常会看到 u-8 ，或是gbk ，这些都是编码格式，通常使用un-8。

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
</html>

body标签
body 元素定义文档的主体
body 元素包含文档的所有内容 (比如文本、超链接、图像、表格和列表等等。)它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

二、其他标签

1、标题标签

标题标签由h1~h6定义，成对出现
HTML 标题标签只用于标题
不要仅仅是为了生成粗体或大号的文本而使用标题正确使用标题有益于SEO
应该将h1用作主标题(最重要的)，其后是h2(次重要的)，再其次是h3，以此类推

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
</body>
</html>

标题标签位置摆放
在标签中添加属性:aign=7eft I center I rght”默认居左(但align不推荐使用，一般用调整)

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">Hello World</h1>
<h2 align="left">Hello World</h2>
<h3 align="right">Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
</body>
</html>

2、段落、换行、水平线

段落由

标签定义

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">Hello World</h1>
<p>这是一个段落！</p>
</body>
</html>

换行由
/
定义(单标签)

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">Hello World</h1>
<p>这是一个段落！</p>
<p>这是一个<br/>段落！</p>
</body>
</html>

水平线由

标签定义

<hr color=" width="" size="" align=""/>

属性:
color: 设置水平线的颜色
width: 设置水平线的宽度
size:设置水平线的高度
align: 设置水平线的对齐方式(默认居中)，可取值left|right

3、图片标签

图片由标签来定义

 <img src="" alt="" title="" width="" height="">

属性：
src:路径 (图片地址与名字)
alt: 规定图像的替代文本
width: 规定图像的宽度
height: 规定图像的高度
title: 鼠标悬停在图片上给予提示

图片路径（src）：
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\itbaizhanCode 1.jpg
E:\itbaizhanCode\1.jpg

相对路径
两者相对关系，两者在同一路径下可以直接访问
子级关系: /
父级关系: …/
同级关系: ./(可省略)

网络路径
具体的网络地址: http://iwenwiki.com/api/newworld/images/n1.png

4、超文本链接

超文本用a标签
a标签中使用了 href 属性来描述链接的地址;
默认情况下，链接将以，以下形式出现在浏觉器中:
①一个未访问过的链援显示为蓝色字体并带有下划线
②访问过的链接显示为紫色并带有下划线
③点击链接时，链接显示为红色并带有下划线

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

5、文本标签

在这里插入图片描述

<!DOCTYPE html>  <!-- 这是HTML注释 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>我喜欢<em>巧克力</em></p>
<p>我喜欢<strong>巧克力</strong></p>
<p>我喜欢<em>巧克力</em>和<strong>巧克力</strong></p>
<b>巧克力<b>
<i>巧克力<i>
<del>巧克力<del>
<span>巧克力<span>
</body>
</html>

6、列表标签

有序列表
有序列表是一列项目，列表项目使用数字进行标记。有序列表始于标签。每个列表项始于ol标签

<ol>
    <li>巧克力</li>
    <li>牛奶糖</li>
</ol>

type属性
1 表示列表项目用数字标号 (1,2,3…
a表示列表项目用小写字母标号 (a,b,c…)
A表示列表项目用大写字母标号 (A,B,C…)
i表示列表项目用小写罗马数字标号 (i,ii,iii…)
I表示列表项目用大写罗马数字标号 (l,Il,lll…)

<ol Type="A">
    <li>巧克力</li>
    <li>牛奶糖</li>
    <li>士力架</li>
</ol>

有序列表嵌套
有序列表可以嵌套

<ol>
    <li>糖果</li>
    <ol>
        <li>巧克力</li>
        <li>牛奶糖</li>
        <li>士力架</li>
    </ol>
</ol>

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记无序列表始于ul 标签。每个列表项始于 li标签

<ul>
   <li>巧克力</li>
   <li>牛奶糖</li>
   <li>士力架</li>
</ul>

type属性
ul>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square小方块
none 不显示

<ul type="square">
   <li>巧克力</li>
   <li>牛奶糖</li>
   <li>士力架</li>
</ul>

无序列表嵌套

<ul>
    <li>糖果</li>
    <ul type="square">
        <li>巧克力</li>
        <li>牛奶糖</li>
        <li>士力架</li>
    </ul>
</ul>

7、表格标签

表格组成与特点：
行、列、单元格
单元格特点: 同行等高、同列等宽
表格标签：
表格标签: table
行标签:tr
表头标签：th
单元格(列)标签:td

<table>
    <tr>
        <th>糖果</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>巧克力</td>
        <td>100</td>
    </tr>
    <tr>
        <td>牛奶糖</td>
        <td>200</td>
    </tr>
</table>

表格常用属性（一般不用，一般通过CSS来实现）

border:设置表格的边框
width: 设置表格的宽度
height:设置表格的高度

<table border="1px" width="400" "height"="100">
    <tr>
        <th>糖果</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>巧克力</td>
        <td>100</td>
    </tr>
    <tr>
        <td>牛奶糖</td>
        <td>200</td>
    </tr>
</table>

表格单元格合并
水平合并:colspan（保留左边，删除右边）
垂直合并:rowspan （保留上边，删除下边）

<table border="1px" width="400" height="100">
    <tr>
        <th>类别</th>
        <th>品类</th>
         <th>进价</th>
        <th>售价</th>
    </tr>
    <tr>
        <td rowspan="3">糖果</td>
        <td>巧克力</td>
        <td colspan="2">100</td>
    </tr>
    <tr>
        <td>牛奶糖</td>
        <td>100</td>
        <td>200</td>
    </tr>
    <tr>
        <td>棉花糖</td>
        <td>100</td>
        <td>200</td>
    </tr>
</table>

</table>

8、表单标签

form
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件表单就是容器,它能够容纳各种各样的控件

属性说明
action服务器地址
class表单类名
method:数据提交方式
method中Get和Post的区别
get把提交的数据url可以看到，post看不到，get一般用于提交少量数据，post用来提交大量数据

 <form action="{% url 'myadmin_login' %}" method="post" class="layui-form" >

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

<form>
    <input type="text" name="username" placeholder="请输入">
    <input type="submit" value="提交">
</form>

表单元素
文本框
文本域通过input type="text”标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
    FirstName:<input type="text" name="firstname" placeholder="请输入"><br/>
    LastName:<input type="text" name="lastname" placeholder="请输入"><br/>
</form>

密码框
密码字段通过input type="password"来定义

<form>
    <input type="password" name="password" placeholder="请输入密码">
</form>

提交按钮
提交按钮可以用input type=submit,按钮也可用button标签

<form>
    <input type="text" name="text" placeholder="请输入内容">
    <input type="submit" value="保存">
    <button>清空</button>
</form>

9、块元素和行内元素（内联元素）

块级元素和内联元素区别
| 块元素| 行内元素 |
|--|--|
| | |

常见块级元素

div、 form、h1-h6、hr、p、table、 ul、等

常见内联元素

a、b、em、i、span、strong等

行内块级元素(特点:不换行、能够识别宽高)

button、img、input等

strugglegirl

关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录