୯Aliza୬

博客园 首页 新随笔 联系 订阅 管理
  3 随笔 :: 0 文章 :: 0 评论 :: 103 阅读

本笔记根据B站up主“黑马前端”的视频(BV14J4114768)配套食用

HTML简介(p3)

了解网页的基本组成
什么是HTML
说出常用的浏览器
能够说出Web标准的三大组成部分

网页的基本概念(p4)

HTML 超文本标记语言(Hyper Text Markup Languague)用来描述网页的一种语言,是标记语。(却别与编程语言)。
超文本 = 超链接+多元素

每一个网页就是一个html文件,每个网站都拥有多个网页。

常用浏览器+其内核(p5)

常用浏览器 Firefox,Chrome,Safari,Opera,IE,Edge

浏览器内核:负责读取网页内容,整理讯息,计算网页的显示方式兵器显示界面

Web标准(p6)

Web 标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

为什么需要Web标准

浏览器不同,页面或者排版有差异,WEB标准可以便利读者使用。

标准构成

结构:网页元素进行整理分类 html
表现: 排版梅花,外观样式 CSS
行为: 交互 javascript

html 标签(上) (p7)

学习主要内容

书写规范
HTML 骨架标签
开发工具
常用标签
注释+特殊字符

<html>
    <head></head>
</html>
//并列关系,一般来说标签都是双标签,但也有单标签
<br />
//单标签

一些基本标签的意义以及html骨架(p8)(p9)

<html> 
    <head>
        <title>页面标签名
        </title>
    </head>
    <body>页面内容</body>
</html>

VSCode工具创建页面(p10)

主用VSCode,一些快捷键:
创建文件为html文件后,可以在头位置写一个!符来快速构建html文件框架(即上图的html编码)
Ctrl + +/-可以放大缩小视图
可以通过左导航栏的对应文件右键->从文件夹中打开

vscode插件的安装和使用(p11)

新增标签(在使用vscode时自动生成框架(!)出现的几个tag)(p11)

采用最新的html版本来显示网页 当前文档的显示语言,en为英文网页。zh-CN定义语言为中文,和en对立,但无论如何定义,中英文都可以同步输入,对某些浏览器有作用,可以让浏览器判断需不需要翻译。 UTF-8称为万国码,有这一句话就可以显示大部分的字符,如果不写有可能出现字符的乱码。

HTML常用标签(p12)

根据标签的语义,在核实的地方给一个最为合理的标签,可以使得页面结构更清晰,是标题可以给标题标签,需要段落就给与一个段落标签。

标题标签:(p13)

-

双标签,相当于word的多级标题,标题标签逐级递减。 > 特点:每个标题都独占一行且字体增大加粗

段落标签:(p14)(p15)(p16)

**双标签** 使用段落标签才能在浏览器中把文字分段
**单标签** 强制换行:页面本身只会在写满一行文字才会换行,但这个单标签可以强制换行

基础标签

为文字设置粗体斜体,下划线,与md文件相似,但通过标签来确立

标签名 意义 是否双标签(T:YES)
"strong/b" 字体加粗 T
"em/i" 字体倾斜 T
"del/s" 删除线 T
"ins/u" 下划线 T

表格中所有的前一个标签的强调性更强。

<div><span>标签

两个标签没有语义,更多属于一个器皿(视频成为盒子),用于装内容。

<div>

可以看作一个大盒子,这个盒子单独占一行,但对列没有要求

<span>

看作小盒子,也是单独占一行

图像标签和路径(⭐)

<img>

用于定义html页面中的图像。

补充:在vscode使用叹号+tab无法唤出模板

(解决方式)[https://blog.csdn.net/qq_52276628/article/details/125688809] 引用该文章。这个问题应该是大部分新版本的通病,而且大多数都是文中第三个问题。

html 常用案例:体育新闻案例(略)(p16)

文本格式化标签(p17)

基础标签

为文字设置粗体斜体,下划线,与md文件相似,但通过标签来确立

标签名 意义 是否双标签(T:YES)
"strong/b" 字体加粗 T
"em/i" 字体倾斜 T
"del/s" 删除线 T
"ins/u" 下划线 T

表格中所有的前一个标签的强调性更强。

<div><span>标签

两个标签没有语义,更多属于一个器皿(视频成为盒子),用于装内容。

<div>

可以看作一个大盒子,这个盒子单独占一行,但对列没有要求

<span>

看作小盒子,也是单独占一行

图像标签和路径(⭐)

<img>

用于定义html页面中的图像。

<img src="URL" alt="character">

当图片无法显示时,alt标签中的字符内容可以替换图片显示

<img src="URL" title="character">

鼠标经过图象时,会在鼠标旁边标注title标签中的字符

<img src="URL" alt="character" width="500" highth="500" border="100">

对于图片的高度宽度进行修改。但一般来说只改高或宽一个属性,再用等比例缩放修改图像。(highth,width)
图片的边框border的粗细。用数据修改(这三个属性单位都为像素)

总结

以上给予的附加标签,alt,title,highth,width,border,都必须在标签img之后,但这几个属性本身没有优先。src必须存在,且放在img之后,属性之前

路径

目录文件夹和根目录

图片等文件放在同一个文件夹中才能便于管理,所以出现的目录文件夹和根目录的讲究
目录文件夹就是普通文件夹,只是所有的素材都按一定顺序保存在此,根目录就是打开目录文件夹的第一层

路径

相对路径:以图片相对于html页面的位置为参考

名称 符号 说明
同一级路径
上一级路径 ../ 上一级路径指的是:包裹这个html文件的上一个文件中有图片并使用他
下一级路径 / 与上一级相反

和电脑命操作方式相似

绝对路径
与相对路径区分,用\,以盘符为开头。或者以http在网上拿取网站

超链接标签(p28)

语法格式

<a href="跳转目标" target="c=窗口的弹出方式">文本或图像</a>

a = archor 锚

属性(target="——") 作用
href 指定连接目标的url地址,使该标签有超链接的功能通过使用不同的内(使用herf="#名字",在要被转到的位置的标签给与一个id="名字")外部标签来选择搜索外连接还是调到当前页面的指定位置
target="_" 页面的打开方式,其中 _self 为默认值,_blank 为在新窗口打开方式

示例:

<p>
    <a herf="#live">
        点击这个按钮:
    </a>
</p>

<h1 id="live">
    会直达这个标签所在的位置
</h2>

注释标签!!!

格式

<!-- 注释 -->

快捷键 crtl + /
注释有多重要不用多说了

特殊字符

特殊字符 字符代码
(空格) &nbsp;
< &lt;
> &gt;
& &amp;
(人民币符) &yen;
(版权符) &copy;
(注册商标) &reg;
(摄氏度符) &deg;
正负号 &plusmn;
* &times;
/ &divide;
平方 &sup2;
立方 &sup3;

用法,在文段中需要特殊字符时直接输入以上字符代码

html标签下(p31-35)

表格标签

    <table>
        <tr>
            <th>第一号数据</th>
            <th>第二号数据</th>
            <th>第三号数据</th>
        </tr>
        <tr>
            <td>第四号数据</td>
            <td>第五号数据</td>
            <td>第五号数据</td>
        </tr>
    </table>
</body>
</html>
<!-- 表格的基本框架,每个tr占1行,这个行全是td/th,且th是表头标签,这个标签内的文字居中加粗显示 -->

表格属性:一般通过css设置,但单词作为关键字,html和css都会使用(p36)

属性 选择 用法
aligh left,center,right 表格对于页面对齐方式,写在table标签内
border 1或(void) 是否给表格写入边框
cellpadding 像素值 规定边框与文字间的距离
cellspacing 像素值 边框间空隙大小
width/highth 像素值 同图片

表格结构标签(p37)

<thead>
    <!-- 表格头部区域 -->
<tbody>
    <!-- 表格身体区域 -->

合并单元格

  1. 合并单元格方式
    跨行合并: rowspan=“合并单元格数”
    跨列合并:colspan=“合并单元格数”
  2. 找到目标单元格,写上合并方式 = 合并的单元格数量。

列表标签

列表:整齐,整洁

无序列表(重点)

<body>
<ul>
    <li>榴莲</li>
    <li>榴莲</li>
    <li>罐头</li>

</ul>
</body>

注:ul的下一级标签只能有li标签,但li标签的下一级标签没有特殊要求

有序列表

<ol> 和ul相似;要求也相似,li。

自定义列表

<dl>父类</dl>
<dd>子1</dd>
<dd>子2</dd>
<dd>子3</dd>

表单标签

目的:收集用户信息
用户填写的内容:表单控件

表单域

在HTML标签中,

标签用于定于表单域,以实现用户信息的收集与传递

action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式,其取值为get或者post
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域

表单元素(p49)

input

<input type="属性值">

<!-- 示例 -->
<form>
用户名:<input type="text" value="输入用户名">
密码:<input type="password" maxlength="数字">
<!-- password框密码不可见 -->
性别:男<input type="radio" name="sex" value="男"><input type="radio" name="sex"
value="女"> 
<!-- radio 单选按钮(圆形),实现多选 需要单选时,属性name="名字",锁定一个-->
爱好:吃饭<input type="checkbox">
<!-- checkbox 复选(矩形) 可以实现多选 -->
睡觉<input type="checkbox" 
checked="checked">
<!-- value属性:上交文本框中的内容 -->
<!-- checked属性:进入后默认勾选 -->
<!-- maxlength=“正整数”规定输入字段中的字符的最大长度 -->
</form>

label标签

<label for="text">用户名<label>
<input type="text" id="text">

CSS学习

选择器+多条声明。

<head>
     <style>
     /*<!--只能再style里面写CSS--> */
        p {/* 要对什么标签进行修改 */
            color:red;
            font-size:13px;
        }
    </style>
</head>
<!-- 这样设置会使得p标签内的字体变成红色 -->

CSS一般都在里设置

CSS 代码风格

选择器(p)要和括号有一个空格
属性每个写完加英文分号+每个属性独占一行

选择器的作用(p65)

根据不同需求把不同的标签选出来

类选择器(最常用选择器)

可以选择某几个标签进行改变,选择的标签要附加一个class="类名"的属性来改变属性

<style>
.red {
    /* 类名red */
    color: red;
}
</style>
<!-- 样式点定义,结构类调用 -->

注意:

  • 不要使用一些已经存在的系统标签名作为类名
  • 长名字可以用中横线来作为命名字符
  • 不要使用纯数字 中文等命名

CSS基础选择器案例

练习目标:

类选择器的使用
div的使用

<head>
<style>
    .red {
        width:100px;
        height:100px;
        background-color:black;
        color:red;
    }
    .font35{
        font-size:35px;
    }
</style>
</head>

<body>
<div class="red font35">114514</div>
<!-- 多类名的知识:类名都写再class内,名字间有空格 -->
</body>

类选择器-多类名

我们可以给一个标签指定多个类名

多类名使用方式
好处

注意

  • class里面类与类之间要分开一个空格的位置

类选择器 id选择器

id选择器可以为标有特定id选择器HTML元素的指定特定的样式
样式#定义,调用id
id选择器只能调用一次,一旦调用了首次,下面就无法再调用

#id{
    属性1:属性值;
}

id选择器一般用再页面的唯一性元素中,常与JavaScript共同使用

通配符选择器

使用*定义,他表示选取页面中的所有元素,名字只有 *,因为如果写出这个选择器的话,所有的网页都会带有这种属性

CSS字体属性

字体风格

P{font-family:'微软雅黑',Times,serif};

即利用font-family属性改变字体,可以写多个字体跟在font-family后面,系统就会检查字体第一个字体是否存在,不存在检查第二个字体。以此类推

字体大小(已学,就是font-size)

字体粗细(font-weight)(p75)

normal:正常的字体
bold:粗体
bolder:特粗体
lighter:细体
number(0-∞):400->normal;700->bold;

一般来说使用number来提供文字粗细,而且数字后面不要单位。

posted on   ୯Aliza୬  阅读(39)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示