JavaWeb开发学习笔记_HTML和CSS

基础标签和样式

标签

标题标签

<h1>...<h1>(h1 -> h6)

水平线标签

<hr>

img标签

<img src="...">
img标签:

• src: 图片资源路径
• width: 宽度(px: 像素; %: 相对于父元素的百分比)
• height: 高度

路径书写方式:

• 绝对路径:
  1. 绝对磁盘路径: D:\学习资料\day01-HTML-CSS\资料\3. 图片、音频、视频\img\news_logo.png
  2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
• 相对路径:
  1. ./: 当前目录(./可以省略)
  2. ../: 上一级目录

span标签

<span>...</span>

• <span>是一个没有语义的布局标签
• 特点: 一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开, 不可以设置宽高.

div标签

• <div>是一个没有语义的布局标签
• 特点: 一行只显示一个, 宽度默认式父元素的宽度, 高度默认由内容撑开, 可以设置宽高.

超链接标签

<a href="..." target="...">...</a>

属性:

• href: 指定资源访问的url
• target: 指定在何处打开资源链接
  • _self: 默认值, 在当前页面打开
  • _blank: 在空白页面打开

video标签, audio标签

<video>, <audio>
要注意添加播放控件
controls="controls", 简写为controls

换行, 段落标签

<br>, <p>

文本加粗标签

<b>, <strong>

css样式

css属性

• color: 颜色
• font-size: 字体大小(px)
• text-decoration: 修饰文本(none表示标准文本)
• line-height: 设置行高
• text-indent: 设置首行缩进
• text-align: 设置文本的水平对齐方式

css引入方式

行内样式

写在标签的style属性中(不推荐)

<!-- 方式一: 行内标签 -->
<h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>

内嵌样式

写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

<!-- 方式二 -->
<style>
    h1 {
        color: red;
    }
</style>

外联样式

写在一个单独的css文件中(需要通过link标签在网页中引入)

<!-- 方式三: 外联样式 -->
<link rel="stylesheet" href="css/news.css">

css文件代码如下:

h1 {
    color: red;
}

颜色表示形式

关键字

预定义的颜色名, 如下:
red, green, blue...

rgb表示法

红绿蓝三原色, 每项取值范围: 0~255
rgb(0, 0, 0)

十六进制表示法

'#'开头, 将数字转换成十六进制表示
#000000, #ffffff, 可以简写: #000, #fff

css选择器

选择器优先级: id>类>元素

元素选择器(标签选择器)

/* 元素选择器 */
h1 {
    color: #4d4f53;
}

类选择器

/* 类选择器 */
.cls {
    color: #888888;
}

id选择器

唯一

/* id选择器 */
#time {
    color: #888888;
}

盒子模型

盒子模型组成: 内容区域 (content), 内边距区域 (padding), 边框区域 (border), 外边距区域(margin).

div {
    width: 200px;
    height: 200px;
    /* 设置width height为盒子的宽高 */
    box-sizing: border-box;
    /* 背景色 */
    background-color: aquamarine;

    /* 内边距: 上 右 下 左 */
    padding: 20px 20px 20px 20px;
    /* 边框: 宽度 线条类型 颜色 */
    border: 10px solid red;
    /* 外边距: 上 右 下 左 */
    margin: 30px;
}

页面居中

#center {
    width: 75%;
    /* 外边距 */
    /* 上, 右, 下, 左 */
    /* margin: 0% 12.5% 0 12.5%; */
    /* 上下, 左右 */
    margin: 0 auto;
}

表格, 表单标签

表格标签

<!-- border: 规定表格边框的宽度 -->
<!-- cellspacing: 规定单元之间的空间 -->
<table border="1px" cellspacing="0" width="600px">
    <tr>
        <!-- 表头单元格具有加粗居中效果 -->
        <th>序号</th>
        <th>品牌Logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr>
        <td>1</td>
        <td><img src="img/huawei.jpg" width="100px"></td>
        <td>华为</td>
        <td>华为技术有限公司</td>
    </tr>
</table>

表单标签

<!-- 
form表单属性:
    action: 表单提交的url, 往何处提交数据. 如果不指定, 默认提交到当前页面
    method: 表单的提交方式.
        get: 在url后面拼接表单数据(...?username=Tom&age=12), url长度有限制. 默认值
        post: 在消息体(请求体)中传递的, 参数大小无限制
    --> 
<form action="" method="get">
    <!-- 表单项必须有name属性才可以提交 -->
    用户名: <input type="text" name="username">
    年龄: <input type="text" name="age">

    <input type="submit" value="提交">
</form>

表单项标签

<form action="" method="post">
    <!-- 默认值, 定义单行的输入字段 -->
    姓名: <input type="text" name="name"> <br><br>
    <!-- 定义密码字段 -->
    密码: <input type="password" name="password"> <br><br>
    <!-- 定义单选按钮 -->
    性别: <label><input type="radio" name="gender" value="1"> 男 </label>
            <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
    <!-- 定义复选框 -->
    爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
            <label><input type="checkbox" name="hobby" value="game"> game </label>
            <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
    <!-- 定义文件上传按钮       -->
    图像: <input type="file" name="image"> <br><br>
    <!-- 定义日期/时间/日期时间 -->
    生日: <input type="date" name="birthday"> <br><br>
    时间: <input type="time" name="time"> <br><br>
    日期时间: <input type="datetime-local" name="datetime"> <br><br>
    <!-- 定义邮件输入框 -->
    邮箱: <input type="email" name="email"> <br><br>
    <!-- 定义数字输入框 -->
    年龄: <input type="number" name="age"> <br><br>
    <!-- 下拉列表 -->
    学历:   <select name="degree">
                <option value="">--- 请选择 ---</option>
                <option value="1">大专</option>
                <option value="2">本科</option>
                <option value="3">硕士</option>
                <option value="4">博士</option>
            </select> <br><br>
    <!-- 文本域 -->
    描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
    <!-- 定义隐藏域 -->
    <input type="hidden" name="id" value="1">

    <!-- 表单常见按钮 -->
    <!-- 可点击按钮 -->
    <input type="button" value="按钮">
    <!-- 重置按钮 -->
    <input type="reset" value="重置">
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
    <br>
</form>

参考

黑马程序员. JavaWeb开发教程