html 骨架搭建方法

罗芳斌@

已于 2023-07-09 14:07:01 修改

阅读量323

点赞数 1

文章标签： html 前端

于 2023-07-09 13:52:40 首次发布

本文链接：https://blog.csdn.net/m0_72312191/article/details/131621810

版权

一、什么是HTML？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一

简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

二、HTML的作用

用来开发网页

三、网页的组成部分

网页由HTML+CSS+js组成

HTML:网页的骨架
CSS：网页的颜色
js：网页的动作

四、工具介绍

python开发推荐推荐工具pycharm

网站开发推荐工具vscode

五、结构介绍

1. 生成结构

vscode会自动帮我们生成html结构

shift + ! 然后回车

2. 结构详情介绍

html由标签和属性构成。
标签：长在尖角号后面的第一个单词就是标签
属性：长在标签后面的并且用空格隔开的，称作属性
结构标签介绍

<!DOCTYPE html>
<html lang="en">
<!-- head包裹的称为头部区域 -->
<head>
<!-- 网页采用utf-8的编码格式 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
</head>
<!-- body包裹的称为内容区域 -->
<body>
</body>
</html>

四、网页中常见的标签

1. 标题标签

h1标签

h2标签

h3标签

h4标签

h5标签

h6标签

代码演示：

<body>
  <h1>hello word</h1>
  <h2>hello word</h2>
  <h3>hello word</h3>
  <h4>hello word</h4>
  <h5>hello word</h5>
  <h6>hello word</h6>
</body>

2. 段落标签

一般用来写文章段落

p标签

<body>
  <p>
     这是一段优美的文章
  </p>
</body>

3. 强调标签

em标签：

作用：倾斜

b标签：

作用：加粗

代码演示：

<body>
  你们真<em>帅</em>
  你们真<b>帅</b>
</body>

4. 换行标签

br标签

代码演示：

<body>
  窗前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡
</body>

5. hr标签

hr标签

作用：标签变成分割线

代码演示：

<body>
  你好呀
  <hr>
  哈哈
</body>

6. div标签

div标签是用来布局的，并没有语义，只是一个区块

<body>
  <div>
    这是个盒子
  </div>
</html>

7. span标签

没有语义，一般用来包裹文字,让文字更好被选中。

<body>
    <span>这是个盒子</span>
</html>

8. img标签(图片标签)

作用：插入图片
属性

src: 引入图片路径

alt: 对图片的描述

height: 设置图片的高

width: 设置图片的宽度

代码演示：

// 可以链接引入
<img src="https://image.baidu.com/search/detail?
ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=csdn&step_word=&ie=u
tf8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefi
ned&cs=3710574112,2880096239&os=1416383172,4248936337&simid=3710574112,28800
96239&pn=2&rn=1&di=7214885350303334401&ln=1613&fr=&fmq=1684939880586_R&fm=&i
c=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face
=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https
%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%25
2F2021%252F1228%252F42dd5c8ej00r4t6c6000ld200u000iug00u000iu.jpg%26thumbnail
%3D660x2147483647%26quality%3D80%26type%3Djpg&rpstart=0&rpnum=0&adpicid=0&no
jc=undefined&dyTabStr=MCw2LDEsNCw1LDMsMiw3LDgsOQ%3D%3D" alt="">
// 也可以本地引入
<img src="./图片.png" alt="">

9. a标签

作用:点击跳转到另一个网页
href：指定访问资源的URL
target:指定打开资源的方式

_self：默认值，在当前页面打开

_blank：在空白页面打开

代码示例：

<body>
  <a href="https://baidu.com">点击当前页面跳转到百度</a>
  <a href="https://baidu.com" target="_blank">点击重新打开页面跳转到百度</a>
</body>

10. 列表标签

有序列表 ol li

<body>
  <ol>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ol>
</body>

无序列表 ul li

<body>
  <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</body>

11. 表单标签

在网页中主要负责数据采集功能

表单项(元素)：不同类型的input元素、下拉列表、文本域等

input 标签

type属性：

text: 默认值、定义单行输入字段

<body>
  <input type="text">
</body>

password：定义密码字段

<body>
  <input type="password">
</body>

radio：定义单选框

<!--单选框-->
<!--想要多个单选按钮互斥，需要把他们的name设为一样的-->
<!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分
是男是女-->
<body>
  <input type="radio" name="gender" value="1" id="male">
  <label >男</label>
  <input type="radio" name="gender" value="2" id="female">
  <label >女</label>

</body>

checkbox：复选框

<body>
  <input type="checkbox" name="hobby" value="1">旅游
  <input type="checkbox" name="hobby" value="2">电影
  <input type="checkbox" name="hobby" value="3">阅读

</body>

button: 按钮

<!--按钮-->
  <input type="button" value="一个普通按钮">
  <button>一个普通按钮的第二个写法</button>

reset: 重置会将表单的数据清楚

<!--重置按钮-->
<input type="reset" value="重置">

submit：提交按钮会把表单数据发送到服务器

<!--注册按钮-->
<input type="submit" value="注册">

file：会将头像文件上传

<!--上传文件-->
<input type="file"><br>

select :定义下拉列表，option定义列表项

body>
  <
    >
    <option value="1">红色</option>
    <option value="2">绿色</option>
    <option value="3">黄色</option>
    </select>
</body>

textarea ：文本域

<body>
  <textarea></textarea>
</body>

form ：表单标签

action:请求地址规定当提交表单时向何处发送表单数据表单项数据要想被提交，必须指定其 name属性。

method:请求方式

post：浏览器会将数据放到http请求消息体中。长度无限制

get：默认值浏览器会将数据直接附在表单的action URL之后。长度有限制

<body>
  <form action="#" method="post">
  </form>
</body>

罗芳斌@

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

html 骨架搭建方法

一、什么是HTML？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的 文档格式统一

简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

二、HTML的作用

用来开发网页

三、网页的组成部分

网页由HTML+CSS+js组成

HTML:网页的骨架

CSS：网页的颜色

js：网页的动作

四、工具介绍

python开发推荐推荐工具pycharm

网站开发推荐工具vscode

五、结构介绍

1. 生成结构

vscode会自动帮我们生成html结构

2. 结构详情介绍

html由标签和属性构成。

标签：长在尖角号后面的第一个单词就是标签

属性：长在标签后面的并且用空格隔开的，称作 属性

结构标签介绍

四、网页中常见的标签

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一

属性：长在标签后面的并且用空格隔开的，称作属性