java day22 HTML

wzyyj

于 2020-12-25 17:04:40 发布

阅读量114

点赞数

分类专栏： java学习日记文章标签： html css html5

本文链接：https://blog.csdn.net/qq_43642864/article/details/111597008

版权

java学习日记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
标记:标签，不同的标签实现不同的功能
语言:人与计算机的交互工具

1.1 书写规范

HTML标签是以尖括号包围的关键字
HTML标签通常是成对出现的，有开始就有结束
HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)
HTML标签不区分大小写,建议全小写

结构标签：

    <head>：网页头标签
   		<title></title>:页面的标题      
    </head>      
    <body></body>：网页正文 </html> ```

1.3 标签类型

html是根标签
head是头部标签
title为页面标题标签
boby为内容标签
h1~h6为标题标签，数字越大，字号越小
p为段落标签，&nbsp是空格，br是换行标签
img是图片标签，属性有：src为图片文件路径，width是图片宽度，height是图片高度
a是超链接标签，属性有：href为链接路径，可以写文件路径，也可以写网址，如果需要访问外部服务器，需要加上https或者http
name属性为定位属性
href属性值为#表示为返回顶部，属性值为#name表示定位到指定的name属性值的标签

块级标签(自带换行符号) h1~h6
行级标签（不自带换行符号） img，a

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2007班</title>
    <!--
        html是根标签
        head是头部标签
        title为页面标题标签
        boby为内容标签
        h1~h6为标题标签，数字越大，字号越小
        p为段落标签，&nbsp是空格，br是换行标签
        img是图片标签，属性有：src为图片文件路径，width是图片宽度，height是图片高度
        a是超链接标签，属性有：href为链接路径，可以写文件路径，也可以写网址，如果需要访问外部服务器，需要加上https或者http
              name属性为定位属性
              href属性值为#表示为返回顶部，属性值为#name表示定位到指定的name属性值的标签

        块级标签(自带换行符号)  h1~h6
        行级标签（不自带换行符号） img，a
    -->
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    <p>
        年底了，春运要来了，
        然而，满心欢喜的打工人
        正在憧憬回家过年景象的时候
        网上却流传出
        “2021年春运取消”的消息！
        “第一步，
        学校12月15号前全部分批放假。
        第二步，
        12月25号前，无订单工厂、在建工地放假。
        第三步，
        2021年1月20号前，无特殊岗位一律放假……”
        消息一出，不少网友急了
        纷纷询问：是真的吗？
    </p>

    <a name="GPS" href="http://www.baidu.com">定位的地方</a><br>
    <a href="https://baike.baidu.com/item/%E6%B3%A2%E5%A4%9A%E9%87%8E%E7%BB%93%E8%A1%A3/1505010?fr=aladdin">
        <img src="img/bls.jpg" height="100px">
    </a>

    <p>
        &nbsp; 东涌镇面积92平方公里，辖22个行政村和2个社区，常住人口约190245人（2017年）。 [1]
    </p>
    <p>
        东涌镇先后荣获全国重点镇 [2]  、全国文明镇 [3]  、国家卫生镇 [4]  、全国宜居小镇 [5]  、
        广东省教育强镇 [6]  、第三批全国发展改革试点城镇 [7]  、广州市特色名镇 [8]
        等荣誉称号 [1]  ，2014年，东涌镇实现地区工业总产值约301.5亿元，同比增长3.3% [9]  。
    </p>
    <p>
        <img src="img/bls.jpg" height="100px"><br>
        <img src="img/bls.jpg" height="100px"><br>
        <img src="img/bls.jpg" height="100px"><br>
    </p>
<a href="img/index.html">跳转</a>
<a href="#GPS">调到定位的地方</a>
<a href="#">回到最顶部</a>

</body>
</html>

1.4 form表单常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式：get 和post
get:
地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
不安全
效率高
get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

post：
地址栏：请求参数单独处理。
安全可靠些
效率低
post请求大小理论上无限；一般用于插入删除修改等操作

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        form:表单
                action:属性值为提交请求的地址
        input: type="text"为文本框，value为默认值
               type="password"为加密文本框，value为默认值
               type="submit"为提交按钮，value值为提交按钮的展示文字
               type="reset"为重置按钮
               type="button"为无功能按钮
               type="radio"为单选按钮，多个单选按钮必须name属性值相同
                     checked="checked"为默认选中状态
               type="checkbox"为多选按钮
                     checked="checked"
        select:代表下拉框
            option:为下拉框的选项
                selected="selected"为默认选中状态

        form表单的内容以name=value的形式进行数据提交
    -->
</head>
<body>
<form action="https://www.baidu.com">
    <input type="hidden" name="hidden" value="1">
    用户名:<input type="text" name="username" value="1"><br/>
    密码:<input type="password" name="password" value="2"><br/>
    性别:男<input type="radio" name="sex" value="man" checked="checked">
    女<input type="radio" name="sex" value="women">
    不详<input type="radio" name="sex" value="?"><br/>
    爱好:
    左手<input type="checkbox" name="hobbies" value="left">
    右手<input type="checkbox" name="hobbies" value="right" checked="checked">
    球<input type="checkbox" name="hobbies" value="ball"><br/>
    出生月:<select name="month">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4" selected="selected">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select><br/>
    <input type="submit" value="注册">
    <input type="reset">
    <input type="button" value="空白">
</form>
</body>
</html>

1.5 HTML框架标签

框架集:

frameset:rows和cols为其中的属性：cols为列，rows为行
frame:src属性为展示的html页面的链接地址，noresize为固定区域属性
与body冲突，使用框架集不允许存在body

代码示例：
a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        桂林电子科技大学（Guilin University Of Electronic Technology），简称“桂电”，坐落在桂林市，
        由工业和信息化部、国家国防科技工业局与广西壮族自治区人民政府共建，入选“卓越工程师教育培养计划”、
        新工科研究与实践项目、中西部高校基础能力建设工程重点建设高校、首批高等学校科技成果转化和技术转移
        基地、国家大学生创新性实验计划、全国深化创新创业教育改革示范高校、国家大学生文化素质教育基地、国
        家级特色专业建设点、国家地方联合工程研究中心、广西一流学科建设高校，有国家大学科技园，具有自主招
        生资格，是总装备部通信装备预研项目定向发布高校之一和北斗ICD授权的高校之一。 [1-11]
        学校始建于1960年，1980年经国务院批准成立桂林电子工业学院，2006年更名为桂林电子科技大学。学校先
        后隶属于第四机械工业部、电子工业部、机械电子工业部、中国电子工业总公司、信息产业部。2000年管理体
        制转为中央与地方共建、以地方管理为主。。 [3]  [12]
        截至2018年9月，学校有金鸡岭校区、六合路校区、花江校区、北海校区，校园总面积4153亩；设有19个教学
        学院；有博士后科研流动站3个，一级学科博士点4个，一级学科硕士点18个，硕士专业学位授权类别7个，本科
        专业76个；有教职工2900余人，全日制在校学生40600余人。 [12-13]

</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../img/guidian.jpg">
</body>
</html>

framset.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        框架集：
            frameset：row和cols为其中的属性
                    row为行，cols为列
            frameset：src属性为展示的html页面的链接地址，noresize为固定区域属性
            与body冲突，使用框架集不允许body存在
    -->
</head>
<frameset rows="30%,50%">
    <frame src="a.html" noresize="noresize">
    <frame src="b.html">
</frameset>
</html>