html基础

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

2 篇文章

订阅专栏

#HTML基础
1、什么是HTML？hyper text markup language–超文本语言核心是：标记
2、HTML是构成web页面的很重要的基础，相对于普通文本文件，可以让浏览器渲染出漂亮的效果
font标记：
<font color="red‘’>欢迎来到蜗牛学院学习牛逼的技术！
1、所有的HTML标记（标签，tag）均以尖括号包裹，没有其他
2、都可以自带属性和属性值。属性和值需要有正确的逻辑关系，不能乱写
3、任何一个属性后面的值必须使用双引号包裹
4、所有标签必须使用 / 结束，标记分双标记和单标记，比如是双标记，以结束，比如
是单标记，以 />结束即可
5、以上规则适用于所有HTML标记
6、HTML标记不支持回车换行，请使用进行回车换行
7、bold italic underline

构成一个网页的核心要素
1、文字 <font=>
崔鑫，你要加油好好学，花了几万块钱呢！！！
粗体内容
斜体内容
下划线内容
2、图片 <img src=>
图片的路径：
绝对路径：以HTTP或HTTPS等开头的URL地址

相对路径：相对于当前HTML文件所在的目录的层次关系来寻找的路径，使用 …/ 表示上级目录，
./ 或不写表示当前目录

title=“这是图片” 提示 broder=“1” 边框
URL：unified resource locator 统一资源定位符
像素：pixel px 图片的高度或宽度
3、超链接 <a href=>
湖南石化职院
在新窗口或标签页打开超链接页面 <target=“blank”>
空格表示
注释
4、表单
页面的排版布局
form action 内容提交到哪里
method 有两个值get和post
get是获取信息时候的方式打开一个页面
post是提交数据信息的方式登录，注册，上传
文本，密码，按钮，单选，复选：input type
下拉框：select
5、表格：通过每一行，每一列，每一格，将需要展现的内容更合理进行排列
DIV层：比表格在排版布局上更灵活
1）用于网页排版
2）用于展现数据

用于整张表格的样式设计 tablerow 表格的行，一行对应一个标记

table date 表格的单元格（列），一个单元格对应一个

标记

表头列 align 水平对齐 left 左 right 右 center 居中 vlign 垂直对齐 top 顶部 middle 中间 bottom 底部属性背景颜色 bgcolor 背景图 background 计算机系统颜色表示 1）颜色的英文单词 red green....... 2）以RGB颜色码表示 ##FF9900 宽度 width 高度 hight 边框 border 单元格内边距（设置单元格之间的距离） cellpadding 单元格外边距（设置单元格和内容的距离） cellspacing 合并行 colspan 合并列 rowspan 次方 sup 默认情况下，单元格的宽度是随着内容的增加而增加，单元格的宽度增加，整个表格的宽度也同步增加默认情况下，一个单元格的宽度增加，其他对应这一列的宽度也会同步增加，一个单元格的高度增加，会让当前所有单元格的高度增加分割线表示

（字符后在下，字符前在上） web前端开发工具 1、记事本系列工具：记事本，ultraedit,notepad++.editplus 2、webstorm,vscode 3、hbuilder，sublim text 开源：开放源代码，open source 英文字母：ISO-8859-1 ASCⅡ 中文汉字：GB2312（简体）GBK（简体繁体）GB18030（超大字库）全球文字：UTF-8 头部：主要用于定义当前页面的各类配置信息，如标题、样式、描述等信息正文：主要用于展示当前页面的各种内容，如文字、图片、超链接、表格、表单等

网页的实现步骤
1、由美工人员进行界面设计
2、分析页面的元素和结构
3、根据分析结果绘制线框图
4、利用布局实现线框图的线条
5、填充网页布居中的内容
6、设置内容格式并进行微调
7、对页面进行测试优化并调整

1 系统架构
b(浏览器)/s(服务器)架构
规范
使用方便
本身实现成本低
c(客户端)/s(服务器)架构
2 网页内容包含
文字图片超链接视频等内容
3 什么是HTML？
HTML是超文本标记语言
超文本：文字+图片+音视+超链接
标记：浏览器根据已定义好的某一标签来显示对应的内容
语言：一门计算机语言
4 web前端三项技术
HTML
CSS 设置元素的属性样式
js 让部分元素具有动态效果
5 文件拓展名
win使用文件拓展名来区别文件的类型
6 web开发工具
IDE工具：快捷的开发效率，语法提示，语法高亮
7 注释
快捷键CTRL+/
8 标签
HTML标签是由尖括号包围的关键词，比如
HTML标签一般是成对出现的，比如和；
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
但也有些标签是单标签或者自关闭标签如：
等，
单标签就固定的那么几个，数量不多。
文字 font
段落 p
换行 br
分割线 hr（字符前分割线在上，字符后分割线在下）
h系列，h1到h6从字母的大小粗细依次递减，h1最大，h6最小

湖南石油化工职业技术学院哈喽，宝贝
哈喽，Kitty
虹猫蓝兔七侠传

	<!-- h系列，h1到h6从字母的大小粗细依次递减，h1最大，h6最小 -->
	<h1>虹猫蓝兔七侠传</h1>
	<h2>虹猫蓝兔七侠传</h2>
	<h3>虹猫蓝兔七侠传</h3>
	<h4>虹猫蓝兔七侠传</h4>
	<h5>虹猫蓝兔七侠传</h5>
	<h6>虹猫蓝兔七侠传</h6>
	
	<!-- p标签：段落标签 -->
	<p>念奴娇</p>
	<p>赤壁怀古</p>
	<p>易于风雨便化龙</p>
	
</body>

第二天
文本标签
粗体内容
斜体内容
下划线内容
10 img
src属性，放置图片地址
相对路径
绝对路径
src可以存放本地图片的地址
width 宽度
heigth 高度

11 超链接

body标签
背景颜色 bgcolor
背景图像 background