前端学习——HTML入门_前端入门学习html csdn

作者：Cpp五条 | 2024-05-27 04:33:19

踩

前端入门学习html csdn

基本结构

<html>
    <head>
        <!-- 引入与网页相关的描述及配置信息 -->
    </head>
    <body>
        <!-- 正文部分 -->
    </body>
</html>
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6
7
8

二、表单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>
1
2
3
4
5

textarea多行文本域：

style属性：style=“resize:none”表示⽂本域大小不能调整

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/629882