初学前端-HTML

cchen.835

已于 2023-11-14 12:59:23 修改

阅读量288

点赞数

分类专栏：前端文章标签：前端

于 2022-09-27 22:05:03 首次发布

本文链接：https://blog.csdn.net/weixin_61392399/article/details/127032033

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍前端三剑客之一的HTML,一起来看看

HTML结构

HTML是一个“标签”化的编程语言，不能描述逻辑但是能表示特征，我们来写第一个程序

1.html 标签是整个 html 文件的根标签 ( 最顶层标签 )

2.head 标签中写页面的属性 .

3.body 标签中写的是页面上显示的内容

4.title 标签中写的是页面的标题

使用VScode还有自动生成代码框架的快捷键 ！+shift

HTML标签

注释标签

注释不会显示在界面上，目的是提高代码的可读性

快捷键Ctrl+/ 快速注释

通过F12开发者工具可以查看到注释

标题标签: h1-h6

有六个 , 从 h1 - h6. 数字越大 , 则字体越小

段落标签: p

把一段比较长的文本粘贴到 html 中 , 会发现并没有分成段落

p标签中输入lorem自动生成长文本

注意

p 标签之间存在一个空隙

当前的 p 标签描述的段落 , 前面还没有缩进

html 内容首尾处的换行 , 空格均无效

在 html 中文字之间输入的多个空格只相当于一个空格

要想输入多个空格需要输入 进行转义

html 中直接输入换行不会真的换行 , 而是相当于一个空格

换行标签: br

br 是 break 的缩写 . 表示换行

br 是一个单标签 ( 不需要结束标签 )

br 标签不像 p 标签那样带有一个很大的空隙 .

</br> 是规范写法 . 不建议写成 <br>

格式化标签

加粗 : strong 标签和 b 标签

倾斜 : em 标签和 i 标签

删除线 : del 标签和 s 标签

下划线 : ins 标签和 u 标签

学习CSS也能完成同样的操作，了解就好

图片标签: img

img必须要有src属性表示照片的路径

alt属性：替换文本，当图片不能正确显示时就会显示替换的文字

title属性：提示文本，当鼠标在图片上时就会有提示

width/height属性：设置图片的宽高建议设置一个会自动等比例缩放，避免失衡

注意

照片的位置不同路径的写法也大不相同

1）相对路径

同级路径 : 直接写文件名即可 ( 或者 ./)

下一级路径 : 照片/我很好.jpg

上一级路径 : ../照片/我很好.jpg

2）绝对路径

磁盘路径 D:/照片.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

超链接标签: a

<a href="https://www.sogou.com">搜狗网站</a>

href: 必须具备 , 表示点击后会跳转到哪个页面

target: 打开方式 . 默认是 _self. 如果是 _blank 则用新的标签页打开

链接的几种常见形式

1外部链接: href 引用其他网站的地址

 <a href="https://www.sogou.com">搜狗网站</a>

.2.内部链接：网站内部页面之间的链接. 写相对路径即可

<a href="test.html" target="_blank">当前文件内跳转</a>

3.空链接: 使用 # 在 href 中占位

<a href="#">没意义的空网站</a>

4.下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

<a href="test.zip">文件</a>

表格标签

table 标签 : 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格 . 会居中加粗

thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )

tbody: 表格得到主体区域

列表标签

主要使用来布局的 . 整齐好看

ul无序列表 ol有序列表 li表示列表项

注意

元素之间是并列关系

li 中可以放其他标签

表单标签

表单是让用户输入信息的重要途径

form 标签：form功能是进行前后端交互，描述了要把数据按照什么方式 , 提交到哪个页面中（后续详细介绍）

input 标签

各种输入控件 , 单行文本框 , 按钮 , 单选框 , 复选框我分别介绍

1)单行文本框

2)密码框

可以看到输入的数据不会直接显示出来

3）单选框

补充

我们可以通过name属性多选一（排他），通过checked属性选择默认选项，通过lable标签使得提高选框的范围，提高用户体验

<input type="radio" name="gender" id="female"><label for="female">女</label>

4）复选框

5）按钮

后面会结合JS使用处理点击事件

提交按钮能过触发表单提交，要搭配form使用后续介绍

6）选择文件

点击选择文件会弹出对话框，选择文件

7）下拉菜单

8) 多行输入

无语义标签 div/span

div 是独占一行的 , 是一个大盒子

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

小练习

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>个人简历</title>
    </head>
    <body>
        <h1>请填写简历信息</h1>
        <table width="500px">
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    
                    <input type="radio" name="gender" id="man"><label for="man"><img src="照片/man.png" alt="照片" width="18px">男</label>
                    <input type="radio" name="gender" id="female"><label for="female"><img src="照片/woman.png" alt="照片" height="18px">女</label>
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <select>
                        <option>选择年份</option>
                        <option>2001</option>
                        <option>2002</option>
                    </select>   
                    <select>
                        <option>选择月份</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                    
                    <select>
                        <option>选择日期</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>应聘岗位</td>
                <td>
                     <input type="checkbox">前端开发
                     <input type="checkbox">后端开发
                     <input type="checkbox">测试开发
                     <input type="checkbox">运维开发
                </td>
            </tr>
            <tr>
                <td>掌握的技能</td>
                <td>
                    <textarea cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>项目经历</td>
                <td>
                    <textarea cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" >我已仔细阅读过公司的招聘要求
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#">查看我的状态</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h2>请应聘者确认：</h2>
                    <ul>
                        <li>以上信息真实有效</li>
                        <li>能够尽早去公司实习</li>
                        <li>能够接受公司的加班文化</li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
    </html>