前端学习——HTML入门

tyra_y

已于 2022-05-02 23:54:15 修改

阅读量653

点赞数

分类专栏：前端学习笔记文章标签： html5 html 前端学习

于 2022-04-26 21:47:54 首次发布

本文链接：https://blog.csdn.net/qq_45727209/article/details/124438003

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本结构

<html>
    <head>
        <!-- 引入与网页相关的描述及配置信息 -->
    </head>
    <body>
        <!-- 正文部分 -->
    </body>
</html>

HTML文件的结构主要有html、head、body三部分构成，现给出一个无正文内容的html文件样例：

在这里插入图片描述

（以VsCode为例，输入"!"再按"enter"键可打出以上内容）

title标签：
此标签是网页标题标签，将标题内容输入此处。

meta标签的一些作用：

信息引入说明
keyword关键词引入(有利于网络爬虫，对网页进行检索)

例：<meta name = “keyword” content = “CSU,tyra”>
描述的引⼊

例：<meta name = “description” content = “关于c学习的练习⽂档”>
作者引⼊

例：<meta name = “author” content = “CSU”>
viewport配置引⼊：

例：<meta name = “viewport” content = “width=device-width, initial-scale=1.0”>
width视⼝宽度, height视⼝⾼度, initial-scale初始缩放⽐例, maximum-scale最⼤缩放⽐例, nimimum-scales最⼩缩放⽐例, user-scalable是否允许⽤户缩放

link标签： 引入外部资源

href属性：链接⽂件路径
rel属性：当前⽂档与链接⽂档的关系；stylesheet CSS样式表；icon图标
type:⽬标⽂件类型

例：<link rel = “style sheet” href = “css/now.css”>

style标签： 内部样式表

script标签： 引入js文件

例： <script src = “js/now.js”>

HTML标签

一、块标签

块级标签独占一行，默认宽度占满父级，高度为0，自己内容撑开高度

div,h1~h6,p,ul(无序列表),ol（有序列表）,li（列表项）

对于h1~h6标签：

一个页面只允许写一次h1标签
h2标签不要超过8个
只有h1,h2,h3是具有搜索权重的

一些HTML5新标签：

article(文章标签)、section（区域，代替div）、aside（侧边栏）、nav（导航）、header（头部信息）、footer（底部信息）

二、行标签

行标签同排序跟显示，遇到父级边界换行；不支持宽高，内容撑开宽高；不支持上下外边距（margin）；不正常显示上下内边距（padding）；换行被解析

span,a,sub,sup,i（倾斜）,b（加粗）,em（倾斜）,strong（加粗）

对于a标签：

href属性：链接⽂件路径
target属性：_self表示本页面跳转（默认），_blank打开新页面跳转

sub与sup标签： 实现富文本

例：<p>O<sub>2</sub></p>

HTML5新标签：
em,strong为HTML5新标签，具有一定的搜索权重，而i,b不具有

三、行块标签

行块标签同排序跟显示，遇到⽗级边界换⾏；没有宽⾼的时候内容撑开宽⾼；换⾏被解析
对于img：（若只给高度或宽度，会等比例变化）

src属性：资源路径
title属性：鼠标悬停时的提示文本
alt属性：图片不能正常显示时的提示文本（具有搜索权重）

表单

一、结构：

<form>
    <input>
    <select>
        <option></option>
        <option></option>
    </select>
    ......
</form>

二、表单form：

action属性:信息提交地址
method：提交⽅式（get（默认）：信息拼接在地址中，不安全；post：信息打包发送，安全）……

三、表单元素：

input标签：

value属性:是指input代表的值，⽤于提交给后台
name属性：提交的关键词
type属性：其属性值有——

text⽂本框（placeholder：提示⽂本），

password密码框（required代表必须写内容），

radio单选框(同⼀个name属性才做单选，checked代表默认选项)，

checkbox复选框，button按钮，submit提交框，

reset重置，file⽂件，

hidden隐藏（⽤于收集当前所使⽤的设备的信息）

select/option下拉选择框:

select:

multiple属性：多选下拉框
size属性：下拉框所展示做多选项数量

例：

<select name=“sheng” multiple size="2">
    <option value=“湖南省”>湖南省</option>
    <option value=“湖北省”>湖北省</option>
    <option value=“湖北省”>江西省</option>
</select>