web基础Day01

web基础Day01

web概述

新建一个TXT文件，编写完成之后，将后缀改为html即可。

html文件不分大小写

HTML不是一门编程语言，是一门标签语言。 a.
HTML本质是一个文档。 b.
HTML文档是由标签组成的文档。 c.
HTML Hyper Text Markup Language（超文本标记语言） d.
HTML概述 1.

头部分：书写配置信息，书写在head中的内容会优先加载。 体部分：书写页面构成的标签。 HTML基本结构 2. - <起始标签>

font标签
color属性：
颜色名称 red green
Hex #AAAAAA 6为16进制数值
rgb rgb(0,255,255);
size属性： 1~7 默认大小为3
属性：

. . .

align 对齐方式 left 左对齐 center 居中对齐 right 右对齐 justify 自适应 属性： i. 标题标签 b. 有序列表 i.

• 无序列表 ii.
• • type 图标样式 disc 实心圆 square 实心方块 属性：
  列表标签 c.

  square 实心方块
  circle 空心圆
  i.
  src 图片路径
  alt 代替图片出现的文字
  width 宽度 px %
  height 高度 px %
  属性：
  img图片标签 d.
  a标签可以作为一个超链接的标签使用。
  创建一个包含id或name属性的a标签。
  
  埋下书签 a)
  创建一个包含href属性的a标签，href属性值位#name
  
  提供跳转标签 b)
  在页面内部跳转 ------ 书签 1)
  百度一下
  在页面间跳转 2)
  a标签的功能:
  name 标签名称
  href 跳转的目标地址
  target _self 在当前窗口打开页面 _blank新打开创建打开页面
  属性: i.
  a锚标签 e.
  table表示一个表格，需要在其中添加代表行和列的子标签
  table ○
  tr ○
  td ○
  th ○
  border 边框宽度
  cellspacing 单元格之间的空白距离
  cellpadding 边框与单元格内容之间的距离
  bgcolor 背景颜色
  table的重要属性: ○
  table表格标签 f.

  bgcolor 背景颜色
  bordercolor 边框颜色
  width 宽度
  align 对齐方式
  align 对齐方式
  bgcolor 背景颜色
  tr重要属性: ○
  align 对齐方式
  bgcolor 背景颜色
  width 宽度
  height 高度
  colspan 可横跨的列数 column
  rowspan 可竖跨的行数 row
  th/td重要属性: ○

  定义表格的标题

  在地址栏中手动拼接参数。这种方式如果遇到较多的参数和较复杂的参数值，
  会难以拼接，如果拼接很有可能出现错误。所以不推荐直接在地址栏中书写参
  数。
  i.
  利用form表单提交数据。在form表单中书写的内容，提交时会自动拼接在浏览
  器的地址栏中。
  ii.
  提交数据的方式：
  form表单标签 1.

  action: form表单提交的地址 method: 提交方式 属性： 参数拼接在地址栏中 安全性较低 参数拼接的长度一般不超过1KB get提交特点： 在底层以流的形式提交 安全性较高 在理论上传递的参数长度不收限制 post提交特点： method：一共有7种提交方式。常用的有两种 get post 文本框 text 输入的文本信息直接显示在框中 密码框 password 输入的文本以圆点或者星号的形式显示 单选框 radio 进行单项的选择 如性别选择 多个radio的name属性相同会被当 作一组来使用 必须用value为选项指定提交的值 复选框 checkbox 进行多项选择，爱好的选择。 多个checkbox具有相同的name属 性时会被当作一组来使用 必须用value为选项指定提交的值 隐藏字段 hidden 如果有一些信息，不希望用户看见，又希望表单能够提交，就 可以用隐藏字段隐含在表单中 提交按钮 submit 实现表单提交操作的按钮 可以通过value属性指定按钮显示的文 字 type属性  重要属性: ○ type属性： input输入框 a. form使用 2. form表单标签

  submit
  字
  重置按钮
  reset
  重置表单到初始状态
  按钮
  button
  普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的
  行为。可以用value属性指定按钮显示的文字。
  文件上传
  项 file
  提供选择文件进行上传的功能。
  图像
  image
  利用一张图片替代提交按钮的功能, 不常用
  name 标签名称。并且在form表单中需要被提交的数据标签身上必须要
  包含一个name属性。否则不会被提交。
  value 当前标签具有的值
  重要属性：

  北京 南京 成都 天河北 中关村 下拉框： b. 这是一个文本域 文本域： c. 作业：练习注册表单。 3.

  页面构建初期，使用table组成页面，但是面对复杂页面组成是，table难以完成
  对应的布局格式。
  a.
  后来产生新的页面组成方式，利用div+css两门技术实现页面的组成和样式的修
  改
  b.
  页面构成与样式修改 1.
  div 块级元素 每个元素自己独占一行
  span 行内元素 多个元素同在一行
  p 块级元素 每个元素自己独占一行
  div 盒子模型 2.
  css就是层叠样式表。
  页面中的多个元素都需要进行相同的样式修改，若一个一个修改则会造成代码
  冗余和维护的不便利性。
  a.
  页面中大量标签可以通过层叠样式表来完成批量修改。 b.
  css注释： /**/
  css语法 c.
  css 3.
  标签身上书写style属性，添加样式 i.
  css引入的四种方式：
  css在页面中的引入： 4.
  #div1{
  }
  #id选择器
  .class1{
  }
  类选择器
  元素名{
  }
  元素名选择器
  基本选择器
  div中所有的span元素选中
  div span{
  后代选择器
  扩展选择器
  css选择器 5.
  CSS概述

  }
  div中所有的子元素span
  div>span{
  }
  子元素选择器
  div的下一个相邻的兄弟span
  div+span{
  }
  相邻兄弟选择器
  选择包含name属性的div
  div[name]{
  }
  选择包含name='ls’属性的div
  div[name=‘ls’]{
  }
  属性选择器
  #id,.class1,span{
  }
  多元素选择器(分组选择器)
  其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
  :link 未点击的状态
  注：在不设置visited状态时active生效，否则会出现visited覆盖active效果
  :visited 被点击过的状态
  :hover 鼠标移动到元素之上但是仍然未点击的状态
  :active 被鼠标点击着的状态
  伪元素选择器：