前端----html---第一天

最新推荐文章于 2024-09-09 21:14:24 发布

榆木脑袋Conan_y

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量132

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/heart_No/article/details/120957217

版权

1. 前端开发

本学期要学javaweb，但是老师要求自学前端，包括html，css等，所以记录如下的学习笔记

1.1 绝对路径

链接一张图的图片
<img src="网页链接/本地连接"/>

1.2 文本格式化

	<!-- 文本加粗 -->
    字体被<strong>加粗</strong>了<br/>
    <!-- 文本倾斜 -->
    字体<em>倾斜</em><br/>
    <!-- 删除线 -->
    我是<del>删除线</del><br/>
    <!-- 下划线 -->
    我是<ins>下划线</ins><br/>

样例图

1.3 超链接

<!-- 
    语法格式 
    <a href="目标地址"  target="目标窗口的弹出方式">文字或图像 </a>
        href: 指定目标的url
        traget: 指定目标的弹出方式，默认：_self（再当前标签页中打开）   
                                        _blank（在新标签页中打开） 
    -->
    <!-- 外部链接 -->
    <h4>外部链接（网页链接）</h4>
    <a href="http://www.qq.com"  target="_blank">腾讯</a><br/>

    <!-- 内部链接 -->
    <h4>内部链接</h4>
    <a href="03-公司简介.html" target="_blank">公司简介</a>

    <!-- 空链接：#  用于还没有开发的页面 -->
    <h4>空链接：#</h4>
    <a href="#">空链接，不会跳转</a><br/>

    <!-- 下载链接 ，用于下载zip、exe文件
        如果是音乐文件，会直接播放
    -->
    <h4>下载链接</h4>
    <a href="A-Lin - 给我一个理由忘记.zip">下载《给我一个理由忘记.flac》</a>

    <h4>网页元素的下载链接</h4>
    <a href="蒲公英的约定吉他谱.7z"><img src="蒲公英的约定吉他谱.jpg" width="50"></a>

样例图：

1.4 锚点链接

何为锚点链接？

就是一个网页中，可以通过点击锚点链接，快速定位到网页的某处，常用的网站入：百度百科

详见  D:\Java_Web\frontDevelopment\html\04-锚点链接.html

1.5.1 表格1 （雏形）

<!-- 
    1. 表格的基本用法：
        <table>
            <tr>                           定义表格中的行
                <td>单元格内的文字</td>     单元格，必须在<tr>中
                ....
            </tr>
            ....
        </table>

    2. 表头单元格：剧中，加粗表示
        <th></th>
 -->
	<h4>普通表格</h4>
    <table>
        <tr><td>姓名</td>   <td>性别</td>   <td>年龄</td></tr>
        <tr><td>胡歌</td>   <td>男</td>   <td>40</td></tr>
        <tr><td>张学友</td>   <td>男</td>   <td>56</td></tr>
        <tr><td>刘德华</td>   <td>男</td>   <td>56</td></tr>
    </table>

    <h4>表头表格</h4>
    <table>
        <tr><th>姓名</th>   <th>性别</th>   <th>年龄</th></tr>
        <tr><td>胡歌</td>   <td>男</td>   <td>40</td></tr>
        <tr><td>张学友</td>   <td>男</td>   <td>56</td></tr>
        <tr><td>刘德华</td>   <td>男</td>   <td>56</td></tr>
    </table>

样例：（年龄都是随便瞎编的）

1.5.2 表格2（加上表格属性）

<!-- 
    表格属性：
        属性名              属性值                      描述
        align           left、right、center            对齐方式
        border          1 或 ""                        规定表格是否有【边框】，默认为""
        cellpadding     像素值                         规定单元与内部文字之间的空白距离，默认1像素
        cellspacing     像素值                         规定单元格之间的空白距离，默认2像素
        width           像素值或者百分比                规定表格的宽度
	
	表格的结构标签：
	<thead></thead>、表头
	<tbody></tbody>，表身
	把表头行和剩余行分别写在这两个标签内部就行了
 -->
<body>
    <h4 align="center">表头表格</h4>
    <table align="center" border="1" cellpadding="20"  cellspacing="0" width="500" heigth="200">
        <thead>
        <tr><th>姓名</th>   <th>性别</th>   <th>年龄</th></tr>
        </thead>
        
        <tbody>
        <tr><td>胡歌</td>   <td>男</td>   <td>40</td></tr>
        <tr><td>张学友</td>   <td>男</td>   <td>56</td></tr>
        <tr><td>刘德华</td>   <td>男</td>   <td>56</td></tr>
        </tbody>
    </table>
</body

样例图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAt98KhU-1635156584513)(C:\Users\Conan\AppData\Roaming\Typora\typora-user-images\image-20211025165147357.png)]$

1.5.3 表格——合并单元格

<!-- 
    合并单元格格式：
        - 跨行合并，rowspan="合并单元格的个数"
        - 跨列合并，colspan="合并单元格的个数"

    步骤：
        1. 确定是，跨行 还是 跨列
        2. 合并 <td colspan="2"></td>
        3. 删除多余单元格
 -->
<body>
    <table width="600" height="250" border="1" cellspacing="0" align="center">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td>      删除多余的单元格 -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

样例图：

1.6.1 无序列表

<!-- 
    无序列表（<ul>）的基本格式： 
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            .....
        </ul>
    
    【注意】：
        1. 列表项无顺序
        2. <ul>标签里只能由<li>标签，也不能写文字，但是<li>标签里可以放任何东西
        3. 无序列表中前面带的小圆点是可以改的，也可以去掉的。
 -->
<body>
    <h4>你喜欢的水果？</h4>
    <ul>
        <li>西瓜</li>
        <li>苹果</li>
        <li>火龙果</li>
    </ul>
</body>

样例图：

1.6.2 有序列表

使用场景：如果各个列表项中有顺序（比如排名），就需要用到有序列表

<!-- 
    有序列表（<ol>）语法格式：
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            ...
        </ol>
 -->
<body>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>胡歌-男粉 100w</li>
        <li>胡歌-女粉 99w</li>
    </ol>
</body>

样例图：

1.6.3 自定义列表

<!-- 
    1. 自定义列表的使用场景：一般对表头进行解释和描述
    2. 语法格式
    <dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
    </dl>
	3. <dl>里中只能有<dd>、<dt>两种标签
 -->
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>联系我们</dd>
        <dd>官方微信</dd>
    </dl>
</body>

样例图：

1.7 表单

写的比较粗糙。

<!-- 
    1. 表单的作用：收集信息
    2. 表单的组成：
        * 表单域：包含表单元素的区域，可以将表单的信息提交给服务器
            <form action="url地址" method="提交方式" name="表单域名称">
                表单的控件
            </form>
            method： get/post方式
            name：   自定义


        * 表单控件（可以点击操作的）
            <input type="属性值" name="name" size="10">
        * 提示信息

    3. label标签：用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）
        或者选择对应的表单元素上，用来【增加用户体验】
    
    4. <select></select>下拉框标签
        格式：(单选)
            <select>
                <option value="">选项1</option>
                <option value="">选项2</option>
                <option value="">选项3</option>
            </select>

    5. <textarea></textarea>文本域标签
        格式：  5行50列
            <textarea cols="50" rows="5">
                    内容
            </textarea>
 -->
<body>
    <form action="url" method="post" name="form">
        用户名：<input type="text" name="name" size="10" value="请输入用户名"><br/>

        密 码: <input type="password" name="pswd" size="10"><br/>

        年 龄：<input type="number" name="age" size="10" value="请输入年龄"><br/>

        性 别: 男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"><br/>
        
        <br/>使用了label标签
        <input type="radio" name="sex" id="sex"/>
        <label for="sex">男</label>
        <br/> <br/>

        兴趣爱好:
            <input type="checkbox" name="sleep" value="睡觉">睡觉
            <input type="checkbox" name="pg" value="敲代码">敲代码<br/>

        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置"><br/>

        <br/>普通按钮：<input type="button" name="code" value="获取验证码">

        <br/><br/>上传文件<input type="file" name="file">

        <br/><br/>院系：
        <select>
            <option value="马克思学院">马克思学院</option>
            <option value="计算机学院">计算机学院</option>
            <option value="理学院">理学院</option>
        </select>

        <br/><br/>文本域标签<br/>
        <textarea cols="50" rows="5">
            请描述个人就业经历，200字以内
        </textarea>
    </form>
</body>

样例图：

        <option value="理学院">理学院</option>
    </select>

    <br/><br/>文本域标签<br/>
    <textarea cols="50" rows="5">
        请描述个人就业经历，200字以内
    </textarea>
</form>

```

样例图：

榆木脑袋Conan_y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端----html---第一天

1. 前端开发本学期要学javaweb，但是老师要求自学前端，包括html，css等，所以记录如下的学习笔记1.1 绝对路径链接一张图的图片<img src="网页链接/本地连接"/>1.2 文本格式化  字体被加粗了  字体倾斜 
复制链接

扫一扫