JavaWeb-02 HTML入门

是我，Zack

已于 2022-07-29 17:33:25 修改

阅读量710

点赞数

分类专栏： # JavaWeb 文章标签： html web

于 2021-04-07 12:37:36 首次发布

本文链接：https://blog.csdn.net/weixin_44589991/article/details/115482766

版权

JavaWeb 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

A 基本概念

概念：是最基础的网页开发页面
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

Hyper Text Markup Language 超文本标记语言

超文本：
- 是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：
- 由标签构成的语言。<标签名称>如html，xml
- 标记语言不是编程语言

例子：写了一本书

B 页面例子

B1 语法

html文档后缀名 .html和.htm
标签分为

- 围堵标签：有开始标签和借宿标签，如<>
- 自闭和标签：开始标签和借宿标签在一起。如

标签可以嵌套

- 需要正常嵌套，不能你中有我，我中有你
- 错误示范：
- 正确示范：

在开始标签可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来
HTML的标签不区分大小写，但是建议使用小写

标准语法格式

<!DOCTYPE html>    <!--约束，声明/规定类型--> 
<html lang="en">   <!--/制定页面国家，lang="zh_CN"表示中文，一般可以不写--> 
   <head>          <!--第一部分 head 头信息--> 
     <meta charset="UTF-8">  <!--/指定字符集，支持中文，不加默认jbk解码--> 
     <title>Title</title>
   </head> 
   <body>          <!--第二部分 body 页面主体内容--> 
   <font color='green'>Hello World</font><br/>
   <font color='yellow'>Hello World</font>
   </body>
</html>

Q：用于写Html的软件用哪个?

初学者最好用 DW 来做
另一个思路就是用自己已经安装好的编译器
- 比如：Visual Studio Code，Sublime Text，HBuilder，Notepad，记事本
另外推一个网上好评max的
- VScode，这个软件的实时预览插件是最好用的，在双屏幕环境下更是高效率神器。
- VSCode，有些公司几乎所有的前端都是用的这个，不大不小，里面有各种插件，你需要什么安装什么就好，主题以及各种插件提示让你的编码效率提升的不是一点点，界面好看，你想要的这上面几乎都有，而且还有小程序插件，git history等等神器，能够自定义自己的编码习惯等等。
我自己用的是iDEA，javaweb学习过程就一直用这个了
最后，编写html用什么“软件”不重要，只要支持Emmet(前身是Zen Coding)就行

C 标签学习

附一些学习资料，方便查阅

w3cschool离线手册菜鸟教程.CHM 2020年最新中文版！

其中，最新手册包含HTML5 大部分用于移动web开发

标签的格式：<标签名></标签名>
标签名大小写不敏感
标签拥有自己的属性，包括基本属性和事件属性

- 基本属性：body bgcolor背景颜色
- 事件属性：onclick单击（点击）事件 οnclick=“alert(“你好！”)”
4.标签又分为，单标签和双标签。

i. 单标签格式： <标签名 />

ii. 双标签格式: <标签名> …封装的数据…</标签名>

标签语法代码正误分析如下：

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

    <!-- ①标签不能交叉嵌套 -->
    正确：<div><span>早安，尚硅谷</span></div>
    错误：
    <hr />

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

C1 文件标签

html：html文档的根标签
head：头标签。用于制定html文档的一些属性，引入外部的资源
title：标题标签
body：体标签
：类型

C2 文本标签

1. 注释标签：

2. 换行标签：br

代码的换行会翻译为一个空字符，
自闭合标签
可以
,html语法并不严谨

3. 标题标签：h1 to h6

在这里插入图片描述

4. 段落标签：P

会有一定的行间距

5. 水平线标签：hr

**显示一条水平线：**默认银白色，宽度2000，高度1，居中对齐
属性：
- color：颜色
- width：宽度
- size：高度
- align：对齐方式
- - center：居中
  - left：左对齐
  - right：右对齐
例子<hr color=“red” size=“10” wi
HTML5不建议使用，但浏览器上下兼容都可以显示

6. 字体加粗：b

7. 字体斜体：i

8. 字体标签：font

过时标签
属性
- color：颜色
- size：大小
- face：字体

9. 文本居中：center

过时标签

10.属性定义

color定义
- 1.英文单词：red、green、blue
- 2.三原色配比：rgb（值1，值2，值3）：值的范围：0-255
- 3.#值1值2值3：00~FF之间（现在常用）
width定义
- 1.数值：width=‘20’,数值的单位，默认是px（像素）
- 2.比例：相对于父元素的一半

11.学习案例–公司简介

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>黑马程序员简介</title>
</head>
<body>
  <h1> 公司简介</h1>
  <hr color="#ffd700">
  <p>
     <font color="#dc143c">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
  <p/>

  <p>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
      黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。
  </p>
  <p>黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
      中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
  </p>
  <p>
      一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
  </p>
  <hr color="#ffd700">
  <font color="#696969" size="2">
      <center>江苏传智播客教育科技股份有限公司<br/>
          版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
          <center/>
  </font>

</body>
</html>

案例图例展示：

C3 图片标签

展示图片：img

属性：src：指定格式的位置
路径的写法
- 相对路径：以.开头的路径
- ./ 代表当前目录 ./image/1
- …/ 代表上一级目录

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

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

在web 中路径分为相对路径和绝对路径两种
        相对路径:
                .    表示当前文件所在的目录
                .. 表示当前文件所在的上一级目录
                文件名表示当前文件所在目录的文件,相当于./文件名./ 可以省略
        绝对路径:
                正确格式是: http://ip:port/工程名/资源路径
            错误格式是: 盘符:/目录/文件名
-->
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>

C4 列表标签

有序列表：ol li /li /ol

属性：type（排序的类型）start（从哪里开始）

无序列表：ul li /li /ul

属性：原点disc、方框squqre、空点circle

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

C5 链接标签（重点）

a：定义一个超链接

属性
- hrof：
- - target
  - 邮箱资源：“联系我们”
- traget：指定打开资源的URL（统一资源定位符）
- - =“_self”：默认值，在当前页面打开
  - =“_blank”：在空白页面打开
- traget：也可以指定项目内部的资源
例子
- 联系img

C6 常用标签

行内标签：span

也称内联标签，文本信息在一行展示
起包裹作用：跟CSS一起使用，白纸才好作画

块级标签：div

每一个div占满一整行。
没有任何样式，仅仅是换行

<body>
    <!--需求1：div、span、p 标签的演示
        div 标签默认独占一行
        span 标签它的长度是封装数据的长度
        p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）
    -->
    <div>div 标签1</div>
    <div>div 标签2</div>
    <span>span 标签1</span>
    <span>span 标签2</span>
    <p>p 段落标签1</p>
    <p>p 段落标签2</p>
</body>

C7 语义化标签

使用html5中，为了提高程序的可读性，标识多个div，提供了一些标签

header

footer

C8 表格标签（重点）

1. 定义表格：table

属性
- border：边框
- width：宽度
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线合为一条
- bgcolor：背景颜色
- align：对齐方式

2. 定义行：tr

属性
- bgcolor：背景颜色
- align：对齐方式

3. 定义单元格：td

属性
- 合并行：rowspan=“2”
- 合并列：colspan=“2”

4. 定义表头单元格：th

默认居中、加粗

5.表格标题caption

6.表格头部thead

7.表格体部tbody

8.表格脚部tfoot

展示都是在最后，无论代码顺序

<body>
<!--
需求1：做一个带表头的，三行，三列的表格，并显示边框
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

table 标签是表格标签
        border 设置表格标签
        width 设置表格宽度
        height 设置表格高度
        align 设置表格相对于页面的对齐方式
        cellspacing 设置单元格间距

        tr 是行标签
        th 是表头标签
        td 是单元格标签
                align 设置单元格文本对齐方式
        b 是加粗标签
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <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>

C8 跨行跨列表格（重点）

<body>
<!-- 需求1：
    新建一个五行，五列的表格，
    第一行，第一列的单元格要跨两列，
    第二行第一列的单元格跨两行，
    第四行第四列的单元格跨两行两列。

        colspan 属性设置跨列
        rowspan 属性设置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
</body>

删除：ctrl 选中 s

C9 表单标签（重点）

表单概念
- 用于采集用户输入的数据，用于和服务器进行交互
- 单就是html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

定义表单：form

用于定义表单，可以定义一个范围，范围代表采集用户数据的范围
属性
- action：指定提交数据的URL
- method：指定提交方式
- - 分类：一共7种，2种比较常用
  - get：请求参数会在地址栏中显示，参数大小限制，不安全
  - post：请求参数只会封装在请求体中（HTTP协议后讲解）

表单中的数据要想被提交，必须指定其name属性，参数大小无限制，较为安全

表单项标签：

input：可以通过type属性值，改变元素展示的方式

type属性
- text：文本输入框
- - placeholder：指定输入框的提示信息，当输入框
- passwoed：密码输入框
- radio：单选框
- - 注意1：要想让多选框实现单选效果，则多个单选框的name属性值必须一样
  - 注意2：一般会给每一个单选框提供value属性，指定其被选中后提交的值
  - 注意3：checked属性，可以指定默认值
- checkbox：复选框
- - checked属性，可以指定默认值l
- file：文件选择框
- hidden：隐藏域，用于隐藏文档
- 按钮
- - submit：提交按钮，可以提交表单
  - button：普通按钮（后面跟javascipt连用）
  - image：图片提交按钮（Src属性指定图片的路径）
label：指定输入项的文字描述信息
注意：label的for属性一般回合input的id属性值对应。如果对应，点击lable区域，会让input输入框获取焦点

select：下拉列表
- 子元素：option，指定列表项

textarea：文本域
- cols：每一行有多少个字符
- rows：默认多少行

<body>
<!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。-->
<!--
    form 标签就是表单
        input type=text     是文件输入框value 设置默认显示内容
        input type=password 是密码输入框value 设置默认显示内容
        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="abc"/><br/>
    确认密码：<input type="password" value="abc"/><br/>
    性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
    兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
    type="checkbox" />C++<br/>
    国籍：<select>
        <option>--请选择国籍--</option>
        <option selected="selected">中国</option>
        <option>美国</option>
        <option>小日本</option>
        </select><br/>
        自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
    <input type="reset" value="abc" />
    <input type="submit"/>
    </form>
</body>

效果图

表单格式化:

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称：</td>
            <td>
                <input type="text" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
         <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex" checked="checked" />女
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked" />Java
                <input type="checkbox" />JavaScript
                <input type="checkbox" />C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>小日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>

表单提交细节:

<body>
<!--
    form 标签是表单标签
        action 属性设置提交的服务器地址
        method 属性设置提交的方式GET(默认值)或POST
    表单提交的时候，数据没有发送给服务器的三种情况：
        1、表单项没有name 属性值
        2、单选、复选（下拉列表中的option 标签）都需要添加value 属性，以便发送给服务器
        3、表单项不在提交的form 标签中

    GET 请求的特点是：
        1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
        请求参数的格式是：name=value&name=value
        2、不安全
        3、它有数据长度的限制

    POST 请求的特点是：
        1、浏览器地址栏中只有action 属性值
        2、相对于GET 请求要安全
        3、理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称：</td>
            <td>
                    <input type="text" name="username" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码：</td>
            <td><input type="password" name="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" checked="checked" value="girl" />女
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好：</td>
            <td>
                <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                <input name="hobby" type="checkbox" value="js"/>JavaScript
                <input name="hobby" type="checkbox" value="cpp"/>C++
                 </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                <option value="none">--请选择国籍--</option>
                <option value="cn" selected="selected">中国</option>
                <option value="usa">美国</option>
                <option value="jp">小日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>

C10 iframe 框架标签(内嵌窗口)

ifarme 标签它可以在一个html 页面上,打开一个小窗口,去加载一个单独的页面.
只能用双标签

<body>
    我是一个单独的完整的页面<br/><br/>
    <!--ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
            ifarme 和a 标签组合使用的步骤:
                    1 在iframe 标签中使用name 属性定义一个名称
                    2 在a 标签的target 属性上设置iframe 的name 的属性值
-->
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<br/>
        <ul>
            <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
            <li><a href="1.font 标签.html" target="abc">1.font 标签.html</a></li>
            <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
        </ul>
</body>

效果图

C11 特殊字符

需求：把
换行标签变成文本转换成字符显示在页面上常用特殊字符表：

其他特殊字符表：

E 学习资料

E1 w3cschool离线手册

w3cschool离线手册菜鸟教程.CHM 2020年最新中文版！

w3cschool离线手册，不需上官网，不需联网，随时查看（前端必备）。
最详细的W3CSchool.chm文档，不管是初学者还是有经验的编程人员都应该具备的，内容丰富，不同的编程语言都有涉及，对于初学者，这个W3CSchool.chm文档也提供了一些练习题
参考手册涵盖了网站技术的方方面面。其中包括W3C的标准技术：HTML、CSS、XML 。以及其他的技术，诸如JavaScript、PHP、SQL等等。在w3school，提供上千个实例。通过使用在线编辑器，可以编辑这些例子，并对代码进行实验。

E2 课程代码、实例、视频

学习视频：

尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版（主）

学习资料：

gitee：https://gitee.com/zack-liu/java-web_-sgg_-learn-code.git

学习笔记系列

JavaWeb-01web基本概念
 JavaWeb-02 HTML入门
 JavaWeb-03 CSS技术
 JavaWeb-04 JavaScript
JavaWeb-05 jQuery

是我，Zack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb-02 HTML入门

文章目录A 基本概念B 页面例子B1 语法标准语法格式C 标签学习C1 文件标签C2 文本标签1. 注释标签：2. 换行标签：br3. 标题标签：h1 to h64. 段落标签：P5. 水平线标签：hr6. 字体加粗：b7. 字体斜体：i8. 字体标签：font9. 文本居中：center10.属性定义11.学习案例--公司简介C3 图片标签展示图片：imgC4 列表标签有序列表：ol li /li /ol无序列表：ul li /li /ulC5 链接标签（重点）a：定义一个超链接C6 常用标签
复制链接

扫一扫