JavaWeb

HTML

文本标记语言

vscode开发工具搭建

因为我使用的IDEA是社区版,代码高亮补全缩进都有些问题使用vscode是最好的选择~

安装

Visual Studio Code – Code Editing. Redefined

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下载完毕后,一路next即可完成安装~

插件推荐

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

编写一个html页面

记事本编写代码效果,在浏览器上直接显示hello world

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

以上写法当然不标准

<html>
    <head>
        &lt;title&gt;这是页面标题</title>
    </head>
    <body>
        hello world
    </body>
</html>

DOM树

所有的标签都是html的子标签

headbody是兄弟标签

headtitle是下兄弟标签


标签:有始有终

标签


快速生成代码框架 :!+ enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html标签

注释标签
<!-->
标题标签

h1-h6

段落标签
<p></p>
换行标签
<br/>

换行后的间隙比段落的小

格式化标签

加粗:strong 、b

倾斜:em、i

删除线:del、s

下划线ins、u

img标签
src属性

img标签必须搭配src使用图片路径

相对路径
./xxx.png
./img/xxx.png
../xxx.png     上一层路径
绝对路径

图片路径

网络上的图片资源

其他属性
a标签(超链接
href

点击后就跳到哪个页面,图片可以

target

默认_self,跳转新页面覆盖原页面

_blank打开新页面跳转

表格标签
table标签

表示整个表格

tr

表示表格一行

td

表示一个单元格

th

表示表头单元铬,居中加粗

thead

表格头部区域范围比th大)

tbody

表格得到主体区域


表格标签有一些属性可以用于设置大小边框等.但是一般使用CSS方式设置
这些属性都要放到table标签中,

使用

表格头部+表格主体+单元格合并

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!-- <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr> -->

        <tr>
            <td>张三</td>
            <td rowspan="2"></td>
            <td>3</td>
        </tr>
        <tr>
            <td>李四</td>
            <!-- <td>男</td> -->
            <td>4</td>
        </tr>
        <tr>
            <td colspan="2">李四/女</td>
            <!-- <td>女</td> -->
            <td>5</td>
        </tr>
    </table>
</body>

</html>
列表标签
无序列表

ulli

有序列表

olli

通过type控制序号的样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

start从哪个序号开始

dldtdd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是无序列表</h1>
    <ul>
        <li>这是内容1</li>
        <li>这是内容2</li>
        <li>这是内容3</li>
    </ul>

    <h1>这是有序列表</h1>
    <ol type="A" start="3">
        <li>这是有序列表1</li>
        <li>这是有序列表2</li>
        <li>这是有序列表3</li>
        <li>这是有序列表4</li>
    </ol>

    <h1>这是自定义列表</h1>
    <dl>
        <dt>自定义列表显示内容
            <dd>这是自定义列表1</dd>
            <dd>这是自定义列表2</dd>
            <dd>这是自定义列表3</dd>
            <dd>这是自定义列表4</dd>
        </dt>
    </dl>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

表单标签

完成服务器一次交互

表单

form

<form action="test.html">
   ... [form内容]
</form>

关于 form 需要结合 服务器 &amp; 网络编程 来进一步理解. 后面再详细研究.

表单控件
input

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

通过type的取值,来控制input类型

lable标签

搭配 input 使用. 点击 label 也能选中对应单选/复选框, 能够提升用户体验.

<label for="male"></label> <input id="male" type="radio" name="sex">
select标签

下拉菜单

<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>
语义标签

没有固定的用途

div

独占一行,是一个盒子

span

不独占一行,是一个小盒子

案例练习

个人简历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>蔡徐坤</h1>
    <div>
        <h2>基本信息</h2>
        <img src="./ikun.png" alt="" width="500" height="350">

        <span>
            <p>求职意向:篮球开发</p>
        </span>
        <span>
            <p>联系电话:1008611</p>
        </span>
        <span>
            <p>个人邮箱:niganma_aiyou.com</p>
        </span>
        <span>
            <p><a href="https://gitee.com/jyutao/">厉不厉害你坤哥的Gitee</a></p>
        </span>
        <span>
            <p><a href="https://blog.csdn.net/weixin_45646601/">坤哥的博客</a></p>
        </span>

    </div>

    <div>
        <h2>教育背景</h2>
        <ol>
            <li>1990 - 1996 幼黑子幼儿园 幼儿园</li>
            <li>1996 - 2002 小黑子小学 小学</li>
            <li>2002 - 2005 中黑子中学 初中</li>
            <li>2005 - 2008 高黑子中学 高中</li>
            <li>2008 - 2012 偶像练习生大学 唱跳rap专业 坤科</li>
        </ol>
    </div>

    <div>
        <h2>专业技能</h2>
        <ul>
            <li>rap 基础语法扎实,已经刷了 800 道 律师函;</li>
            <li>常见篮球都可以独立实现并熟练应用</li>
            <li>熟知跳舞理论,并且可以金鸡独立</li>
            <li>掌握 唱歌 能力,并且独立开发了再看一眼就会爆炸。</li>
        </ul>
    </div>

    <div>
        <h2>个人项目</h2>
        <ol>
            <li>
                <h3>打胎</h3>
                <p>开发时间:2021年-2023年被发现</p>
                <p>功能介绍</p>
                <ul>
                    <li>触发被动律师函</li>
                    <li>隐藏技能睡未成年</li>
                </ul>
            </li>


            <li>
                <h3>美国孝队</h3>
                <p>开发时间:????年被发现</p>
                <p>功能介绍</p>
                <ul>
                    <li>三分线起跳螺旋扣篮</li>
                    <li>触发被动律师函</li>
                </ul>
            </li>
        </ol>

    </div>

    <div>
        <h2>个人评价</h2>
        <p>全民制作大家好,我是练习时长两年半的个人练习生蔡徐坤。喜欢唱、跳、rap、篮球。</p>
    </div>
</body>

</html>
填写信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <thead>
            <h3>填写简历信息</h3>
        </thead>
        <tr>
            <td>
                <label for="name">姓名</label>
            </td>
            <td>
                <input type="text" name="" id="name">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="sex" id="female" checked="checked">
                <label for="female">
                    <img src="./女.png" alt="" width="20" height="20"></label>

                <input type="radio" name="sex" id="male">
                <label for="male">
                    <img src="./男.png" alt="" width="20" height="20"></label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                    <option value="">2004</option>
                </select>

                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                </select>

                <select name="" id="">
                    <option value="">--请选择日期--</option>
                    <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <label for="school">就读学校</label>
            </td>
            <td>
                <input type="text" name="" id="school">
            </td>
        </tr>

        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" name="" id="server">
                <label for="server">后端开发</label>
                <input type="checkbox" name="" id="fe">
                <label for="fe">前端开发</label>
                <input type="checkbox" name="" id="test">
                <label for="test">测试开发</label>
                <input type="checkbox" name="" id="all">
                <label for="all">全栈开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握技能</td>
            <td>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td>项目经历</td>
            <td>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="" id="read">
                <label for="read">我已经阅读公司招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>

        <tr>
            <td></td>
            <td><h3>请应聘者确认:</h3></td>

        </tr>
        <tr>
            <td></td>
            <td>
                <ul>
                    <li>以上信息有效</li>
                    <li>可以尽早就职</li>
                    <li>可以接受加班</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

特殊字符

空格&amp;nbsp

小于号&amp;lt

大于号&amp;gt

按位&amp;amp

网站推荐

HTML特殊字符编码对照表

MDN介绍

HTML(超文本标记语言) | MDN (mozilla.org)


HTML 只是描述了页面的骨架结构.


原文地址:https://blog.csdn.net/m0_73075027/article/details/133419751

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_16429.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注