重生之我在地球Online当程序员19

最新推荐文章于 2024-09-16 23:05:35 发布

锦鲤的小妹

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量903

点赞数 13

分类专栏：重生之我在地球Online当程序员文章标签： html

本文链接：https://blog.csdn.net/jinlidexiaomei/article/details/140719317

版权

HTML 学习

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

示例：

<html>
    <head>
    </head>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

注意:

格式：
- \ 头固定写法 (文本格式、编码格式 …)
- \ 正文 (所有的内容都写到正文中 )
- html 中掌握语义标签 (不同的标签代表语义： p段落标签、h 标题标签、img 图片标签) 重点标签
  
  标签的行级元素、块级元素（这个标签到底是站一行还是不占一行）

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

Idea 创建工程

前端工具的问题:

webStrom 和idea 的使用一样 (收费)

vsCode 微软工具 (免费的 )

hbuilder 前端开发工具 (免费)

课堂上面直接用 idea 写

（1）、新建Empty Project

（2）、新建一个java项目

（3）、新建Module后，创建html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

HTML 文档声明

HTML5的文档声明：

<!DOCTYPE html>

HTML4 的文档声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE> 声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

简单实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加业主</title>
</head>
<body>
    <!--这是注释，快捷键： ctrl + shift + / -->
    <!--页面内容，写到body中-->
    业主姓名： <input type="text" name="username">   <br/>
    业主电话： <input type="text" name="tel">  <br/>
    性别：<input type="radio" name="sex">男
        <input type="radio" name="sex" checked>女   <br/>
    身份证号:  <input type="text" name="idNo"> <br/>
    房屋编号：
        <select name="houseNo">
            <option>请选择</option>
            <option value="1">101</option>
            <option value="2">102</option>
            <option value="3">201</option>
            <option value="4">202</option>
        </select>  <br/>
    备注：
        <textarea name="remarks" rows="10" cols="50"></textarea>
</body>
</html>

说明:

input 标签
select 下拉框
多内容文本框

Table 改造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加业主</title>
</head>
<body>
    <!--
        input 表单元素
            type
                text 文本框
                radio 单选按钮
        table
            border 边框
            cellspacing 表示单元格与单元格之前的间隙
            cellpadding 内容与单元格之间的填充
    -->
    <table border="1" cellspacing="0" cellpadding="5" align="center