初学第三天--搞点前端的

最新推荐文章于 2024-09-02 10:49:37 发布

JF20230307

最新推荐文章于 2024-09-02 10:49:37 发布

阅读量32

点赞数

文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/JF20230307/article/details/129742634

版权

前端：网页设计、页面美化、逻辑交互，数据展现、前端服务器

前端三件套：HTML5 CSS JS

编程语言：数据结构/类型各种运算流程控制

# HTML的基本概念

H hyper 兴奋刺激超级/超越

T text 文本

M markup 标记 <> 语法

L language 语音

超文本标记语音，除了普通的文本之外，还有别的超越了文本的元素

比如：文本框按钮图片超链接表格下拉选择音频视频

# 开发环境

# 开发软件

记事本 notepad++ HBuilder vscode

# 测试软件

浏览器：谷歌 + 其他市场占有率比较高 adge 360极速版火狐

# HTML页面内容

# 注释

# 文本 / 字符串

# 标签（不区分大小写，一般都小写）

- 单标签 <标签名>

- 双标签 <标签名></标签名>

# 属性

<标签名属性名1="属性值1" 属性名2="属性值2"> </标签名>

# 查询网站

W3School W3C的中文版万维网联盟

https://www.w3school.com.cn/

菜鸟教程

https://www.runoob.com

# 页面架构 --index 索引页

<!doctype html> 告诉浏览器，以下的代码请用

<html> </html> 主体标签

<head> </head> 头部标签内容是给浏览器或者搜索引擎或者服务器看的

--固定格式需要

<title> 选项卡标题</title>

<body> </body> 身体标签内容是渲染给人看的

# 运行网页

1.单文件直接打开（右键--打开方式）

先使用浏览器浏览windows文件夹

2.使用web服务器打开

# 前端常见标签

# 字体标签 <font></font>

# 作用：设置某个区域的文本字体

# 属性：颜色 color 大小 size:1-7 字体类型 face

# 段落标签（独立占一整行，块级元素）

<p></P>

h1~h6 标题标签

<h1></h1> 最大字特别粗

<h6></h6> 最小字比较粗

<br> 单纯的换行

<hr> 换行的分割线

# 图片<img>

# 作用：承载图片 / 访问服务器

# 属性：src="路径"

width 宽 height 高

# 超链接 <a> </a> --中间可以加各种标签

# 作用：页面跳转/访问服务器

# 属性：href="页面路径"

- 如果本地路径。直接填相对路径

- 如果外网的网站，必须在网址前面加上协议http://

# 用户输入表单标签<input> 有多重形态

# 作用：在前后端交互时，用于收集用户输入的数据

# 属性：type，根基不同的属性值，展示不同元素

# type="text" 文本框 value="文本框内容" placeholder="在没有输入任何内容的情况下出现的文字"

# type="password" 密码框

# type="button" 按钮 value="按钮的名称"

# type="file" 文件选择器

# type="radio" 单选框圆点

# type="checkbox" 复选框打勾

# type="number" 文本框，只能输入数字

<input type="radio" name="sex" checked="checked">男 --checked="checked" 默认选该项

<input type="radio" name="sex">女 --name属性设置一致，单选框只选其中之一

# 下拉选择标签

<select></select> 下拉选择的框架

<option></option> 下拉选择的选项

# 表格

<thead></thead>--属性：border="1" 表格边框

cellspacing="0" 单元格缝隙

<tr></tr> 行标签 --属性：align="center" 居中对齐

<th></th> 表头中的单元格标签（居中并特别粗）

<td></td> 身体中的单元格标签(默认左对齐）

# 探索：文本域<input type="textarea" style="width:400px;height:80px;">

如何合并单元格、

在td标签中添加colspan=""，引号内填写相应的阿拉伯数字即可合并列。--向右合并

在td标签中添加rowspan=""，引号内填写相应的阿拉伯数字即可合并行。--向下合并

如何事先页面的空格

1、插入一个非间断空格，当需要插入多个空格时，请输入 或 代码。它们名为“空格占位符”，输入几个，就能在页面中显示几个空格。

2、插入不同宽度的空格。有多种字符实体可以让浏览器显示空格。

&ensp; -- “en空格”是根据字体排印学的计量单位命名，宽度是两个普通空格的宽度，

&emsp; -- “em空格”大概是四个普通空格的宽度。

JF20230307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学第三天--搞点前端的

前端
复制链接

扫一扫