Html-CSS学习笔记

最新推荐文章于 2024-07-07 22:54:13 发布

CXY_C

最新推荐文章于 2024-07-07 22:54:13 发布

阅读量94

点赞数

分类专栏： JavaWeb 笔记文章标签： java 封装多线程

本文链接：https://blog.csdn.net/CXY_C/article/details/121585765

版权

JavaWeb 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

笔记

9 篇文章 0 订阅

订阅专栏

1、B/S软件的结构

C/S Client Server （客户端）
B/S Broswer Server (服务端)

在这里插入图片描述

2、前端的开发流程

在这里插入图片描述

3、网页的组成部分

在这里插入图片描述

4、Html简介

在这里插入图片描述

5、Html和CSS-html书写规范

在这里插入图片描述

6、标签介绍

1.标签格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感
3.标签拥有自己的属性

分为基本属性：bgcolor=“red” 可以修改简单的样式
事件属性:οnclick=“alert(‘你好’);” 可以直接设置事件响应后的代码
标签分为单标签和多标签

在这里插入图片描述

7、常用标签

7.1 特殊字符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>特殊字符</title>
</head>

<body>
<!-- 

    <   ====>>>   &lt;
    >   ====>>>   &gt;

-->


&lt;br&gt;这是换行符<br/>
空格要隔开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很远


</body>
</html>

7.2、标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <!-- 标题标签：
    
        h1 - h6 都是标题标签
        h1 最大
        h6 最小
        
            align : 对齐属性
                left     左对齐
                center   居中
                right    右对齐
    -->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>


</body>
</html>

7.3、超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!-- a标签是 超链接
        href属性设置连接的地址
        target属性设置哪个目标进行跳转
            _self       表示当前页面(默认值)
            _blank      表示打开新页面进行跳转
-->
<a href="https://www.baidu.com/">百度</a><br/>
<a href="https://www.baidu.com/" target="_self">百度_self</a><br/>
<a href="https://www.baidu.com/" target="_blank">百度_blank</a>


</body>
</html>

7.4、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <!--列表
        ul（unorder list） :  表示无序列表
                type属性可以修改列表项前面的符号
         li （list item）: 是列表项

        ol（order list） :   表示有序列表
    -->
    <ul type="none">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>

</body>
</html>

7.5、img标签

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

        在JavaSE中的路径也分相对路径和绝对路径
            相对路径：从工程名开始算

            绝对路径：盘符：/目录/文件名

        在JavaWeb中路径分为相对路径和绝对路径
            相对路径：
                .           表示当前文件所在目录
                ..          表示当前文件所在的上一级目录
                文件名       表示当前文件所在目录的文件。相当于 ./文件名   可省略

            绝对路径：
                正确格式是: http://ip:port/工程名/资源路径
                
                alt属性 ：表示图片出错后输出的文字

    -->
    <img src="../imgs/javaweb.png" width="640" height="504" alt="图片格式错误" />


</body>
</html>

7.6、表格标签

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

<body>
    <!--

      table标签是表格标签
            align 设置表格相对页面的对齐方式
            width 设置表格宽度
            height 设置表格高度
            cellspacing 设置单元格间距

      tr    是行标签
      th    是表头标签
      td    是单元格标签
            align 设置单元格文本对齐方式

      b 是加粗标签

      -->
    <table align="center" width="300" height="300" border="1" cellspacing="0">
        <tr>
            <th>1.1</th>
            <td align="center"><b>1.2</b></td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>

</body>
</html>

7.7、跨行跨列表格

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

<!--
    colspan 属性设置跨列
    rowspan 属性设置跨行

-->
    <table border="1" width="600" height="600" cellspacing="0">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr >
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td colspan="2" rowspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>

        </tr>
    </table>

</body>
</html>

7.8、iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签</title>
</head>
<body>
<!--  iframe标签 可以在页面开辟一个小区域显示一个单独的页面
            iframe和a标签组合使用的步骤：
                1.在iframe标签中使用name属性定义一个名称
                2.在a标签的target属性上设置iframe的name的属性值

-->
    <iframe src="8.2标题标签.html" width="500" height="500" name="cc"></iframe>

    <ul  type="none">
        <li><a href="8.1特殊字符.html" target="cc">特殊字符</a></li>
        <li><a href="8.2标题标签.html" target="cc">标题标签</a></li>
        <li><a href="8.5img标签.html" target="cc">img标签</a></li>
    </ul>


</body>
</html>

7.9、表单

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

    form标签就是表单
        input type=text         是文本输入框      value设置默认显示内容
        input type=password     是密码输入框      value设置默认显示内容
        input type=radio        是单选框          name属性可以对其进行分组  checked="checked"表示默认选中
        input type=checkbox     是复选框          checked="checked"表示默认选中
        input type=reset        是重置按钮        vakue属性修改按钮上的文本
        input type=submit       是提交按钮        vakue属性修改按钮上的文本
        input type=button       是按钮            vakue属性修改按钮上的文本
        input type=file         是文件上传域
        input type=hidden       是隐藏域    当我们要发送某些信息，而这些信息不需要用户参与，就可以使用（提交 的同时发给服务器）
        select 标签是下拉列表框
        option 标签是下拉列表框中的选项 selected="selected"表示默认选中

        textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
            rows 属性设置可以显示几行的高度
            cols 属性设置每行可以显示几个字符宽度
-->
    <form>
        用户名称:<input type="text" value="默认值" /><br/>
        用户密码:<input type="password" value="111" /><br/>
        确认密码:<input type="password" /><br/>
        性别:<input type="radio" name="sex"/>男<input type="radio" name="sex" />女<br/>
        兴趣爱好:<input type="checkbox" checked="checked" />java<input type="checkbox" />javascript<input type="checkbox" />c++<br/>
        国籍:<select>
            <option selected="selected">请选择国籍</option>
            <option >中国</option>
            <option>美国</option>
            <option>脚盆鸡</option>
            </select><br/>
        自我评价:<textarea cols="10" rows="10">默认值</textarea><br/>
        重新填写:<input type="reset"  value="重置" /><br/>
        上传文件：<input type="file" /><br/>
        提交:<input  type="submit" value="提交"/><br/>
        <input type="hidden" value="aaa" />
    </form>

</body>
</html>

7.10、表单提交的细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
        form标签是表单标签
            action属性设置提交的服务器地址
            method属性设置提交的方式GET(默认值)或POST

        表单提交的时候，数据没有发送给服务器的三种情况:
            1.表单项没有name属性值
            2.单选，复选(下拉列表中的option标签)都需要添加value属性，以便于发送给服务器
            3.表单项不在提交的form标签中

        GET请求的特点是:
            1.浏览器地址栏中的地址是：action属性[+？+请求参数]
                请求参数的格式是：name=value&name=value
            2.不安全
            3.它有数据长度的限制

        POST请求的特点是：
            1、浏览器地址栏中只有action属性值
            2、相对与GET请求要安全
            3、理论上没有数据长度的限制

-->
<form action="https://www.baidu.com/" method="get">
    <input type="hidden" name="action" value="login">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="user" value="默认值" /></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password"  name="password" value="111"  /></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex" />女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td>
                <input type="checkbox" name="java" checked="checked"  />java
                <input type="checkbox" name="javascript"/>javascript
                <input type="checkbox" name="c++"/>c++
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select name="country">
                    <option  selected="selected" >请选择国籍</option>
                    <option  >中国</option>
                    <option >美国</option>
                    <option >脚盆鸡</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea name="aa" cols="10" rows="10">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"  value="重置" /></td>
            <td align="center"><input  type="submit" value="提交"/></td>
        </tr>
    </table>
</form>

</body>
</html>

8、CSS常用样式

在这里插入图片描述

学尚硅谷的JavaWeb视频所做的笔记，链接：

https://www.bilibili.com/video/BV1Y7411K7zz?p=1

CXY_C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html-CSS学习笔记

1、B/S软件的结构C/S Client Server （客户端）B/S Broswer Server (服务端)2、前端的开发流程3、网页的组成部分4、Html简介5、Html和CSS-html书写规范6、标签介绍1.标签格式:<标签名>封装的数据</标签名>2.标签名大小写不敏感3.标签拥有自己的属性分为基本属性：bgcolor=“red” 可以修改简单的样式事件属性:οnclick=“alert(‘你好’);” 可以直接设置事件响应后的代码
复制链接

扫一扫

专栏目录