html

作者: 流逝_a443 | 来源:发表于2018-10-29 19:19 被阅读0次

一.html标签(标记)

1.标签语法

双标签(常规标签):<标签名 属性名1:属性值1 属性名2:属性值2....>标签内容</标签名>
单标签:<标签名 属性名1:属性值2 属性名2:属性值2.../> 或者<标签名 属性名1:属性值2 属性名2:属性值2.../>

说明:
标签名 --是html中已有的标签,不能是自己随便命名。标签名和<以及标签名和/之间不能头空格>
属性--属性和属性对应的值用:连接,多个属性之间用空格隔开
标签内容 - 在开始标签和结束标签之间,标签的内容可以是任意的(可以是文本也可以是其他标签)

2.head标签中的内容

head中的标签有:title,meta,base,link,style,script
title - 设置网页标题
meta - 设置网页元数据(单标签)

3.body

body中的标签主要用来在网页的内容中添加显示信息的


image.png

二.文本标签

image.png
image.png

三.列表标签

image.png
image.png

四.图片和超链接

image.png

1图片标签:img

单标签
a.src属性 - 图片地址(可以本地图片路径也可以是网络图片的url)
本地图片:地址可以是相对路径也可以是绝对路径,一般将图片放在img文件夹中,然后写相对路径
b.title --设置图片标题(鼠标停留在图片上,显示的内容)
c.alt -- 设置图片加载失败的提示信息


image.png

2.超链接标签:a.标签

a.内容 - 文字/图片
b.herf - 跳转的目的地址
c.网页地址 - 跳转到指定的网页
-->


image.png

b.herf - 跳转的目的地址
c.网页地址 - 跳转到指定的网页
d.本地的html文件地址 - 跳转到本地的html对应的网页中
e.空 - 刷新网页
f.选择器 - 在当前网页中,跳转到指定的位置


image.png

五.数据表格

image.png

1.表格标签

     table标签 - 整个表格
     tr - 行
     td - 单元格

2.边框相关的属性

    border - 边框的宽度
    bordercolor - 设置边框颜色(颜色值可以是英语单词 - red,也可以RGB对应的16进制值 - #ff0000)
    cellspacing - 单元格和单元格之间的间隙
    cellpadding - 设置内容和单元格边框之间的间距

3.背景颜色

    bgcolor - 背景颜色
    
    a.作为table属性 - 设置整个表格的背景颜色
    b.作为tr属性 - 设置一行的背景颜色
    c.作为td属性 - 设置某一个单元格的背景颜色
image.png

4.宽度和高度

    width - 设置宽度
    height- 设置高度
    
    
    a.作用与table - 设置整个表格的宽度和高度(会按比例分配每一行和每一列的宽度和高度)
    b.分别设置每一行的高度和每一列的宽度
    
     -->
    <!-- 应用:细线表格
    第一步:设置整个表格的背景颜色(边框颜色)和每个单元格的背景颜色(表格内容的颜色)不一样
    第二步:设置cellspacing的值为边框的宽度
image.png

5.对齐方式

    align - center(居中)/left(左对齐)/right(右对齐)
    
    a.作用于table, 让整个表格在其父标签中居中/左对齐/右对齐
    b.作用于tr, 让整行中每个单元格中的内容在其单元格中居中/左对齐/右对齐
    c.作用于td, 让指定的单元格中的内容居中/左对齐/右对齐
     -->
    <!-- 单独设置每一行和每一列的宽度和高度 -->
image.png

六.复杂表格

image.png

1.制作复杂表格的方法:

    a.确定表格的最大行数, 在table中用tr表示出来
    b.确定每一行有多少个单元格,用td表示出来
    c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值,如果是列合并设置colspan的值
image.png
image.png

相关文章

  • 基础编程语言学习线路图

    HTML HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTML段落HT...

  • HTML头部-10

    HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...

  • html 大纲

    html 通用 html 简介 html 常用标签 html 属性 html 表格 html 字体 html 表单...

  • web 前端学习线路图

    一、HTML 教程 HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTM...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • HTML 基础

    HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...

  • html常用的基本标签

    HTML基础包括web工作原理,HTML概述,HTML基本标签和HTML高级标签。 〈html〉...〈/html...

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML:基础(2)元素

    HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...

  • 2018-10-29 第二阶段 day1 htm

    1.html说明 说明html版本html5-- ...

网友评论

      本文标题:html

      本文链接:https://www.haomeiwen.com/subject/orqitqtx.html