Java全栈学习---前端---HTML

前端HTML

第一章 基础概念

       

第二章 HTML

html是超文本标记语言,是用于创建网页的标记性语言。

  1. html文档的后缀名有两种:
    1. .html
    2. .htm
  2. 语法规范
    标签都是使用<>包裹,标签大部分都是成对出现的,标签由父子(包含)关系和兄弟(并列)关系组成。
  3. 开发工具
    推荐使用vs code。
    1. 快捷键
命令功能
Ctrl + N新建文件
Ctrl + S保存
Ctrl + 加号键放大视图
Ctrl + 减号键缩小视图
输入英文!按下tab键生成页面骨架
  1. HTML骨架结构
<!DOCTYPE html> <!--声明为HTML5文档-->
<html lang="en"> <!--完整的HTML页面(由<html>和</html>两部分组成)-->
<head> <!--头部元素(由<head>和</head>组成)-->
    <meta charset="UTF-8"><!-- 定义网页编码格式为udf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--描述了文档的标题-->>
</head>
<body><!--页面的可见部分(由<body>和</body>两部分构成)-->
    <h1>hello world</h1>
</body>
</html>

在这里插入图片描述

第三章 常用标签

<!DOCTYPE html> <!--声明为HTML5文档-->
<html lang="en"> <!--完整的HTML页面(由<html>和</html>两部分组成)-->
<head> <!--头部元素(由<head>和</head>组成)-->
    <meta charset="UTF-8"><!-- 定义网页编码格式为udf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html练习</title><!--描述了文档的标题-->
</head>
<body><!--页面的可见部分(由<body>和</body>两部分构成)-->
    <h1>hello world</h1><!--标题标签,双标签,从h1到h6数字越大标签越小,常用h1,一个HTML文件中只能出现一次-->
    <p>hello world</p><!--段落标签,双标签-->
    <strong>hello world</strong><!--强调标签,双标签,表示强调,对文本加粗-->
    <em>hello world</em><!--强调标签,双标签,将文本转为斜体字-->
    <del>hello world</del><!--双标签,删除文本-->
    <ins>hello world</ins><!--双标签,插入文本-->
    <img src="" alt="" title="" width="" height=""><!--图片标签,单标签,后面两个是图片属性,src属性:引入图片的地址,
                                alt属性:当图片无法正常显示时出现的提示文字,title属性:提示信息,
                                在图片上显示提示文字,width、height属性:控制图片的大小,导入文件的地址路径有两个:
                                相对路径 “.”在路径中表示当前路径,“..”在路径中表示上一级路径,
                                绝对路径:实实在在的路径,比如网页的地址,电脑中的文件路径-->
    <a href="https://www.baidu.com/" target="_blank">hello world</a><!--跳转标签,双标签,给文字提供网页连接进行跳转,也可以在a标签中加一个图片,使图片也能进行网页跳转,
                    href属性:写连接的地址,target属性:改变连接打开的方式,当前页面打开(_self)默认就是,新建一个页面打开(_blank)-->
    <base target="_blank"><!--base标签为页面上的所有连接规定默认地址或默认目标,浏览器中会使用标签中指定的url来解析所有的相对url,base其实就是定义一个默认的地址和默认的目标,
                    在head标签中添加这个代码,作用是使网页中的所有target标签的值都默认为_blank-->
    <a href="#html">hello world</a>
    <h2 id="html">hello world</h2><!--跳转锚点,在当前页面进行跳转到指定位置,可以使用#配对两种:一个是id,一个是name-->
    <ul type=""><!--无序列表,ul和li必须同时存在,不能嵌套其他标签,li之间可以嵌套其他标签,type改变前面列表的样式,默认小圆点(一般使用CSS去控制)-->>
        <li>特殊字符</li>
        <li>含义</li>
        <li>特殊字符代码</li>
    </ul>
    <ol><!--有序列表,和无序列表基本一样,用的很少,无序列表能代替有序列表-->
        <li></li>
    </ol>
    <dl><!--定义列表-->
        <dt>特殊符号</dt><!--定义专业术语或名词-->
        <dd></dd><!--对名词进行解释和描述-->
        <dt>含义</dt>
        <dd>空格符</dd>
        <dt>特殊字符代码</dt>
        <dd>&nbsp</dd>
    </dl>
    <ul><!--嵌套列表-->
        <li>
            基础信息
            <ul>
                <li>客户信息</li>
                <li>供应商信息</li>
                <li>员工信息</li>
                <li>材料信息</li>
            </ul>
        </li>
        <li>
            采购管理
            <ul>
                <li>采购需求</li>
                <li>采购合同</li>
                <li>收货单</li>
                <li>付款单</li>
                <li>收票单</li>
                <li>采购退货单</li>
                <li>采购退款单</li>
            </ul>
        </li>
    </ul>
    <table border="1" cellpadding="30" cellspacing="30"><!--表格标签,border属性控制表格边框,cellpadding属性控制单元格内的空间,cellspacing属性控制单元格之间的空间
                                                        rowspan属性合并行,colspan属性合并列(left、center、right对应单元格中左中右的位置),align属性控制左右对象的方式(top、middle、bottom对应在单元格中上中下的位置),
                                                        valign属性控制上下对齐的方式-->
        <caption>特殊字符表格</caption><!--定义表格标题-->
        <tr><!--定义表格行-->
            <th>特殊字符</th><!--定义表头-->
            <th>含义</th>
            <th>特殊字符代码</th>
        </tr>
        <tr>
            <td></td><!--定义表格单元-->
            <td>空格符</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>©</td>
            <td>版权</td>
            <td>&copy;</td>
        </tr>
    </table>
    <form action=""><!--表单标签,双标签,表单的最外层容器-->
        <input type="text"><!--单标签,标签用于搜索用户信息,根据不同的type属性值,展示不同的空间,如输入框、密码框、复选框等
                            type属性:text普通的文本输入框,password密码输入框,checkbox复选框,radio单选框,file上传文件,
                            submit提交按钮,reset重置按钮,action属性是提交按钮的地址,placeholder属性是显示输入框的提示信息
                            checked属性是默认勾选,disabled属性是使input支持的空间失效,多个单选框中加入同一个name属性并赋值同样的值可以进行配对使这几个单选框只能选一个-->

    </form>
    <textarea name="" id="" cols="30" rows="10"><!--双标签,多行文本框-->

    </textarea>
    <select name="" id=""><!--双标签,下拉菜单-->
        <option value="">

        </option>
    </select>
    <div><!--用来划分区块,dive元素在网页中是最常用的元素,和CSS可以实现网页的精致排版-->

    </div>
    <span><!--内联,文字修饰-->

    </span>
</body>
</html>

第四章 表格

  1. 标签
标签意义
< table > </ table >表格
< tr > </ tr >
< td > </ td >单元格
< th > </ th>表头,加粗,加黑,自动居中
< caption > </ caption >表格的标题,写在内部显示外部,居中
< thead ></ thead >结构头
< tbody > </ tbody >结构体
< tfoot ></ tfoot>结构底
  1. 属性
属性意义
border表格的边框,默认0
width宽度
height高度
cellspacing单元格与单元格之间的距离
cellspadding单元格与内容之间的距离
align:left/center/right设置文字的位置
colspan列合并
rowspan行合并

第五章 列表

标签意义
< ul >< li ></ li ></ ul >无序列表
< ol >< li ></ li ></ ol >有序列表
< dl >< dt ></ dt>< dd></ dd></ dl>自定义列表

第六章 表单

  1. input属性
属性值意义
text文本框
password密码框
radio单选按钮
checked复选框
button普通按钮
reset重置按钮,需要配合form表单才有用
submit提交按钮
image属性src
file文件按钮,上传图片
  1. name属性
    1. 发送后台
    2. name的标识,对于单选按钮,只能选择一个
  2. value属性
    文本框默认显示的文字
  3. checked属性
    默认选中,可以写一个属性,也可以属性名=属性值
  4. label用法
    1. < label >请输入 < input type=“text”> < input type=“text”></ label>
    2. < label for=“a”>请输入</ label>
      < input type=“text” id=“a”>
  5. textarea标签
    用户留言
  6. 下拉列表
<select>
		<option>请选择</option>
		<option >苹果</option>
		<option selected>香蕉</option>
		<option>橘子</option>
</select>
  1. 下拉列表的默认选中:selected

  2. form表单
    主要的作用是:收集用户的信息,发送到后台,action属性的属性值是提交后台的地址,method=“get/ppost”是提交后台的方式,name属性的属性值是告诉服务器由那个表单提交过来的。

Java全栈学习—前端

Java全栈学习—前端

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值