JavaWeb1-HTML初识

最新推荐文章于 2023-02-09 06:00:00 发布

飞在天空中的野草帽

最新推荐文章于 2023-02-09 06:00:00 发布

阅读量116

点赞数

分类专栏： JavaWeb笔记文章标签： javaweb

本文链接：https://blog.csdn.net/qq_45913017/article/details/114270483

版权

JavaWeb笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、网页的组成部分

三部分：内容，表现，行为

内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html 技术来展示。
表现：指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS 技术实现
行为：指的是页面中元素与输入设备交互的响应,使页面动起来。一般使用 javascript 技术实现。

二、HTML简介

1.名称含义：Hyper Text Markup Language （超文本标记语言）简写：HTML

2.作用：HTML 通过标签标记以显示的网页中的各个部分。

3.书写规范：

<!DOCTYPE html>                 <!--标签的约束，声明-->
<html lang="zh_CN">             <!--标签的编码，lang="zh_CN"表示中文/"en"表示英文-->
<head>                          <!--头部标签，一般包含title标签，css样式，js代码三部分-->
    <meta charset="UTF-8">      <!--表示当前页面使用UTF-8字符-->
    <title>世界有你真好</title>   <!--标题-->
</head>
<body>                          <!--body页面的主体标签-->
    <h1>你好，世界。</h1>        <!--主体标签的内容-->
</body>
</html>

4.语法规则：
（1）标签不能交叉嵌套
（2）标签必须正确关闭
（3）属性必须有值，属性值必须加引号
（4）注释不能嵌套

三、HTML常用标签

1、标题标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <h1 align="left">你好，HTML</h1>
    <h2 align="center">你好，HTML</h2>
    <h3 align="right">你好，HTML</h3>
    <h4>你好，HTML</h4>
    <h5>你好，HTML</h5>
    <h6>你好，HTML</h6>
    <h7>你好，HTML</h7>
</body>
</html>

2、超链接 (在网页中所有点击之后可以跳转的内容都是超连接)

a：超链接标签
属性：href 属性设置连接的地址；
target 属性设置哪个目标进行跳转；
_self 表示当前页面(默认值)；
_blank 表示打开新页面来进行跳转

<body>
    <!--
        在网页中所有点击之后可以跳转的内容都是超连接
        <a :超链接标签
        href:链接地址设置
        target:链接跳转方式设置
                _self:在当前页面跳转（默认）
                _blenk:打开新的页面来跳转
    -->
    <a href="http://www.baidu..com">百度</a>
    <a href="http://www.baidu..com"target="_self">百度-self</a>
    <a href="http://www.baidu..com"target="_blank">百度-blank</a>
</body>

3、图片标签

img ：标签是图片标签,用来显示图片

属性： src 属性可以设置图片的路径;width 属性设置图片的宽度;height 属性设置图片的高度;
border 属性设置图片边框大小; alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容
路径：在 JavaSE中：相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在 web 中：相对路径: 从当前文件出发. /表示当前文件所在的目录 …/ 表示当前文件所在的上一级目录
绝对路径:从项目网址出发，如：http://ip:port/工程名/资源路径

<body>
    <!--
    需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性
    <img 标签是图片标签,用来显示图片
    src 属性可以设置图片的路径
    width 属性设置图片的宽度
    height 属性设置图片的高度
    border 属性设置图片边框大小
    alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

    -->
    <img src="../imgs/1.jpg" width="200" height="300" border="2"/>
    <img src="../imgs/22.jpg" width="200" height="300" alt="它跑了" />
    <img src="../imgs/3.jpg" width="200" height="300"/>
    <img src="../imgs/4.jpg" width="200" height="300"/>
    <img src="../imgs/5.jpg" width="200" height="300"/>
    <img src="../imgs/6.jpg" width="200" height="300"/>
    <img src="../imgs/7.jpg" width="200" height="300"/>
</body>

4、表格标签

table：标签是表格标签;
属性： border 设置表格标签;width 设置表格宽度;height 设置表格高度;align 设置表格相对于页面的对齐方式;cellspacing 设置单元格间距
tr 是行标签；th 是表头标签；td 是单元格标签；align 设置单元格文本对齐方式；b 是加粗标签

<body>
<!--
需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
    table 标签是表格标签
    border 设置表格标签
    width 设置表格宽度
    height 设置表格高度
    align 设置表格相对于页面的对齐方式
   cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
-->
    <table align="center" border="2" width="200" height="200" cellspacing="0">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <th>2.1</th>
            <th>2.2</th>
            <th>2.3</th>
        </tr>
        <tr>
            <th>3.1</th>
            <th>3.2</th>
            <th>3.3</th>
        </tr>

    </table>
</body>

5、表单标签

form ：表单标签
属性： action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
input type=text 是文件输入框 value 设置默认显示内容

<body>
<!--
需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。
form 标签就是表单
    input type=text 是文件输入框 value 设置默认显示内容
    input type=password 是密码输入框 value 设置默认显示内容
    input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"
    input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
    input type=checkbox 是复选框 checked="checked"表示默认选中
    input type=reset 是重置按钮 value 属性修改按钮上的文本
    input type=submit 是提交按钮 value 属性修改按钮上的文本
    input type=button 是按钮 value 属性修改按钮上的文本
    input type=file 是文件上传域
    input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的
时候同时发送给服务器）
    select 标签是下拉列表框
    option 标签是下拉列表框中的选项 selected="selected"设置默认选中
    textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度
-->
    <form>
        用户名称：<input type="text" value=""/><br/>
        用户密码：<input type="password" value=""/><br/>
        确认密码：<input type="password" value=""/><br/>
        性别选取：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked"/>女<br/>
        爱好选取：<input type="checkbox" checked="checked">听歌<input type="checkbox">
                跑步<input type="checkbox">玩游戏<br/>
        国际选择：<select>
                    <option>---请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>法国</option>
                    <option>美国</option>
                </select><br/>
        自我评鉴：<textarea rows="10" cols="25">在这里写出对你自己得评鉴</textarea><br/>
        <input type="reset" value="">
        <input type="submit">
    </form>
</body>

6、字体标签

font：字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
属性： color：属性修改颜色；face：属性修改字体；size：属性修改文本大小

<body>
<!--
需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。
font是字体标签，它可以来修改文本字体，颜色，大小
face修改字体文体属性
color修改字体颜色属性
size修改字体大小属性
-->
    <font color="red" face="宋体" size="10">我是字体标签</font>
</body>

7、无序标签

ul：是无序列表标签
属性：type 属性可以修改列表项前面的符号；li 是列表项

<body>
<!--
需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出
<ui: 无序列表
    type:修改列标签的符号的属性
    li ：列表项
-->
        <ul type="none">
            <li>东南</li>
            <li>东北</li>
            <li>西南</li>
            <li>西北</li>
        </ul>
</body>

8、页面嵌套

ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme 和 a 标签组合使用的步骤:
(1）在 iframe 标签中使用 name 属性定义一个名称
(2）在 a 标签的 target 属性上设置 iframe 的 name 的属性值

<body>
<!--
ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面
    ifarme 和 a 标签组合使用的步骤:
        1 在 iframe 标签中使用 name 属性定义一个名称
        2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
-->
    <iframe src="4.标题标签.html" width="500" height="400" name="ass"></iframe>
        <br/>
        <ul>    <!--列表标签-->
            <li><a href="1.标签认识.html" target="ass">1.标签认识.html</a> </li>
            <li><a href="2.font标签.html" target="ass">2.font标签.html</a> </li>
            <li><a href="3.特殊标签.html" target="ass">3.特殊标签.html</a> </li>
            <li><a href="7.img图片标签.html" target="ass">7.img图片标签.html</a> </li>
        </ul>
</body>

9、其他标签

div：默认独占一行
span：它的长度是封装数据的长度
p ：默认会在段落的上方或下方各空出一行来（如果已有就不再空）
br：换行标签
hr：横线分割标签

<!--
div、span、p、br、hr 标签的演示
    div ：默认独占一行
    span：它的长度是封装数据的长度,不换行。
    p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
	br：换行标签
    hr：横线分割标签
-->
    <div>div:hi:A1</div>
    <div>div:hi:A2</div>
    <span>span:hi:A1</span>
    <span>span:hi:A2</span>
    <p>p:hi:A1</p>
    <p>p:hi:A2</p>
<hr>
<br>
</body>

飞在天空中的野草帽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb1-HTML初识

一、网页的组成部分三部分：内容，表现，行为内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html 技术来展示。表现：指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS 技术实现行为：指的是页面中元素与输入设备交互的响应,使页面动起来。一般使用 javascript 技术实现。二、HTML简介1.名称含义：Hyper Text Markup Language （超文本标记语言）简写：HTML2.作用：HTML 通过标签标记以显示的
复制链接

扫一扫