html基础入门

最新推荐文章于 2024-05-28 22:57:50 发布

不会秃头的小齐

最新推荐文章于 2024-05-28 22:57:50 发布

阅读量1.4k

点赞数 4

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_46972127/article/details/124444843

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2.5格式化标签（不常用，一般用css进行美化）

1、html结构

html代码是由各种“标签”构成的。标签名放到<>中，构成一个标签，大多数标签成对出现，有开始标签也有结束标签，少数标签只有开始标签，称为“单标签”。开始标签中可以带有“属性”，id相当于给这个标签设置了一个唯一的标识符（身份证号码）

1.1、基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>

    <body>
        hello world
    </body>

</html>

1.2、标签的层次结构

·父子关系

·兄弟关系

基本结构中：

head 和 body 就是兄弟关系，head 和 body 是html的子标签，html是head 和 body 的父标签，head 是 title 的父标签，title 是 head 的子标签。标签之间的结构关系，构成了一个DOM树（Document Object Mode：文档对象模型）

2、html常见标签

2.1注释标签

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

快捷键 c

2.2标题标签

有六个从h1-h6，数字越大，字体越小

<h3>hello<h3>

2.3段落标签

把一段长文本粘贴到html中，会发现并没有按照原来的分段进行排版，而是合成了一大坨，此时就需要用到分段标签来进行还原操作。

<p>这是一个段落</p>

※注意

①p标签之间存在一个空隙

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

2.4换行标签

br 是break 的缩写，表示换行

※注意

①br是一个单标签

②br标签不像p标签那样有个很大的空隙

③<br/>是规范写法，不建议<br>

2.5格式化标签（不常用，一般用css进行美化）

①加粗：strong/b

②倾斜：em/i

③删除线：del/s

④下划线：ins/u

2.6图片标签

<img src="rose.jpg">

此时src的引入有三种方式：

①相对路径：根据jpg与html的相对位置来描述路径

②绝对路径：详细的路径

③网络路径：网络中路径

img标签的其他属性：

①alt：替换文本，当图片不能正确显示的时候，会显示一个替换的文字

②title：提示文本，鼠标放到图片上，就会有提示

③width/height：控制高度宽度

④border：边框

2.7超链接标签

<a href="http://www.baidu.com">百度</a>

超链接标签属性：

①href：必须具备，表示点击后会跳转到哪个页面

②target：打开方式，默认为self，如果是blank则用新的标签页打开

2.8表格标签

①table标签：表示整个表格

②tr：表示表格的一行

③td：表示一个单元格

2.9列表标签

无序列表：ul li

有序列表：ol li

2.10表单标签

①表单域：包含表单元素的区域，重点是form标签

②表单控件：输入框，提交按钮等，重点是input标签

属性：

type（必须有）：button，checkbox，text，file，image，password，radio

name：给input起了个名字，尤其对于单选按钮，具有相同的name才能多选一，而不能双选

value：input中的默认值

checked：默认被选中（用于单选按钮和多选按钮）

3、练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写简历信息</title>
</head>

<body>
    <table width="500px" cellspacing="0">
        <thead>
            <h3>请填写简历信息</h3>
        </thead>

        <tbody>
            <tr>
                <td>
                    <label for="name">姓名</label>
                </td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" id="male" checked="checked">
                        <!-- img要放到label内部，保证点击图标也能选中单选框 -->
                        <!-- 还需要把width加上，否则图片太大了 -->
                        <label for="male"><img src="性别男.png" alt="" width="20px">男</label>
                    <input type="radio" name="sex" id="female">
                        <label for="female"><img src="性别女.png" alt="" width="20px">女</label>

                </td>    
            </tr>
            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <select>
                        <option>--请选择年份--</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                    </select>
                    <select>
                        <option>--请选择月份--</option>
                        <option value=""selected="selected">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>
                        <option>--请选择日期--</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>
                        <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>
                        <option value="">31</option>
                    </select>

                </td>
            </tr>
            <tr>
                <td>
                    就读学校
                </td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td>
                    应聘岗位
                </td>
                <td>
                    <input type="checkbox"id="frontend">
                    <label for="frontend">前端开发</label>
                    <input type="checkbox"id="backend">
                    <label for="backend">后端开发</label>
                    <input type="checkbox"id="qa">
                    <label for="qa">测试开发</label>
                    <input type="checkbox"id="op">
                    <label for="op">运维开发</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"id="lisence">
                    <label for="lisence">我已阅读过公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#">查看我的状态</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>请应聘者确认</h3>
                    <ul>
                        <li>以上信息真实有效</li>
                        <li>能够尽早去公司实习</li>
                        <li>能够接受公司的加班文化</li>
                    </ul>
                </td>
            </tr>
        </tbody>

    </table>
</body>
</html>

不会秃头的小齐

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html基础入门

目录1、html结构1.1、基本结构1.2、标签的层次结构2、html常见标签2.1注释标签2.2标题标签2.3段落标签2.4换行标签2.5格式化标签（不常用，一般用css进行美化）2.6图片标签2.7超链接标签2.8表格标签2.9列表标签2.10表单标签3、练习1、html结构html代码是由各种“标签”构成的。标签名放到<>中，构成一个标签，大多数标签成对出现，有开始标签也有结束标签，少数标签只有开始标签，称为“
复制链接

扫一扫