web学习笔记之html

最新推荐文章于 2023-02-02 22:14:09 发布

Daydream Mr.

最新推荐文章于 2023-02-02 22:14:09 发布

阅读量300

点赞数 1

分类专栏： web 文章标签： html web

本文链接：https://blog.csdn.net/z498596750/article/details/52461102

版权

web 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

HTML简介：
-HyperText标记语言：超文本标记语言，网页语言
超文本：超出文本的范畴，使用HTML可以轻松实现这样的操作
标记：HTML所有的操作都是通过标记实现的，标记就是标签，<标签名称>
网页语言：
第一个HTML程序：
HTML的后缀是.html.htm
代码：这是我的<font size =“5”color =“red”>第一个程序！</ font>

HTML的规范（遵循）
1.一个html文件开始标签和结束标签<html> </ html>
2.HTML包含两部分内容
（1）的<head>设置相关信息</ HEAD>
（2）的<body>显示在页面上的内容都写在身体里</ BODY>
3.html的标签有开始标签，也要有结束标签
4.html的代码不区分大小写
5.有些标签没有结束标签，在标签内结束
比如换行<br/> <hr />

HTML的操作思想（理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值就可以实现容器内数据样式的变化。

HTML中常用的标签
1.文字标签
- <FONT> </ FONT>
- 属性：
size：文字的大小取值范围1-7，超出了7，默认还是7
颜色：文字颜色
两种表示方式：
英文单词：red green blue ...
使用十六进制数表示#ffffff：RGB
通过工具查询即可
2.注释标签
HTML的注释：<！ - 注释内容 - >
3.标题标签
<h1> </ h1> <h2> </ h2> ... <h6> </ h6>
从H1到H6，大小是依次变小，同时会自动换行
4.水平线标签
<HR />
属性：
尺寸：水平线的粗细取值范围1-7
颜色：颜色
代码：
<hr size =“5”color =“red”/>
5.特殊字符
想要在页面上显示这样的内容<html>：网页
需要对特殊字符进行转义
<＆lt;
>＆gt;
空格＆nbsp;
6.列表标签
比如显示这样的效果
传智播客
财务部
学工部
人事部
<DL> </ dl的>：表示列表范围
在DL里面<DT> </ DT>：上层内容
在DL里面<DD> </ DD>：下层内容
代码
<DL>
<DT>传智播客</ DT>
<DD>财务部</ DD>
<DD>学工部</ DD>
<DD>人事部</ DD>
</ DL>
想要在页面上显示这样的效果
1.财务部
2.学工部
3.人事部
一，财务部
湾学工部
角人事部
我。财务部
二，学工部
三，人事部
<OL> </ OL>：有序列表范围
属性类型：设置排序方式1（默认）AI
在醇标签里面<LI>具体内容</ LI>
代码
<OL>
<LI>财务部</ LI>
<LI>学工部</ LI>
<LI>人事部</ LI>
</醇>
想要在页面上显示这样的效果
特殊符号（方框）财务部
特殊符号（方框）学工部
<UL> </ UL>：表示无序列表的范围
属性：类型：空心圆圈，实心圆盘，实心方块正方形，默认盘
在UL标签里面<LI> </ LI>
代码
<UL>
<LI>财务部</ LI>
<LI>学工部</ LI>
</ UL>
7.图像标签
<img src =“图片的路径”/>
SRC：图片的路径
宽度：图片的宽度
高度：图片的高度
ALT：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容，因为某些浏览器不显示所以不常用
8.路径介绍
绝对路径：完整的路径
相对路径：一个文件相对于另一个文件的路径
1.HTML文件与图片在同一层目录下，直接写下该图片名称即可
2.图片在HTML文件的下层目录，直接写下层目录路径即可
3.图片在HTML文件的上层目录，直接写下上层目录路径即可，.. /表示上层目录
9.超链接标签：
链接资源：
<a href="link接到资源的路径“>显示在页面上的内容</a>
HREF：链接的资源的地址
目标：设置打开的方式，默认是当前页打开
_blank：在一个新窗口打开
_self：在当前页打开（默认打开方式）
当超链接不需要到任何的地址在HREF里面加＃
<a href="#">显示在页面上的内容</a>
定位资源：
如果想要定位资源：定义一个位置
<a name="top">顶部</a>
回到这个位置
<a href="#top">回到顶部</a>
10.原样输出标签：
<PRE> </ PRE>
此标签可以输出输入进去的原样数据
11.表格标签
可以对数据进行格式化，使数据显示更加清晰
<TABLE> </ TABLE>：表示表格的范围
边框：表格线粗细
BORDERCOLOR：表格线的颜色
CELLSPACING：单元格之间的距离
宽度：表格的宽度
高度：表格的高度
在表里面<TR> </ TR>
设置显示方式align：左中右
在TR里面<TD> </ TD>
设置显示方式align：左中右
使用第也可以表示单元格，可以直接实现居中和加粗

代码
<table border =“1”bordercolor =“blue”cellspacing =“0”width =“300”height =“100”>
表格写法：
定义一个表格的范围表
定义一行TR
定义一个单元格TD
表格标题
<字幕> </字幕>
合并单元格
行跨度：跨行
合并单元格：跨列
<td colspan =“3”>人员信息</ td>
12.表单标签（重要）
可以提交数据到服务器，这个过程可以使用表单标签实现
<FORM> </ FORM>：定义一个表单的范围
属性;动作：提交到地址，默认提交到当前页面
方法：表单提交方式
常用的有两种get和post，默认是get
得到请求地址栏会携带提交的数据，而后期不会携带，让安全级别较低，并且对数据大小有限制
ENCTYPE：一般请求下不需要这个属性，做文件上传时需要这个属性
输入项：可以输入内容或者选择内容的部分
大部分的输入项使用<input type =“输入项的类型”/>，所有都要加名字属性，用于存储所输入的数据
普通输入项：<input type =“text”/>
密码输入项：<input type =“password”/>
单选输入项：<input type =“radio”/>
在里面需要属性名称，名称的属性值必须要相同
还要有一个属性值，用于区分所选对象
实现默认选中的属性
检查=“选中”
复选输入项：<input type =“checkbox”/>
在里面需要属性名称，名称的属性值必须要相同
还要有一个属性值，用于区分所选对象
实现默认选中的属性
检查=“选中”
文件输入项：<input type =“file”/>
下拉输入项（不是在输入标签里面的）
<select name =“birth”>
<option value =“0”>请选择</ option>
<option value =“1991”> 1991 </ option>
<option value =“1991”> 1991 </ option>
<option value =“1991”> 1991 </ option>
</选择>
下拉选择默认是第一个，想要修改默认只需在相应的选项添加所选= “选择” 属性
文本域
<textarea cols =“10”rows =“10”> </ textarea>设置10行10列的文本域
隐藏项（不会显示在页面上，但是存在与HTML中）
<input type =“hidden”/>
提交按钮：<input type =“submit”/>
值：设置按钮上的文字
点击提交按钮后，会将数据默认提交到当前地址栏上
数据会以键值对形式显示
文件：/// G：/%E4%B9%A6%E7%B1%8D/javaweb%E7%AC%94%E8%AE%B0/html.htm
？
手机= 453＆PAS = 453 =性别GG＆goodlove = DNF＆goodlove = CF和出生= 0＆TEX = 4563
使用图片提交：
<input type =“image”src =“图片路径”>
重置按钮：<input type =“reset”/>
普通按钮：<input type =“button”value =“”/>
13.html中的其他的常用标签的使用
<B> </ b>的：加粗
<S> </ S>：删除线
<U> </ U>：下划线
的<i> </ i>的：斜体
<P> </ p>：段落标签，比BR标签多一行
<子> </子>：下标
<SUP> </ SUP>：上标
<DIV> </ DIV>：可以自动换行
<跨度> </跨度>：显示在一行
14.html的头标签的使用
HTML两部分组成头部，身体，在头里面的标签就是头标签
标题标签：设置网站在浏览器上的名称
元标签：设置网页的一些相关内容

H5部分（h5和css3主要适用于移动端开发，pc端使用以往的即可）

h5标准格式：
<！DOCTYPE html>
<html>
<head>
<meta charset =“utf-8”>
<title> </ title>
</ head>
<body>

</ body>
</ html>
之前见过其他类似的格式都是老版本的

html。h5常用新增标签：
<nav> </ nav>（导航）
<section> </ section>（区域）
<footer> </ footer>（底部，页脚）
<side> </ aside>
<文章> </ article>（文章）
*它们使用起来和div标签没有任何区别，他们是有语义标签，div没有语义

Daydream Mr.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web学习笔记之html

HTML简介：-HyperText标记语言：超文本标记语言，网页语言超文本：超出文本的范畴，使用HTML可以轻松实现这样的操作标记：HTML所有的操作都是通过标记实现的，标记就是标签，网页语言：第一个HTML程序：HTML的后缀是.html.htm代码：这是我的第一个程序！HTML的规范（遵循）1.一个html文件开始标签和结束标签 2.HTML包含
复制链接

扫一扫

专栏目录