HTML学习自我总结

最新推荐文章于 2024-08-02 20:11:41 发布

@康～Kris

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量504

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/Sober_Kris/article/details/105500010

版权

一、HEML语言初步认识

Hyper Text Markup Language （超文本标记语言）简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画
面如何安排，图片如何显示等），学习HTML的主要原因是想更加了解JavaWeb的开发，为后面学Java web和Android开发打基础

HTML语言的基本认识

<!DOCTYPE html><!-- 约束，声明 -->
<html lang="en"><!-- html标签标识html开始， lang = “zh_CN”表示中文  html标签中一般分为两部分，分别是:head 和body  -->
<head><!-- 表示头部信息，一般包含三部分内容，title，css样式，js代码 -->
    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
    <title>标题</title><!-- 表示标题 -->
</head>
<!-- bgcolor 是背景颜色属性 是body的基础属性
    onclick表示单击时间
    alter()是JavaScript语言提供的一个警告框函数
    它可以接受任意参数，参数就是警告框的函数信息
-->
<body bgcolor="blue" onclick="alert('你真帅')"><!-- body标签是整个html的显示的主体内容 -->
    hello
<button onclick="alert('你好')" > 点击</button>
</body>
</html>

二、HTML进阶认识

（一）标签语法

1、标签不能交叉嵌套
2、标签必须正确关闭（闭合），需要有结束标签
3、属性必须有值，属性值必须加引号
4、注释不能嵌套

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0-标签语法.html</title>
</head>
<body>

   <!-- ①标签不能交叉嵌套 -->
   正确：<div><span></span></div>
   错误：<div><span><\div></span>
   
   <hr />

   <!-- ②标签必须正确关闭（闭合），需要有结束标签 -->
   <!-- i.有文本内容的标签： -->
   正确：<div>早安</div>
   错误：<div>早安
 
   <hr />
   
   <!-- ii.没有文本内容的标签： -->
   正确：<br />
   错误：<br
   <hr />
   
   <!-- ③属性必须有值，属性值必须加引号 -->
   正确：<font color="blue">早安</font>
   错误：<font color=></font>
    错误：<font color=blue></font>
   <hr />
      
   <!-- ④注释不能嵌套 -->
   正确：<!-- 注释内容 --> <br/>
   错误：<!-- 注释内容 <!-- 注释内容2 --> -->
   <hr />
</body>
</html>

（二）font标签

font标签是字体标签，它可以用来修饰文本的字体、颜色、大小（尺寸）
color属性修改颜色
face属性修改字体
size属性修改大小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
   
   <!-- 字体标签
   需求1：在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色，

   fond标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）
      color属性修改颜色
      face属性修改字体
      size属性修改大小
   -->
   <font color="red" face="宋体" size="7">我是字体标签</font>
   
</body>
</html>

（三）特殊字符

1、< =====》 &lt
2、> =====》&gt
3、空格 ====》&nbsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.特殊字符.html</title>
</head>
<body>
   
   <!-- 特殊字符
   需求1：把<br>换行标签变成文本 转换成字符显示在页面上
   < ======》 &lt;
   > ======》 &gt;
   空格 ====》 &nbsp;
   -->
   我是&lt;br&gt;标签，你好 &nbsp;&nbsp;你好

   
</body>
</html>

（四）标题标签

h1 - h6都是标题标签，h1最大，h6最小
align是对齐属性
left 是左对齐（默认）
right是右对齐
center 是居中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
   
   <!-- 标题标签
   需求表示标题1-6
   h1 - h6都是标题标签
   h1最大 h6最小
   align是对齐属性
      left 左对齐（默认）
      right 右对齐
      center 剧中
   -->
   <h1 align="left">标题1</h1>
   <h2 align="right">标题2</h2>
   <h3 align="center">标题3</h3>
   <h4>标题4</h4>
   <h5>标题5</h5>
   <h6>标题6</h6>


</body>
</html>

（五）超链接

a标签是超链接
href属性设置超链接的地址
target属性设置哪个目标进行体哦啊转
_self 表示当前页面打开（默认）
_blank 表示打开心得页面进行跳转

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>

   <!-- a标签超链接
      href属性设置超链接的地址
      target属性设置那个目标进行跳转
      _self  表示当前页面（默认）
      _blank 表示打开新页面进行跳转

   -->
   <a href="http://www.baidu.com">百度<br></a>
   <a href="http://www.baidu.com" target="_self">百度</a>
   <a href="http://www.baidu.com" target="_blank">百度</a>
   <a href="http://www.baidu.com" target="_parent">百度</a>
   <a href="http://www.baidu.com" target="_top">百度</a>

</body>
</html>

（六）img标签

img标签可以显示一张图片
src属性可以设置图片的路径
width属性可以设置图片的宽度
height属性可以设置图片的高度
border属性可以设置属性的边框
alt属性可以在当指定路径找不到图片的时候，用文本替换来报错

在JavaSe中路径也分为相对路径和绝对路径
相对路径：从工程名开始算
绝对路径：盘符：/目录/文件名

在web中的路径也分为相对路径和绝对路径
相对路径（和Linux的相对路径类似）：
. 表示当前所在目录
… 表示当前文件所在的上一级目录
文件名表示当前所在目录的文件，相当于./文件名
绝对路径：
正确格式：http://ip:port/ url

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
    <!-- imag标签可以在html里显示图片 -->
    <!-- 使用img标签显示一张图片，并修改高，和边框属性
        src属性可以设置图片的路径
        width属性设置图像的宽度
        height属性设置图像的高度
        border属性可以设置图片的边框
        alt属性当指定路径找不到图片时，用文本来替换报错
        在JavaSe中路径也分为相对路径和绝对路径
            相对路径：从工程名开始算
            绝对路径：盘符:/目录/文件名
        在web中的路径分为相对路径和绝对路径
            相对路径：
                .   表示当前你所在目录
                ..  表示当前文件所在的上一级目录
                文件名 表示当前所在目录的文件，相当于./文件名
            绝对路径：
                正确格式是：http://ip:port/ url
    -->
    <img src="../imgs/1.jpg" width="200" height="300" border="10" alt="美女找不到">
    <img src="../imgs/2.jpg" width="200" height="300">
    <img src="../imgs/3.jpg" width="200" height="300">
    <img src="../imgs/4.jpg" width="200" height="300">
</body>
</html>

（七）表格标签

table标签是表格标签
border属性设置边框
width属性设置宽度
height属性设置高度
cellspace属性设置单元格间距，一般设置为零，这样就是紧贴在一起的

tr标签是行标签

th标签是表头标签（也就是自动加粗居中）

td标签是单元格标签
align属性设置对齐方式

b标签是加粗标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>表格标签</title>
   </head>
   <body>
   <!-- 做一个代表头的，三行，三列的表格，并且显示边框
       修改表格宽度高度，表格的对齐方式，单元格间距

       table标签   是表格标签
         boder属性    设置边框
         width属性    设置宽度
         height属性   设置高度
         cellspacing属性  设置单元格间距,一般设置为零，这样就是紧贴在一起边界变成了一条线
       tr标签  是行标签
       th标签 是表头标签
       td标签 是单元格标签
         align属性设置对齐方式
       b标签   是加粗标签

   -->
   <table align="center" border="1" width="300" height="300" cellspacing="0">
      <tr>
         <td><b>1.1</b></td>
         <td align="center">1.2</td>
         <th>1.3</th>
      </tr>
      <tr>
         <td>2.1</td>
         <td>2.2</td>
         <td>2.3</td>
      </tr>
      <tr>
         <td>3.1</td>
         <td>3.2</td>
         <td>3.3</td>
      </tr>
   </table>
      

      
   </body>
</html>

（八）表格跨行跨列

colspan属性设置跨列，属性值则代表跨几列

rowspan属性设置跨行，属性值则代表跨几行

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>7.表格的跨行跨列</title>
   </head>
   <body>
      <!-- 新建一个五行五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格夸两行两列

      colspan属性 设置跨列
      rowspan属性 设置跨行
      -->
      <table border="1" cellspacing="0" align="center">
         <tr>
            <td colspan="2">1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>

         </tr>
         <tr>
            <td rowspan="2">2.1</td>
            <td>2.1</td>
            <td>2.1</td>
            <td>2.1</td>
            <td>2.1</td>
         </tr>
         <tr>
            <td>3.1</td>
            <td>3.1</td>
            <td>3.1</td>
            <td>3.1</td>
         </tr>

      </table>

      
   </body>
</html>

（九）iframe标签

iframe标签可以在一个html页面上，打开一个小的窗口，去加载另一个单独的html页面
iframe和a标签组合使用的步骤
1、在iframe标签中使用name属性定义一个名称
2、在a标签的target属性上设置iframe的属性值，然后href属性设置单独界面的html地址文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
   <!-- ifarme标签可以在一个html页面上，打开一个小窗口，去加载一个单独的页面
           ifarme和a标签组合使用的步骤：
               1、在iframe标签中使用name属性定义有一个名称
               2、在 a标签的target属性上设置iframe的name属性值
   -->
    我是一个单独，完整的页面
    <iframe src="5.img标签.html" width="300" height="300" name="abc"></iframe>
    <ul>
        <li><a href="6.表格标签.html" target="abc">0</a> </li>
        <li>1</li>
        <li>2</li>
    </ul>
</body>
</html>

（十）列表标签

ul是无序表签
ol是有序标签
li 就是list idem 表示列表项

有序列表和无序列表的区别
有序列表就是在前面加了序号，type属性可以设置序号的样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!-- 需求：使用无序列表，列表方式，把东北F展示出来
    <ul>是无序列表
    <ol>是有序列表
    <li> list idem 表示列表项
    -->
    <ul><!--无序列表-->
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
    <ol type="i"><!--有序列表，就是前面加了序号 type可以设置序号的样子-->
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ol>
</body>
</html>

（十一）表单一

form标签就是表单
input type="text"是文本输入框 value设置默认显示内容
input type="password"是密码输入框
input type="radio"是单选框 name 属性可以进行分组 checked属性可以默认选中
input type="checkbox"是复选框，checked属性同样是默认勾选
input type="reset"是重置按钮，name可以用来分组，value属性可以更改按钮上的文字
input type="submit"是提交按钮，value属性可以修改上面的文字
input type="button"是按钮，value属性可以修改上面的文字
input type="file"是文件上传域，选择后可以上传到服务器
input type="hidden"是隐藏域当我们要发送的某些信息，而这些信息，不需要用户参与，就可以通过隐藏域（提交的时候同时会发送给服务器)
select 标签是下拉列表（默认值是起始标签和结束标签之间的内容）
option 标签是下拉列表中的选项 select="selected"设置默认选中
textarea 表示多行文本输入框
rows属性代表多少行
cols属性代表多少列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- 需求: 创建一个个人信息注册的表单界面 。 包含用户名 ， 密码 ， 确认密码 。 性别 （ 单选 ） ， 兴趣爱好 （ 多选 ） ， 国籍 （ 下
     拉列表）。
    隐藏域，自我评价（多行文本域）。重置，提交。-->
    <!-- form标签就是表单
        input type="text"是文本输入框 value设置默认显示内容
        input type="password"是密码输入框
        input type="radio"是单选框 name 属性可以进行分组 checked属性可以默认选中
        input type="checkbox"是复选框，checked属性同样是默认勾选
        input type="reset"是重置按钮，name可以用来分组，value属性可以更改按钮上的文字
        input type="submit"是提交按钮，value属性可以修改上面的文字
        input type="button"是按钮，value属性可以修改上面的文字
        input type="file"是文件上传域，选择后可以上传到服务器
        input type="hidden"是隐藏域     当我们要发送的某些信息，而这些信息，不需要用户参与，就可以通过隐藏域（提交的时候同时会发送给服务器)
        select 标签是下拉列表
        option 标签是下拉列表中的选项 select="selected"设置默认选中
        textarea 表示多行文本输入框
            rows属性代表多少行
            cols属性代表多少列
            默认值是起始标签和结束标签之间的内容
    -->
    <form>
        <table align="center">
            <tr>
                <td>
                    用户名称：
                </td>
                <td>
                    <input type="text" value="默认值"><br>
                </td>
            </tr>
            <tr>
                <td> 用户密码：</td>
                <td> <input type="password" ><br></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" ><br></td>
            </tr>
            <tr>
                <td>选择性别：</td>
                <td><input type="radio" name="gender" checked="checked">男
                    <input type="radio" name="gender">女<br>
                </td>
            </tr>
            <tr>
                <td> 兴趣爱好：</td>
                <td> <input type="checkbox">Java
                    <input type="checkbox">Python
                    <input type="checkbox">C
                    <input type="checkbox">C++<br>
                </td>
            </tr>
            <tr>
                <td> 国籍：</td>
                <td><select>
                    <option>--请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>日本</option>
                    <option>美国</option>
                    <option>英国</option>
                </select><br>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="20" name="nihao"></textarea><br></td>
            </tr>
            <tr><td><input type="reset" name="nihao" value="重置自我评价">
                </td>
                <td>

                    <input type="submit" value="提交按钮">
                </td>
            </tr>
        </table>

    </form>
</body>
</html>

（十二）表单二

form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET或者POST（默认值是get）
1、表单提交的时候，数据没有发送给服务器的三种情况
（1）表单没有name属性
（2）单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
（3）表单项不在提交的form标签中
2、Get请求的特点是：
（1）浏览器地址栏中的地址是：action属性[+？+请求参数]
请求参数的格式是：name=value&name=value
（2）不安全
（3）有数据长度的限制
3、Post请求的特点
（1）浏览器地址栏中只有action属性值
（2）相对于GET请求要安全
（3）理论上没有数据长度的限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交的细节</title>
</head>
<body>
<!--
    form标签是表单标签
        action属性设置提交的服务器地址
        method属性设置提交的方式GET或者POST（默认值是get）

        1、表单提交的时候，数据没有发送给服务器的三种情况
            1、表单没有name属性
            2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
            3、表单项不在提交的form标签中
        2、Get请求的特点是：
            1、浏览器地址栏中的地址是：action属性[+？+请求参数]
                请求参数的格式是：name=value&name=value
            2、不安全
            3、有数据长度的限制
        3、Post请求的特点
            1、浏览器地址栏中只有action属性值
            2、相对于GET请求要安全
            3、理论上没有数据长度的限制
-->
<form action="http://www.baidu.com" method="get">
    <input type="hidden" name="action" value="login">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>
                用户名称：
            </td>
            <td>
                <input type="text" value="默认值" name="username"><br>
            </td>
        </tr>
        <tr>
            <td> 用户密码：</td>
            <td> <input type="password" name="password"><br></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="surepsd"><br></td>
        </tr>
        <tr>
            <td>选择性别：</td>
            <td><input type="radio" name="gender" checked="checked" value="boy">男
                <input type="radio" name="gender" value="girl">女<br>
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好：</td>
            <td> <input type="checkbox" name="hobbies" value="Java">Java
                <input type="checkbox" name="hobbies" value="Python">Python
                <input type="checkbox"name="hobbies" value="C">C
                <input type="checkbox" name="hobbies" value="C++">C++<br>
            </td>
        </tr>
        <tr>
            <td> 国籍：</td>
            <td><select name="nation">
                <option value="none">--请选择国籍--</option>
                <option selected="selected" value="China">中国</option>
                <option value="Japan">日本</option>
                <option value="America">美国</option>
                <option value="Britain">英国</option>
            </select><br>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20" name="self-evolution"></textarea><br></td>
        </tr>
        <tr><td><input type="reset" name=self-evolution value="重置评价">
        </td>
            <td>

                <input type="submit" value="提交按钮">
            </td>
        </tr>
    </table>

</form>
</body>
</html>

（十三）其他标签

div标签默认独占一行
span标签它的长度是封装数据的长度
p段落标签默认会在段落的上方或下方空出一行（如果已有就不再空行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
</head>
<body>
<!--需求 1 ：div 、span 、p  标签的演示-->
<!--
    div标签   默认独占一行
    span标签  它的长度是封装数据的长度
    p段落标签   默认会在段落的上方或下方空出一行（如果已有就不再空行）
-->
    <div>div标签1</div>
    <dic>div标签2</dic>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落1</p>
    <p>p段落2</p>

</body>
</html>

这是自己的学习笔记如果有什么错误之处还请提出来一起学习（这个是在尚硅谷上面找的学习资源学习的），欢迎大家来我自己的博客sober

@康～Kris

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习自我总结

一、HEML语言初步认识 Hyper Text Markup Language （超文本标记语言）简写：HTML HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等），学习HTML的主要原因是想更加了解JavaWeb的开发，为后面学Java web和...
复制链接

扫一扫