Java的网页页面的设计工具1

文本相关标签

1. 内容标题： h1-h6

独占一行, 自带上下间距, 字体加粗

1. 换行: br

2. 段落标签p

独占一行, 自带上下间距

1. 水平分割线:hr

2. 加粗b

3. 斜体i

4. 下划线u

5. 删除线s

列表标签

1. 无序列表: ul和 li 组合

2. 有序列表: ol和li组合

3. 列表嵌套: 有序和无序可以任意无限嵌套

图片标签

• src: 资源路径

  • 相对路径:访问站内资源使用

    • 和页面同级目录: 直接写图片名

    • 在页面的上级目录: ../图片名

    • 在页面的下级目录: 文件夹名/图片名

  • 绝对路径:访问站外资源使用, 称为图片盗链,有找不到图片的风险

• alt: 当图片不能正常显示时显示的文本

• title:图片标题 当鼠标悬停时显示的文本

• width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比

超链接a

• href: 作用类似图片标签的src

• a标签包裹文本为文本超链接 , 包裹图片为图片超链接

• 页面内部跳转, 在目的地元素里面添加id属性, 然后在超链接的href属性中写#id 这样点击时就可以跳转到目的地元素的位置

表格标签table

• 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题

• 相关属性:border 边框 colspan跨列 rowspan跨行

表单form

• 作用: 获取用户输入的内容并提交给服务器

• 学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等

• • 相关代码:

  <form action="http://www.baidu.com">
      <!--placeholder占位文本
      maxlength最大字符长度
      value设置控件的值
      readonly只读-->
      用户名:<input type="text" name="username" maxlength="5" value="tom"
                 readonly placeholder="请输入用户名"><br>
      密码:<input type="password" name="password" placeholder="请输入密码"><br>
      <!--value设置提交的值,如果不设置则提交on checked设置默认选中-->
      性别:<input type="radio" name="gender" value="m" id="r1">
      <label for="r1">男</label>
      <input type="radio" name="gender" checked value="w" id="r2">
      <label for="r2">女</label><br>
      兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
      <input type="checkbox" name="hobby" checked value="hj">喝酒
      <input type="checkbox" name="hobby" value="tt">烫头<br>
      生日:<input type="date" name="birthday"><br>
      靓照:<input type="file" name="pic"><br>
      所在地:
      <select name="city">
          <!--value设置提交的内容,如果不写则提交标签体的内容
          selected设置默认选中-->
          <option value="bj">北京</option>
          <option value="sh" selected>上海</option>
          <option value="gz">广州</option>
      </select><br>
      <input type="submit" value="注册">
      <!--重置按钮-->
      <input type="reset" value="重置按钮">
      <!--自定义按钮-->
      <input type="button" value="自定义按钮">
      <hr>
      <button type="submit">注册</button>
      <button type="reset">重置按钮</button>
      <button type="button">自定义按钮</button>
  </form>
  

  分区标签

  • 作用: 可以理解为一个容器, 对多个有相关性的标签进行统一管理

  • 常见的分区标签包括:

    • div: 独占一行

    • span: 共占一行

  • HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的:

    • header 头

    • main 主体

    • footer 脚

    • section 区域

    • nav 导航

  CSS层叠样式表

  • Cascading Style Sheet, 作用: 美化页面, 相当于装修

  如何在HTML页面中添加CSS样式代码

  • 三种引入方式:

    • 内联: 在标签的style属性中添加样式代码, 弊端:不能复用

    • 内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用

    • 外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用

  选择器

  • 作用: 用来查找元素的, 找到之后才能添加样式

  1. 标签名选择器: 通过标签的名称选择页面中所有同名元素

  • 格式: 标签名{样式代码}

  1. id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复

  • 格式: #id{样式代码}

  1. 类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择

  • 格式: .class{样式代码}

  1. 分组选择器: 将多个选择器合并成一个选择器

  • 格式: div,#id,.class{样式代码}

  1. 属性选择器: 通过元素的属性选择元素

  • 格式: 标签名[属性名='值']{样式代码}

  1. 任意元素选择器: 选取页面中所有标签

  • 格式: *{样式代码}