html语言(day19总结)

HTML学习

1.web标准(由万维网(www=w3c)指定的网页开发规范)
2.什么是html?

html是超文本标记语言(类似markdown语法)
html是通过不同的标记(标签)来决定网页上的不同内容, 学习html就是学html中的标签(标记)

3.html语法

a.语法
双标签: <标签名 属性名1=值1 属性名2=值2 ...>标签内容</标签名>
单标签: <标签名 属性名1=值1 属性名2=值2 .../> 或者 <标签名 属性名1=值1 属性名2=值2 ...>
b.说明
标签名 - 必须是html提供的标签名,不能随便写;
属性 - 以'属性名=值'的形式成对出现的,多对之间用空格隔开;属性的顺序可以任意,不会影响效果
值必须放在双引号中
标签内容 - 只有双标签才有标签内容;标签内容可以是任何内容(不光只能是文字,还可以是其他一个或者多个标签)

DOCTYPE: 说明html版本
html - html5

网页内容结构:
<html> - 代表整个网页
<head></head> - 显示网页标题顶部的位置
<body></body> - 网页内容部分
</html>

1)head中主要有以下标签:

meta - 定义了HTML文档中的元数据(设置网页的基本设置)
title - 设置网页标题
#######(设置网页图标
rel - 设置文件作用;stylesheet:样式表,icon:图标
type - 设置文件类型, 文件类型/文件后缀;text/css: 文本/后缀是css, image/ico: 图片/后缀是ico
href - 设置文件路径; 可以是绝对路径也可以是相对路)#######
style - 在html中提供CSS代码对应的标签
link - 导入图标/CSS文件的标签
script - 导入js代码/文件的标签
base - url基本地址

2)标题标签(h1-h6)
                  双标签
                   一个标签占一行
3)段落标签(p标签)
        双标签,保证一个段落对应一个p标签
        一个标签占一行
4) font标签
        双标签
        一行可以有多个
5)文字效果相关标签
        在HTML中直接敲或者空格、缩进是无效的。
        <br/> - 单标签,往网页中的内容强制换行
        &nbsp; - 一个像素(一个"&nbsp"代表空一个像素)
        &emsp; - 一个空格
        <b></b>  - 加粗
        <strong></strong>   - 加粗(有强调的意义)
        <i></i>   - 倾斜
        <em></em> - 倾斜(有强调的意义)
6)无序列表(ul)
        ul标签 - 代表列表容器,是一个整体
        li标签 - 列表中的元素
7)有序列表(ol)
        ol标签 - 代表列表容器,是一个整体
        li标签 - 列表中的元素
8)自定义列表(dl)
        dl标签 - 代表列表容器,是一个整体
        dt标签 - 小分类标签(名词)
        dd标签 - 小分类下面的元素(解释)
9)图片标签(img)
        单标签
        默认情况下一行可以显示多张图片
        
        a.src属性:设置图片地址/路径; 可以是本地路径也可以是网络地址
        b.title属性:设置图片标题(当鼠标停留在图片上才会显示出来)
        c.alt属性:图片加载失败的时候的提示信息
10)超链接(a)
        双标签
        
        1). href属性:跳转的目的地
        a.网址 - 点击超链接直接加载网址对应的网页
        b.本地html文件地址 -  点击超链接直接加载本地html文件对应的网页
        c.#  - 刷新
        d.选择器 - 让当前页面滚动到指定的位置
        
        2)target属性: 跳转方式
        _self  - 在当前页面中加载新的网页(默认值)
        _blank - 在新的页面中加载新的网页
                    <!--加载本地html文件-->
    <a href="03-列表标签.html">列表</a>
    
    <!--刷新当前网页-->
    <a href="#">刷新</a>
    
    <!--页面内跳转-->
    <a href="#top">回到顶部</a><br />
11)表格
        标签
        1.table标签 - 代表表格整体
        cellspacing属性:设置表格中单元格和单元格以及单元格和表格表框的间距
        bgcolor属性:设置整个表格背景颜色(包含单元格的部分)
        cellpadding属性:设置单元格中的内容到单元格(上下左右)边框之间的距离
        width属性:设置整个表格的宽度
        height属性:设置整个表格的高度
        align属性:center(居中),left(左对齐),right(右对齐); 让整个表格在它的父标签里面居中、居左或者居右
        
        border属性:设置单元格边框的宽度
        bordercolor属性:单元格边框的颜色
        
        2.tr  - 代表表格中的一行
        bgcolor属性:设置一行中所有单元格的背景颜色
        height属性:设置一行的高度
        align属性:让一行中所有单元格的内容在单元格中居中、居左或者居右
        
        3.td  - 代表表格中的一个单元格
        bgcolor属性:设置指定单元格的背景颜色
        width属性:设置td所在的列的宽度
        align属性:让当前单元格中的内容在单元格中居中、居左或者居右
        
    
        
        补充:细线表格
        1)设置整个的table的背景颜色是边框线的颜色
        2)设置每个单元格的颜色和边框线的颜色不一样
        3)设置单元格和单元格的间距(cellspacing)为1
        colspan属性:列合并
        rowspan属性:行合并
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容