当前位置: 首页 > article >正文

前端---初识HTML(前端三剑客)

1.HTML

先为大家介绍几个学习前端的网站:菜鸟教程,w3school,CSS

HTML:超文本标记语言

超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的.

形如:

1 <h3>我是三级标题</h3>

标签名 (body) 放到 < > 中

⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.

少数标签只有开始标签, 称为 "单标签".

开始标签和结束标签之间, 写的是标签的内容.

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

1.2HTML 文件基本结构

在VS中输入!后敲击回车,会自动生成HTML的基本结构

html 标签是整个 html ⽂件的根标签(最顶层标签)

head 标签中写⻚⾯的属性.

body 标签中写的是⻚⾯上显⽰的内容

title 标签中写的是⻚⾯的标题.

1.3简单HTML开发 

在body中写入:第一个HTML开发,然后ctrl+s保存,在文件中以浏览器打开

1.4HTML常见标签

1.4.1标题标签h1-h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
</body>
</html>

1.4.2段落标签p 

在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是h1标签</h1>
    <p>这是一个段落</p>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
</body>
</html>

在HTML中用于另起一行

在HTML中:

html 内容⾸尾处的换⾏, 空格均⽆效.

在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.

html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格

1.4.3换行标签br

 换行也可以使用br标签

br 是⼀个单标签(不需要结束标签)

br 标签不像 p 标签那样带有⼀个很⼤的空隙.

<br/> 是规范写法. 不建议写成 <br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    换行<br/>
    换行<br/>
    换行<br/>
    换行<br/>

</body>
</html>

1.4.4 图⽚标签: img

img 标签必须带有 src 属性. 表⽰图⽚的路径.

<img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" alt="">

 

其他的参数:

width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.

border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设

    <img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" width="500px" height="800px">

 

1.4.5 超链接: a

<a href="https://www.jd.com">京东</a>

 

点击后会跳转到京东 

href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.

target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开

链接的⼏种形式:

1.外部链接: href 引⽤其他⽹站的地址

<a href="http://www.baidu.com">百度</a>

2.内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.

在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html

<!-- 1.html -->

我是 1.html

<a href="2.html">点我跳转到 2.html</a>

<!-- 2.html -->

我是 2.html

<a href="1.html">点我跳转到 1.html</a>

3.空链接: 使⽤ # 在 href 中占位.

<a href="#">空链接</a>

1.4.6表格标签

table 标签: 表⽰整个表格

tr: 表⽰表格的⼀⾏

td: 表⽰⼀个单元格

thead: 表格的头部区域

tbody: 表格的主体区域.

 

表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)

border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺⼨.

注意, 这⼏个属性, vscode 都提⽰不出来

 

    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>   
    </table>

 1.4.7表单标签

表单域: 包含表单元素的区域. 重点是 form 标签

表单控件: 输⼊框, 提交按钮等. 重点是 input 标签

1.4.7.1 input标签

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等

name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀

value: input 中的默认值

checked: 默认被选中.(⽤于单选按钮和多选按钮)

1.4.7.2 from标签

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求

<form action="test.html">
 <input type="text" name="username">
 <input type="submit" value="提交">
</form>

action:将数据提交到那个界面

1.4.8 select 标签

下拉菜单

option 中定义 selected="selected" 表⽰默认选中

    <select>
    <option>北京</option>
    <option selected="selected">上海</option>
   </select>

1.4.9无语义标签div  /  span

真实业务一般都用这个

用于页面布局

div是下图的大盒子

span是下图的小盒子

在盒子中有许多元素

    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </div>

 

 


http://www.kler.cn/a/587920.html

相关文章:

  • ModelScope推理QwQ32B
  • 【QA】模板方法模式在Qt中有哪些应用?
  • 基于SSM+Vue+uniapp的科创微应用(可改为研学)小程序+LW示例
  • 离线资源的加密保护
  • 封装红黑树->mapset
  • 个人学习编程(3-16) leetcode刷题
  • generallseteter插件生成内容和数据库不一致
  • GPT 1-3(速通版)
  • 第36周:文献阅读
  • [oeasy]python074_ai辅助编程_水果程序_fruits_apple_banana_加法_python之禅
  • ssrf总结
  • Windows 上安装配置 Apache Tomcat 及Tomcat 与 JDK 版本对应
  • OpenAI定义的Agent新范式如何构建自动化系统
  • jsonl与json区别
  • 卷积神经网络(CNN)的主要架构
  • leetcode 75.颜色分类(荷兰国旗问题)
  • 【胶囊网络】完美复现Hinton论文99.23%
  • 社区版Uos20.9从源码编译QT5.15.2
  • 【商城实战(33)】解锁版本迭代与更新策略
  • 网络华为HCIA+HCIP网络基础