Chapter1&2 HTML与CSS

1. html基础

1.1 html书写规范

  1. 格式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        页面内容
    </body>
    </html>
  2. 注释

    <!-- 注释内容 -->

1.2 HTML标签

  1. 标签的格式

    <标签名>内容</标签名> <!--双标签-->
    <标签名/> <!--单标签-->
  2. 规则

    • 标签名大小写不敏感
    • 标签分为单标签与双标签,常见单标签:
      • br:换行
      • hr:水平线
  3. 标签的属性

    • 基本属性:可以修改简单的样式效果 bgcolor="red"
    • 事件属性:可以直接设置事件响应后的代码 onclick="alert('你好!');"

1.3 常用标签

  1. font字体标签

    • color属性:颜色

    • face属性:字体

    • size属性:文本大小

      <font color="red" face="宋体" size="5">我是字体标签</font>

      效果:
      我是字体标签

  2. 特殊字符

    效果描述格式编号
     空格&nbsp;&#160;
    <小于号&lt;&#60;
    >大于号&gt;&#62;
    &和号&amp;&#38;
    引号&quot;&#34;
    撇号&apos;&#39;
  3. 标题

    • h1-h6h1最大

    • align属性:对齐,leftcenterright

      <h1 align=center>标题</h1>

      标题

  4. 超链接

    • <a>标签代表超链接

    • href属性设置链接地址

    • target属性设置跳转方式

      • _self :当前页面
      • _blank :打开新页面
      <a href="" target="_self">个人博客</a><br/>

      个人博客

  5. 列表标签

    • 无序列表 <ul>
    • 有序列表 <ol>
  6. img标签

    • 显示图片

    • src属性设置图片路径

      • 相对路径:...
      • 绝对路径:http://ip:port/工程名/资源路径
    • widthheight属性设置宽度和高度

    • border设置边框(数字,像素数)

    • alt 显示出错时的文字提示

      <img src="omg.png" wight=200 height="300" border="1" alt="omg">
  7. 表格

    • table标签

      • border属性:边框
      • widthheight:宽与高
      • align:设置表格相对于页面的位置
      • cellspacing 设置单元格间距(0则无间距)
    • <tr>标签:行

    • <td>标签:单元格

    • <b>标签:加粗

    • <th>标签:格式化的单元格(加粗、居中)

    • 代码示例及效果

      <table border="1" width=300 height=200 cellspacing="0">
          <tr>
              <th>1.1</th>
              <th>1.2</th>
              <th>1.3</th>
          </tr>
          <tr>
              <td align=center>2.1</td>
              <td>2.1</td>
              <td>2.1</td>
          </tr>
      </table>
      1.11.21.3
      2.12.12.1
  8. 跨行跨列表格

    • <td>或<th>标签中使用
    • 跨行:colspan属性,等于几则跨几行
    • 跨列:rowspan属性
  9. iframe标签

    • 页面上开辟小区域,显示单独的页面

    • 与<a>标签组合使用

      1. iframe标签中使用name属性定义名称

      2. a标签的target属性设置为iframename属性值

      3. 示例

        <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
        <br/>
        
        <ul>
            <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
            <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
            <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
        </ul>
  10. 表单

    • form标签,用于收集用户信息的所有元素集合

    • input标签:文本输入框, 根据type属性:

      • type属性为text:文本输入框,value属性设置默认值
      • type属性为password:密码输入框
      • type="radio":单选框,name设置属性用于分组,checked="checked"默认选中当前选项
      • type="checkbox":复选框,checked="checked"默认选中
      • type="select":下拉列表框,option标签设置下拉列表内容,selected="selected"属性设置默认选中
      • type="textarea":多行文本输入框
        • row属性:显示的行高
        • cols属性:显示几个字符宽度
        • 标签内容即为默认值
      • type="reset":重置按钮,value属性修改其名称(默认重置)
      • type=submit:提交按钮,value·····
      • type=button:按钮,····
      • type=file:文件上传域
      • type=hidden:隐藏域,发送某些信息而不需要用户看到时使用
    • 表单格式化:
      一般将表单内容放到表格中

  11. 表单的提交

    • action属性设置提交的服务器地址
    • method属性设置提交的方式GET(默认)或POST
    • 表单提交时,数据没有发送的原因:
      • 表单项没有name属性
      • 单选、复选、下拉列表的option选项没有添加value属性
      • 表单项不在form标签中
    • GET请求的特点
      • 浏览器地址栏中的地址是:action属性 + [? + 请求参数],请求参数的格式为:name=value&name=value
      • 不安全
      • 数据长度有限制
    • POST请求的特点
      • 地址栏中只有action属性
      • 相对于GET方法更加安全
      • 理论上没有数据长度的限制
  12. 其他标签

    • div:默认独占一行
    • span:长度为封装数据的长度
    • p:段落标签,默认在其上下方各空出一行(如果存在则不再空)

2. css

2.1 css语法规则

  1. 格式

    选择器 {
        属性:;
    }
  2. 说明

    • 浏览器根据选择器选择css样式,选择器名字是用户定义的
    • 属性是要设置的样式名,属性与值组成样式声明,多个声明间用分号隔开,最后一个可以不加

2.2 CSS 和 HTML 的结合方式

  1. 标签属性中设置

    • 在html标签的style属性上设置”key: value value;”

    • 可读性差,没有复用性

    • 示例

      <div style="border: 1px solid red;">div标签</div>
  2. head中设置

    • head中使用style标签,为各种标签设置css格式

    • style中遵循css语法,注释为 /* */

    • 只能在当前页面复用,维护不方便

    • 示例

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              div{
                  border: 1px solid red;
              }
              span{
                  border: 2px solid blue;
              }
          </style>
      </head>
      <body>
          <div>div标签</div>
      <div>div标签</div>
      <span>span标签</span>
      </body>
      </html>
  3. 单独的css文件

    • 在.css文件中定义css样式

    • 在html文件的头部通过link标签引入

      <link rel="stylesheet" type="text/css" href="style.css">

2.3 css选择器

  1. 标签名选择器
    • 格式
      标签名{
          属性:}
    • 引入后自动应用到相应的标签
  2. id选择器
    • 格式
      #idxxx{
          属性:;
      }
    • xxx为任意数字
    • 需要在标签中定义id属性:id="id002"
  3. class 选择器(类选择器)
    • 格式
      .classXX{
          属性:}
    • 要在标签中加上class属性:class="class01"
  4. 组合选择器
    • 格式
      选择器1, 选择器2, 选择器n{
          属性:}
    • 可以让多个选择器共享样式
    • 可以是不同类型的选择器

2.4 常用样式

  1. 颜色
    • color: ;
    • 可以是名称black、red、blue等
    • 可以是rgb值:rgb(255,255,0)
    • 也可以是十六进制值:#0000ff
  2. 宽度和高度
    • 要先设置边框才能看到
    • widthheight属性
    • 可以用像素值px或百分比
  3. 背景颜色
    • background-color:#0F2D4C
  4. 字体样式
    color: #FF0000; 字体颜色
    font-size: 20px; 字体大小
  5. 边框
    • border: 1px solid red;
    • 三个值分别代表粗细、形状、颜色
    • 形状有实线(solid)、虚线(dashed)等
  6. div居中
    • 使整个div快块相对于页面居中
    • 通过页边距来设置
    • margin-left: auto;
    • margin-right: auto;
  7. 文本居中
    • text-align: center;
  8. 超链接去下划线
    • text-decoration:none
  9. 表格细线
    • 即合并单元格与表格的边框
      table{
          border: 2px solid red; // /*设置边框*/
          border-collapse: collapse;  /*将边框合并*/
      }
      td{
      border: 2px solid red;
      }
  10. 列表去除修饰
    • 即去除前面的点或序号
      ul {
          list-style: none;
      }