HTML基础知识

丶tenet

于 2023-11-21 23:07:25 发布

阅读量19

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_45490360/article/details/134543100

版权

HTML基础

零、Web 标准构成

结构化标准语言 HTML XHTML XML
表现标准语言 CSS
行为标准语言 Js DOM ECMAScript

一、浏览器是如何渲染一个 web 页面的？

1.在浏览器中输入 url  ，浏览器向服务器发送请求，服务器以二进制格式返回HTML页面（本质就是文本文件）
2.同时服务器的响应头包含一个 content-type:TEXT/HTML 属性，、
3.浏览器通过解析HTML 与、CSS 生成 DOM TREE 与 CSSOM TREE（CSSOM tREE不包含未在屏幕上打印的元素（link、title、script、meta） 
4.DOM TREE + CSSOM TREE = Render TREE => Layout(回流) => paint（重绘）

一、HTML （重点）：

Hyper Text Markup Language（超文本标记语言）

超链接标签

使用 base 标签可以控制页面中所有的超链接访问时打开窗口的方式 
	默认是_self	_blank打开新页面  
<base href="" target="_blank"/>

路径问题

路径    文件所在的位置
           绝对路径
              1.网址
              2.从电脑磁盘位置开始找 一直找到文件所在的目录
              	"D:\homework\codeingwolf/"

           相对路径   （前提：必须在同一磁盘下）
                ./  表示当前目录
                ./目录名/文件名 表示要跳转到页面在当前目录中的某个目录里

                 ../表示去到上一层目录
                 ../../便是去到上两层目录

                 ！！！ 以后的实际工作开发中 用的是相对路径

超链接伪类

        /* 未单击访问时的鼠标样式 */
        a:link{
            color: aqua;
            font-size: small;
        }
        /* 单击访问时的超链接样式 */
        a:visited{
            color: crimson;
            font-size: x-small;
        }
        /* 鼠标悬浮其上时的超链接样式*/
        a:hover{
            color: chartreuse;
            font-size: 20px;
        }
        /* 鼠标单击未释放时的超链接样式 */
        a:active{
            color: fuchsia;
            font-family: '楷体';
        }

设置鼠标样式

cursor   设置鼠标样式 
a{
     cursor:default; /*默认的鼠标样式*/
     cursor: wait;   /*正在加载*/
     cursor:pointer; /*超链接时的指针*/
     cursor:help;    /*帮助*/
     cursor:text;    /*文本*/
     cursor:crosshair;   /*十字*/
 }

特殊字符

特殊字符
    空格            &nbsp;
    大于号  >       &gt;
    小于号  <       &lg;
    引号    ""      &quot;
    版权符  ©       &copy;
    商标符          &reg;

列表

有序列表
	<ol>
		<li></li>
        <li></li>             
	</ol>
无序列表
	<ul>
         <li></li>
         <li></li>
         <li></li>
    </ul>

自定义列表
	<dl>
        <dt>
            <dd></dd>
            <dd></dd>
        </dt>
    </dl>

格式化标签（文字）

b	加粗		strong	加粗

i     斜体		em		斜体

s	删除线	del		删除线

u	下划线	ins		下划线

文字属性

文本对齐方式
text-align  left
            center
            right

            text-indent 文本首行缩进
            属性值是数字+px/em
            正值    向右缩进7
            负值    向左缩进

            text-decoration 文本装饰
            text-decoration : none
            text-decoration : underline;
            text-decoration : overline;
文本装饰，<a></a>用于去除下划线
相同的属性，后面的会覆盖前面的样式

设置文字大小px像素	1em(一倍字体大小)
Google浏览器中 1 个字默认是 16px		1em = 16px	最小是12px
字体加粗	bold(700)	normal(400)
font-style:italic;	字体倾斜

css背景属性

 背景属性：background
     复合属性
     background:url()    是否平铺    图片位置
eg:  background:url(../../images/w3c.png) repeat-x 

     background-color:red;
     background-repeat: repeat-x;    水平平铺
     background-repeat: repeat-y;    垂直平铺
     background-repeat: no-repeat;   不平铺

     改变背景图片位置    (后面必须是两个值，如果只写一个值，第二个默认是center)
     background-position: 20px 50px; (x)px (y)px
or  background-position: top;       上
or  background-position: bottom;    下
or  background-position: left;      左
or  background-position: right;     右
or  background-position: center;    中

background-position: top; = background-position: top center;

边框属性

边框属性
	border 
	边框粗细	width
	边框颜色	color
	边框形状 	style  
           		none   无边框
           		solid  实线
				double 双实线
		  	 	hidden 隐藏边框线 
           		dotted 圆点虚线
	       		dashed 短虚线

颜色属性

颜色属性
	1. 颜色单词 green red
	2. rgba()  background-color: rgba(255, 255, 255, 0.5); 
	3. 十六进制 #000000  -- #FFFFFF 
               0123456789ABCDEF

css只能继承文字、文本相关的属性
<a></a>标签无法继承父类的颜色属性
<h1></h1>——<h6></h6>  不可以继承文字大小，需要重新设置

CSS书写方式

css语法格式
            选择器{
                属性:值;

            css在html中的书写位置
                1   行内样式    
                    
                2   内嵌样式    
                        style type="text/css"
                            p{
                                color:red;
                                font-size:20px;
                            }    
                        /style

                3   外联样式(插入外部样式表)
                        方法一：在head中写入下列代码
                            <link href="../2_18/css.css" rel="stylesheet">
                        方法二： 在head中写入下列代码：
                         style type="text/css"
                            @import url("../2_18/css.css"); 
                         /style

当三种书写方式对同一个元素设置时，行内样式的优先级最高
            内嵌 和 外联 的优先级依据书写的位置而定，(下面的会覆盖掉上面的)

选择器

1. 标签选择器
2. class选择器
3. id选择器
4. *通配符选择器
5.复合选择器
	后代选择器
	并集选择器
	
起名规范：
	1. 见名知意
	2. class不区分大小写，但是id区分大小写
	3.无论是id还是class都不可以是纯数字
	4.一个标签可以有多个雷鸣
	5.id选择器（唯一选择器）

实体化三属性

html标签的显示模式
        块级元素    div、 p、 h1、 ul、 ol、 dl 、dt、 dd
            1.  单独占一行
            2.  可以设置宽 高
        行内元素
             1. 可以在同一行显示
             2.  设置宽度和高度不起作用

             span、 b、 strong、 i、 em、 del、 s、 u、 ins、 a
         行内块元素
              img 、input
              1. 可以设置宽度和高度
              2.  可以在同一行显示