HTML+CSS知识点-周1.md

最新推荐文章于 2024-09-11 20:12:18 发布

小小勤~

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量412

点赞数

分类专栏： HTML+CSS基础知识点文章标签： html css

本文链接：https://blog.csdn.net/qq_41008567/article/details/107122984

版权

本文详细介绍了HTML和CSS的基础知识，包括浏览器内核、网页组成、HTML概念与语法、常用标签如图片和链接、列表、特殊符号、语义化、表格、CSS的引入方式、选择器、文字属性以及HTML表单的使用。强调了语义化和CSS布局的重要性，适合初学者学习。

摘要由CSDN通过智能技术生成

一、浏览器及内核(渲染引擎)

主流浏览器	内核
safari 苹果浏览器	webkit
chrome 谷歌浏览器	webkit --> blink
opera 欧朋	presto --> webkit --> blink
firefox 火狐	gecko
IE 微软IE浏览器	trident

国内浏览器

   QQ、360、UC、猎豹浏览器...
  无自主研发内核，基本都是使用webkit、trident 内核改造

二、网页组成

    结构层   --  HTML
    表现层   --  CSS
    行为层   --  Javascript

W3C组织：万维网联盟，制定web标准
web标准（W3C标准）要求网页三层结构应该相分离

三、HTML初识

1、HTML概念

HyperText Markup Language 超文本标记语言

超文本：不仅可以承载文本、还可以承载图片、动画、音频、视频…
用来描述网页的语言
不是编程语言，是标记语言

2、HTML基本语法

元素-标签以及标签之间的内容这个整体又称之为元素

3、HTML基本结构

<!DOCTYPE html> -告诉浏览器以html5的标准去解析网页,网页根标签代表网页开始和结束

<head> - 网页头部：通常放页面的元信息

<meta charset="utf-8"> -设置网页的编码方式（字符集）
               utf-8: 国际编码（万国码）
               gb2312 : 国标，简体中文
               gbk : 国标扩，简体+繁体

<title>  - 网页标题

四、常用标签

1、标签分类

块级标签	行内标签
从上往下、独占一行	从左到右、水平排列在一行
默认宽度占满父级,高度由内容撑开	默认宽度和高度都是由内容撑开
可以设置宽高,可以设置所有的盒模型属性	不可以设置宽高，水平方向盒模型属性（padding、border、margin）可以正常设置，垂直方向盒模型不能设置
text-align:center 有效	text-align:center 无效

占满父级表示盒子实际内容的宽度 content+ 左右padding + 左右border + 左右的外边距margin= 父级宽度100%

块级标签
        hr 分割线  
        div 区块、盒子
        p   段落
        h1-h6   标题   
        ol  有序列表    type="1/A/a/I/i"
        ul   无序列表    type="desc/circle/square"
        li   无序列表和有序列表的项目
        dl   定义列表
        dt   放名词或术语
        dd   放描述或者说明
        form   表单域

行内标签
        span    无语义标签，给一段文字中的指定文本设置特殊样式
        i       样式斜体 
        em      斜体，并且强调
        b       样式加粗
        strong  加粗并且强调
        sub     下标
        sup     上标
        del     删除文本

行内块级标签（img、表单元素input/textarea/select）
从左到右、多个行内块级标签水平排列在一行
可以设置宽高,可以设置所有的盒模型属性
text-align:center 无效

居中效果
1、块元素中的行内元素或者行内块居中，给外部的这个块元素设置text-align:center;
2、块元素在父级元素中水平居中，给这个块元素设置margin:0 auto;

2、图片img标签

    <img src="图片路径../ : 返回上一级目录
    ../../: 返回上两级目录" alt="替换文本" >

3、链接 a 行内元素

    本网站中的页面跳转
    <a href="相对路径/目标页面的网址" target="_blank在新窗口中打开/_self : 默认值，当前窗口打开" title="提示文字"> 链接文本 </a>

    锚点（锚记）链接 ：跳转到当前页面的指定位置
    <h3 id="f1"> ... </h3>
    <a href="#f1"> ... </a>
    跳转页面同时指定位置：
    <a href="./4、链接.html#floor2"> 跳转到链接页面的第2层</a>

五、列表

1、有序列表

'1 / A / a / I /i'ol和li属于固定父子标签，ol的直接子标签只能是li
    <ol type="A">
        <li>张三</li>
        <li>
            <h3> ... </h3>
            <p>

最低0.47元/天解锁文章