前端学习——HTML入门

基本结构

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

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>

二、表单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>

textarea多行文本域:

  • style属性:style=“resize:none”表示⽂本域大小不能调整
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tyra_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值