HTML、CSS

本文介绍了HTML作为超文本编辑语言的功能,包括定义图片、音频、视频等内容。接着讲解了CSS用于控制页面样式的角色,提到了颜色、选择器和引入方式。还涵盖了HTML中的标题、图片、链接、音频视频标签、文本格式化以及页面布局的概念,如盒子模型和表格、表单的使用。
摘要由CSDN通过智能技术生成

HTML

  1. 超文本编辑语言
    1. 超越文本的限制;除了文字信息,还可以定义图片、音频、视频等内容;
  1. 标记语言
    1. html标签都是预定义好的,不可以随意的更改;
    2. html代码直接在浏览器中运行,html标签由浏览器解析;

CSS

  1. css:层叠样式,用于控制页面样式

基础标签&样式

标题

  1. 图片标签:<img>
    1. src:指定图片的url(绝对路径/相对路径)
      1. 绝对路径:绝对磁盘路径(属性中安全) 绝对网络路径(http://****)
      2. 相对路径:从当前文件开始查找(./:当前目录 ../:上级目录)
    1. width:图像的宽度(像素/相对于父元素的百分比)
    2. height:图像的高度(像素/相对于父元素的百分比)
  1. 标题标签:<h1>-<h6>
  2. 水平线标签:<hr>

标题样式

  1. CSS引入方式:
    1. 行内样式:写在标签的style属性中(不推荐);
    1. 内嵌样式:写在style标签中(可以卸载页面的任何位置,默认卸载head标签中);
    1. 外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入);
  1. 颜色表现形式:

关键字

预定义的颜色名

red、green、blue...

rgb表示法

红绿蓝三原色,每项取值范围:0-255

rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)

十六进制表示法

#开头,将数字转换成十六进制表示

#000000、#ff0000、#cccccc,简写:#000、#ccc

  1. 颜色属性
    1. color:设置文本内容的颜色;
  1. CSS选择器:用来选取需要设置样式的元素(标签)
    1. 元素选择器:
    1. id选择器:
    1. 类选择器:

超链接

  1. 标签:<a>
    1. 属性:
      1. href:指定资源访问url;
      2. target:指定在何处打开资源链接;
      3. _self:默认值,在当前页打开;
      4. _blank:在空白页打开;
  1. CSS属性:
    1. text-decoration:规定添加到文本的修饰,none表示定义标准的文本;
    2. color:定义文本的颜色;

排版

  1. 音频、视频标签
    1. <audio> <video>
  1. 换行、段落标签
    1. 换行:<br>;
    2. 段落:<p>;
  1. 文本加粗
    1. <b>;
    2. <strong>;
  1. CSS样式
    1. line-height:设置行高;
    2. text-indent:定义一个行内容的缩进;
    3. text-align:归档元素中文本的水平对齐方式;
  1. 注意
    1. 在html中无论输入多少个空格,只会显示一个。可以使用展位符&nbsp;

页面布局

  1. 盒子:
    1. 页面中所有的元素都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更加方便的进行页面布局;
  1. 盒子模型的组成:
    1. 内容区域(content);
    2. 内边距区域(padding);
    3. 外框区域(border);
    4. 外边距区域(margin);
  1. 布局标签
    1. <div>标签:
      1. 一行只显示一个(独占一行);
      2. 宽度默认是父元素的宽度,高度默认由内容展开;
      3. 可以设置宽高(width、height);
    1. <span>标签:
      1. 一行可以显示多个;
      2. 宽度和高度默认由内容展开;
      3. 不可以设置宽高(width、height);

表格、表单标签

表格

  1. 场景:
    1. 在网页中以表格(行、列)形式整齐展示数据;
  1. 标签:

表单

  1. 场景:
    1. 在网页中主要负责数据采集功能,注册登录等;
  1. 标签:
    1. <form>
  1. 表单项:
    1. 不同类型的input元素,下拉列表,文本域等;
    2. <input>:定义表单项,通过type属性控制输入形式;
    3. <select>:定义下拉列表;
    4. <textarea>:定义文本域;
  1. 属性:
    1. action:规定当提交表单时向何处发送表单数据,URL;
    2. method:规定用于发送表单数据的方式。GET、POST;
      1. GET:直接在地址栏返回提交的值,参数过大不能使用;
      2. POST:在消息体(请求体)中传递的,参数大小没有限制;

表单项

  1. <input>:
    1. 表单项,通过type属性控制输入形式;
  1. <select>:
    1. 定义下拉列表;
  1. <textarea>:
    1. 定义文本域;
  1. input中value和name 的区别
    1. value:
      1. value属性规定<input>元素的值;
      2. 不同的input值,用法不同:
        1. 对于“button”、“reset”、“submit”类型-定义按钮上的文本;
        2. 对于“text”、“password”、“heidden"类型-定义输入字段的初始(默认值);
        3. 对于“checkbox”、“radio”、“image”类型-定义与input元素相关的值,当提交表单时该值会发送到表单的actionURL;
        4. 注意:
          1. value 属性对于 <input type="checkbox">和 <input type="radio"> 是必需的;
          2. value 属性不适用于 <input type="file">
    1. name:
      1. name属性规定<input>元素的名称;
      2. name属性用于jsp中引用元素,或者在表单提交后引用表单数据;
      3. 只有设置了name属性的表单元素才能在表单时传递它们的值;
    1. id:
      1. id属性规定HTML元素唯一的id;
      2. id在HTML文档中必须唯一;
      3. id属性可以用作连接锚,通过jsp或css为指定id的元素改变或者添加样式;

day01-HTML-CSS.pptxicon-default.png?t=N2N8https://www.yuque.com/attachments/yuque/0/2023/pptx/23078715/1679399486856-3a8c9e5a-902a-4830-8f06-9370b9b33402.pptx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值