day21-前端基础

day-21

html

1.认识标签

1.1标签的语法

(1)语法
  • 双标签:<标签名 属性名1=属性值1 属性值2=属性值2 ...>标签内容</标签名>
  • 单标签:<标签名 属性名1=属性值1 属性值2=属性值2 ...> 或者 <标签名 属性名1=属性值1 属性值2=属性值2 .../>
(2)说明

标签名

  • 标签名不能自己命名,而是使用当前html版本提供的标签名;不同的内容对应的标签名不一样
  • 哪些标签是单标签哪些标签是双标签,是固定的
  • 标签名前不能随便加空格

属性

  • 哪些标签有哪些属性是确定的,属性名和属性值之间用=连接,多个属性之间用空格隔开
  • 如果有多个属性,属性顺序可以随意
  • html中所有属性的值都必须用引号引起来,不管什么类型

标签内容

  • 指的是双标签开始标签和结束标签中的部分;
  • 双标签的内容中可以放任何东西(可以是文字,也可以是别的一个或多个标签)

2.head中的标签

meta —— 元数据,主要做一些网站设置性的工作

title —— 设置网页标题

link —— 导入文件(设置网页图标,导入外部样式)

设置网页编码方式
<meta charset="utf-8"
设置网页图标
<link rel="icon" type="image/ico" href="./img/aaa.ico"/>
  • rel —— 被导入的文件的作用,例如:stylesheet(样式标)、icon(网页图标)
  • type —— 对被导入的文件的类型进行说明,文件类型/文件后缀; text/css(文本文件,后缀是.css)
  • href —— 文件路径

3.文本标签

1.标题标签

当文本内容意义是标题时才选择标题标签

<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>

2.段落标签:p

一段文字如果表示一个段落就用p标签

3.网页中的换行和空格

在html中手动输入换行和空格无效

1.强制换行:

在网页中需要强制换行的位置加<br>

2.空格符号

&nbsp - 空一个像素

&emsp - 空一个空格

4.font标签

表示一段文字,这段文字可以和别的网页内容同行显示

5.水平线:
- 单标签

6.文字效果

  • 加粗:b标签和strong标签,strong有强调的意思
  • 倾斜:i标签和em标签,em有强调的意思

2.列表标签

网页中多个内容的意义是一样,或者表示一个分类下的具体内容等...

1.无序列表:ul标签,li标签
  • ul—— 代表整个容器
  • li —— 代表列表中的元素
2.有序列表:ol标签,li标签
  • ol —— 代表整个容器
  • li —— 代表列表中的元素
3.自定义列表:dl标签,dt标签和dd标签
  • dl —— 代表整个容器
  • dt —— 代表分组名
  • dd —— 代表每个元素

3.图片和超链接

1.图片标签: img - 单标签

  • src属性 - 图片地址(可以是网络图片地址也可以是本地图片地址)
  • title属性 - 设置图片标题
  • alt属性 - 图片加载失败后的提示语言

2.超链接: a

可以点击后跳转到其他网页的内容基本都是超链接

<a href="">标签内容</a>

(1)标签内容 - 决定点谁可以跳转; 文字超链接, 图片超链接

(2)href属性 - 决定跳转到哪个位置

  • 网络地址 —— 跳转到指定页面
  • 本地html文件地址 —— 跳转到指定的本地页面
  • 选择器 —— 在当前页面中跳转到指定位置
  • 空 —— 刷新页面(有兼容性问题)

(3)target属性

  • _self(默认) —— 在当前页面中加载新的内容
  • _blank —— 在新的页面中加载新的内容

4.表格标签

1.table标签 - 代表整个表格

  • border属性 —— 边框线的大小
  • cellspacing —— 单元格与单元格之间的间隙
  • align —— 设置对齐方式:lefr(默认)\right\center; 设置整个表格在其父标签中的对齐方式
  • width —— 设置整个表格的宽度(单位是像素)
  • heigth —— 设置整个表格的高度
  • cellpadding —— 设置内容到单元格上下左右之间的间距
  • bordercloor —— 表框的颜色
  • bgcolor —— 设置整个表格的背景颜色

2.tr标签 - 代表一行

  • align —— 设置当前行中所有单元格中的内容的对齐方式:lefr(默认)\right\center
  • height —— 设置当前行的高度
  • bgcolor —— 设置一行的背景颜色

3.td标签 - 代表一个单元格

  • align —— 设置当前单元格中的内容的对齐方式:lefr(默认)\right\center
  • width —— 设置当前单元格所在的列的宽度
  • bgcolor —— 设置当前单元格的颜色

4.补充: html中的颜色

(1)颜色单词; 例如:red, blue等

(2)#RGB十六进制, 0~255 -> 00~ff

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,155评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,141评论 6 13
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,138评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,695评论 1 45