1、Html编程基础

辛勤小王子

已于 2022-08-15 17:12:52 修改

阅读量406

点赞数

分类专栏： # Java Web应用开发基础教学文章标签： html 前端 javascript

于 2022-08-14 22:39:46 首次发布

本文链接：https://blog.csdn.net/qq_37917691/article/details/126337411

版权

教学同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Java Web应用开发基础

15 篇文章 0 订阅

订阅专栏

HTML是一门标记语言

在这里插入图片描述

HTML简介

1、什么是HTML？

HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。

2、什么是标记？

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4SN5vERb-1660486878360)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210704072106326.png)]$

3、HTML文档结构：

包含文档头部分：

正文部分

在这里插入图片描述

1>声明： h5文件

2>HTML部分包括：文档头部分和正文部分

文档头部分：

标题：登录

编码：

引入css：

引入js：

正文部分：body

标签的规则：

•标记可以嵌套但是不能交错

•大小写不敏感

•可以没有结束标记，但不推荐

.有自己的属性：（基本属性，事件属性）onclick

.单标签和双标签

4、中文乱码问题

•在头中加入

–

•文件保存必须保存成头中设定的编码

5、常用的标签

在这里插入图片描述

6、HTML页面中的行和块

方便后续的布局设计

行级标签：按行逐一显示（文字，图片）

.img（图像标签 src表示图片路径 title表示提示文字）

.span（范围标签）

.a（超链接标签 href表示连接的地址 target表示目标窗口的位置）

块级标签：显示为块状，前后隔一行

块级标签分为：基本块级标签和常用于布局的块级标签

1、基本块级标签：

. h1~h6（标题标签）

. p（段落标签）

. hr（水平线标签）

2、常用于布局的块级标签：

. ol（有序列表标签）

. ul（无序列表标签）

在这里插入图片描述

<ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
     </ol>
     
     <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
     </ul>

在这里插入图片描述

<ul style="list-style-type:circle">

在这里插入图片描述

<ul style="list-style-type:square">

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嘿嘿嘿</title>
</head>
<body>
     <ul>
       <li>Coffee</li>
       <li>Tea
         <ul>
           <li>Black tea</li>
           <li>Green tea
             <ul>
               <li>China</li>
               <li>Africa</li>
             </ul>
           </li>
         </ul>
       </li>
       <li>Milk</li>
     </ul>
</body>
</html>

. table（表格标签，与表格相关的标签还有tr，td，th，caption等）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嘿嘿嘿</title>
</head>
<body>
     <table border="1" cellspacing="0" cellpadding="0">
         <tr   align="center">
             <td colspan="3">商品类目</td>
         </tr>
         <tr >
             <td colspan="2">手机充值-电话卡</td>
              <td rowspan="2">网游-魔兽</td>
         </tr>
         <tr >
             <td>移动</td>
             <td> 联通</td>

         </tr>
     </table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嘿嘿嘿</title>
</head>
<body>
     <table border="1" cellspacing="0" cellpadding="0">
         <tr   align="center">
             <td colspan="4">拍拍公告栏</td>
         </tr>
         <tr >
              <td rowspan="4"><img src="../img/ppgg.png"></td>
               <td colspan="3">彩票大卖</td>
         </tr>
         <tr >
             <td colspan="3"> 社区新版首页亮相</td>

         </tr>
         <tr>
              <td colspan="3"> 自输卡密自动发货功能上台</td>
         </tr>
         <tr>
             <td>货到付款</td>
             <td>手机付款</td>
             <td>点卡出售</td>
         </tr>
     </table>
</body>
</html>

表格相关属性：

在这里插入图片描述

. form（表单标签）通常和table标签一起使用

7、form表单的十一种类型

文本：1、text 2、password 3、testarea 文本域 4、hidden：隐藏框
按钮：1、reset 重置 2、submit 提交 3、button
选择框：1、单选 radio 2、复选 CheckBox 3、下拉框 select

在这里插入图片描述

文本框：text

在这里插入图片描述

密码框：password
在这里插入图片描述

按钮：

在这里插入图片描述

.div（div其实就是一个划分逻辑区域的标签，常用作容器，div还可以包括普通的文字、图片等内容）

表单中输入元素的使用

在这里插入图片描述

7、特殊字符的表示

在这里插入图片描述

8、标签的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

1、属性总是以名称/值对的形式出现，比如：name=“value”。

2、属性总是在 HTML 元素的开始标签中规定。

3、属性值要加双引号若内容里也有双引号则加单引号

作业：

绘制注册页面和登入界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OEezGeVp-1660486878381)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20211124170718510.png)]

.(img-NNXCmZy6-1660486878380)]

7、特殊字符的表示

[外链图片转存中…(img-G3YQ1bos-1660486878380)]

8、标签的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

1、属性总是以名称/值对的形式出现，比如：name=“value”。

2、属性总是在 HTML 元素的开始标签中规定。

3、属性值要加双引号若内容里也有双引号则加单引号

辛勤小王子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
1、Html编程基础

HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。包含文档头部分：正文部分1>声明： h5文件2>HTML部分包括：文档头部分和正文部分文档头部分：登录编码：引入css：引入js：正文部分：body。......
复制链接

扫一扫