当前位置:   article > 正文

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

前端入门学习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标签的一些作用:

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

    例:<meta name = “keyword” content = “CSU,tyra”>

  3. 描述的引⼊

    例:<meta name = “description” content = “关于c学习的练习⽂档”>

  4. 作者引⼊

    例:<meta name = “author” content = “CSU”>

  5. viewport配置引⼊:

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


link标签: 引入外部资源

  1. href属性:链接⽂件路径
  2. rel属性:当前⽂档与链接⽂档的关系;stylesheet CSS样式表;icon图标
  3. 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标签:

  1. href属性:链接⽂件路径
  2. target属性:_self表示本页面跳转(默认),_blank打开新页面跳转

sub与sup标签: 实现富文本

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

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


三、行块标签

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

  1. src属性:资源路径
  2. title属性:鼠标悬停时的提示文本
  3. alt属性:图片不能正常显示时的提示文本(具有搜索权重)

表单

一、结构:

<form>
    <input>
    <select>
        <option></option>
        <option></option>
    </select>
    ......
</form>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

二、表单form:

  1. action属性:信息提交地址
  2. method:提交⽅式(get(默认):信息拼接在地址中,不安全;post:信息打包发送,安全)……

三、表单元素:

input标签:

  1. value属性:是指input代表的值,⽤于提交给后台
  2. name属性:提交的关键词
  3. 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
推荐阅读
相关标签
  

闽ICP备14008679号