Java零基础学习031-Web前端第一天-html

HTML

1.标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落文字标签

<p></p>
<p align="right">段落1-居右</p>
<p align="center">段落2-居中</p>
		<hr>分割线
    加粗<b>标签</b>
    斜体<i>标签</i>
    下划线<u>标签</u>
    删除线<s>标签</s>

3.列表标签

<h3>无序列表</h3>
    <ul>
        <li>刘备</li>
        <li>孙尚香</li>
        <li>刘备</li>
        <li>刘备</li>
    </ul>
    <hr>
    <h3>有序列表</h3>
    <ol>
        <li>Java基础</li>
        <li>MySQL</li>
        <li>HTML</li>
        <li>spring</li>
    </ol>
    <h3>列表嵌套</h3>
    <!--有序列表和无序列表可以任意无限嵌套-->
    <ul>
        <li>凉菜
            <ol>
                <li>东北大拉皮</li>
                <li>毛豆花生</li>
                <li>皮蛋东子</li>
                <li>拍黄瓜</li>
            </ol>
        </li>
        <li>热菜
            <ol>
                <li>尖椒炒肉</li>
                <li>麻辣茄子</li>
                <li>磨破豆腐</li>
            </ol>
        </li>
    </ul>

4.图片标签（img）

• src属性：配置资源路径

  • 1.相对路径：访问站内资源时使用相对路径

    • a.资源和页面在同一目录：直接写文件名
    • b.资源在页面的上级目录：…/文件名
    • c.资源在页面的下级目录：文件夹名/文件名

  • 2.绝对路径：访问站外资源时使用，又称为图片盗链，存在找不到图片的风险

• alt属性：当图片不能显示的时候显示的文本

• title属性：图片标题，当鼠标悬停在图片上显示的文本

• width：设置宽度，像素或百分比（上级元素），当只设置宽度时高度会自动等比例缩放

• height：设置高度

<img src="a.jpg" alt="这是a图片" title="衣服">
<img src="../b.jpg" alt="这是b图片" width="100" height="50">
<img src="abc/c.jpg" alt="这是c图片" width="50%">
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="这是绝对路径图片">

5.超链接（a标签）

• href作用类似于图片标签的src属性，设置请求的资源路径

  <a href="https://www.baidu.com">超链接1</a>
  <a href="a.jpg">超链接2</a>
  <a href="index.html">超链接3</a>
  

• 图片超链接

<a href="https://www.baidu.com"><img src="a.jpg" width="200" alt=""></a>

6.表格（table）

• border：边框
• caption：表格标题
• th：表格表头
• tr：table row 表示行
• td：table data表格数据（表示列）
• colspan：跨列合并
• rowspan：跨行合并

<table border="1">
  <tr>
      <td colspan="2" align="center">1-1</td>
      <td rowspan="2">1-3</td>
      <td>1-4</td>
  </tr>
  <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-4</td>
  </tr>
</table>

<table border="1">
    <caption>购物车</caption>
    <tr>
       <th>编号</th><th>商品名</th><th>价格</th>
    </tr>
    <tr>
        <td>1</td><td>耐克球鞋</td><td>300</td>
    </tr>
    <tr>
        <td>2</td><td>李宁跑鞋</td><td>500</td>
    </tr>
</table>

7.表单（form）

• action：这里是请求地址
• value：设置控件的默认值
• maxlength：设置最大字符长度
• readonly：只读
• input标签
  • text：文本框
  • password：密码框
  • submit：提交按钮（不设置value默认为提交）
  • button：自定义按钮（value需要自定义）
  • reset：重置按钮
  • radio：单选
  • checkbox：多选（checked：设置默认选中）
  • date：日期选择器
  • file：文件选择器
• label：标签，一般和其他配合使用
• select：下拉选择器
  • option：选项
  • selected：默认选中
  • value：没有value则提交标签体内容，有value则提交value内容
• id：设置唯一标识
• for：让元素和某个元素建立关系 里面写某个元素id的值

<form action="http:www.baidu.com">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    性别：<input type="radio" name="gender" value="man" id="g1"><label for="g1">男</label>
    <input type="radio" name="gender" value="woman" id="g2" checked><label for="g2">女</label> <br>
    爱好：<input type="checkbox" name="hobby" id="h1"><label for="h1">啤酒</label>
    <input type="checkbox" name="hobby" id="h2"><label for="h2">烧烤</label>
    <input type="checkbox" name="hobby" id="h3"><label for="h3">小龙虾</label>
    <input type="checkbox" name="hobby" id="h4"><label for="h4">火锅</label>
    <input type="checkbox" name="hobby" id="h5" checked><label for="h5">都喜欢</label><br>
    生日：<input type="date" name="birthday"><br>
    <!--文件选择器-->
    照片：<input type="file" name="pic"><br>
    <!--下拉选择器-->
    所在地：<select name="city" id="">
    <option value="gz">广州</option>
    <option selected>上海</option>
    </select><br>
    <input type="submit" value="注册">
    <input type="reset">
    <input type="button" value="自定义按钮">
</form>

8.分区标签

• 作用：可以理解为一个容器，将多个有相关性的标签放在一个分区标签里面，便于统一管理。

• 常见的分区标签：

  • div：块级分区标签，独占一行
  • span：行内分区，共占一行

• 如何对页面进行分区：一个页面至少分为3个大区（头，体，脚），每个大的区域再划分为n个小的区域。

• HTML5标准中为了提高代码可读性新增几个分区元素

  • header：头
  • main：主体
  • footer：脚
  • section：区域S
  • nav：导航