html笔记

最新推荐文章于 2024-01-18 19:00:14 发布

weixin_48495394

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量187

点赞数

分类专栏：练习笔记

本文链接：https://blog.csdn.net/weixin_48495394/article/details/108727403

版权

笔记同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

练习

46 篇文章 0 订阅

订阅专栏

什么是html

html(hypertext markup language):超文本标记语言,一种纯文本类型的语言
用来设计网页的标记语言
用该语言编写的文件,以.html或者.htm为后缀
有浏览器解释执行
html是一个扩展性很强的语言,可以嵌套用脚本语言编写的程序段,如:VBScript,JavaScript

html概述和基础语法

html是一种编写网页的解释性的标记语言,结合css和js实现功能复杂的页面
解析性:翻译,非编译—代码如果有错误,可能导致显示出来的与希望得到的不同,而不会报错
标记:用一对<>括起来的,显示时候会有特定的效果

html基础语法

标记语法
html用于描述功能的符号称为标记,比如<p>,<h1>等.
标记在使用时必须使用尖括号括起来,有些标记还必须成对出现<h1>,</h1>
封闭类型标记
<标记>内容</标记>
<标记属性1=“值” 属性2=“值”>内容</标记>

头元素–<title>

标题元素<title></title>用于为文档定义标题
标题元素的内容出现在浏览器顶部
没有属性
必须出现在<head>元素中
一个文档只能有一个标题元素

头元素–<meta>

元数据元素<meta>用于定义网页的基本信息
为空标记
常用的属性有:content http-equiv

<head>
    <title>我的第一个html页面</title>
    <meta http-equiv="refresh" content="10">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<h1 align ="center">sss</h1>居中对齐,如:

sss

文本与特殊字符

空格折叠
多个空格或制表符压缩成单个空格,即只显示一个空格
特殊字符(如空格),可以用转义字符,也称为字符实体
  空格
< <
> >

分组元素:
<div></div>:独占一行
<sapn></sapn>:不会影响原有布局
块级(block)元素和行内(inline)元素

块级元素:独占一行的元素,比如h1/p/div
行内元素:和其他元素在同一行上,比如span/a

列表的作用
-列表是指具有相似特征或者具有先后顺序的几行文字进行对其排序,如

XX
XX
XX
XX
所有的列表都由列表类型和列表项组成

列表类型: 有序列表<ol>->order list <ul>->unlist
列表项:<li>->list item,用于指示具体的列表内容

<div><ul><li>aaa</li> <li>bbb</li> <li>ccc</li></ul></div>无序列表
<div><ol><li>aaa</li> <li>bbb</li> <li>ccc</li></ol></div>有序列表

锚点:

<a name="xc"></a>
<a href="#xc">xc</a>

<table>
<tr> table row
<td> 单元格 table defination

<table border="1" width="200" style="height: 100px" cellspacing="0"
       cellpadding="1" align="center" >
    <caption><h1>表-1 收支表</h1></caption>

        <tr style="color: red">
            <td width="600" height="30">accccc</td><td>b</td>
        </tr>
    <tbody style="color: greenyellow">
        <tr>
            <td align="right" valign="top">c</td><td>d</td>
        </tr>
        <tr>
            <td width="600" height="30">accccc</td><td>b</td>
        </tr>
    </tbody>
        <tr>
            <td align="right" valign="top">c</td><td>d</td>
        </tr>
</table>

cellspacing表格边框间间距
cellpadding表格中字与边框距离
valign垂直位置
表格的其他应用

为表格添加标题

</table>
<table border="1" width="200">
    <tr>
        <td colspan="2">a</td>
    </tr>
    <tr>
        <td width="60">b</td>
        <td>c</td>
    </tr>
</table>

a
b	c

</table>
<table border="1" width="200">
    <tr>
        <td rowspan="2">a</td>
        <td>b</td>
    </tr>
    <tr>
        <td height="100">c</td>
    </tr>
</table>

a	b
	c

<table align="center" border="1" width="400px" >
        <caption>表-1</caption>
        <tr style="background-color: darkgrey">
            <td style="width: 200px">全月应纳税所得额</td>
            <td style="width: 100px">税率</td>
            <td style="width: 100px">速算扣除率</td>
        </tr>
        <tr>
            <td style="width: 200px">
                全月应纳税所得额<1500
            </td>
            <td style="width: 100px">
                10%
            </td>
            <td style="width: 100px">
                105
            </td>

        </tr>
        <tr>
            <td colspan="3">...</td>
        </tr>
        <tr>
            <td colspan="3"><table><tr><td style="width: 150px">计算公式为:</td><td>aa</td></tr></table></td>
        </tr>
    </table>

<iframe src="http://www.baidu.com"></iframe>导入页面
css: .name{}
html: <元素 class=“name”
css: input.kwaisuibianxx{}
html: <input class=“suibianxx”

一、CSS 概述	
	1、CSS 的作用：定义网页的外观，统一的方式，实现内容（数据）和表现（样式）分离

	2、CSS 的基础语法：
		样式属性名称1:值1;样式属性名称2:值2
		width:100px;height:200px;
		
		提出来定义：
			样式选择器
			{
				样式声明；
			}

	3、CSS 的定义方式：
		方式一：内联方式---CSS 样式定义在 html 元素的 style 属性里---重用性和可维护度不好
		方式二：内部样式表---CSS 样式定义在 head 里的 style 元素里
		方式三：外部样式表---CSS 样式定义在单独的 .css 文件里，html 页面上用 link 引入-----优先推荐使用

		a.html----准备多套样式，类似于皮肤的切换
			s1.css---红色
			s2.css---蓝色
			s3.css--黑白色

	4、特征	css（级联/层叠 样式表）
继承：子元素可以使用父元素的某些样式---字体相关、背景相关
	<body style="color:red" >
		111
		<p>text</p>
	</body>

不重复----并集
重复定义-----优先级
		内联 >  内部或者外部（以最后一次定义的为准，覆盖前面的相同部分）
		

二、选择器的定义---灵活的决定使用样式声明
	1、元素选择器，如 h1/div/p---以html中标记的名称-----为同一类元素定义样式

	2、样式类
		css：     .name {}
		html：    <任元素 class="name" 
------多种元素相同的样式

	3、分类
		CSS：     input.txt {}
		html:      <input class="txt"
	同一种元素下的细分
		<input type="text" />
		<input type="button" />

	4、ID选择器-----对页面上某个元素的唯一定义
		CSS:     #idvalue {}
		html:    <元素 id="idvalue"

	5、派生选择器---利用html元素的层次关系，选中某种结构下的元素
		CSS：    ul li a{XXX}
		html：  <ul><li><a>...

	6、选择器分组----为n多元素定义相同的样式部分
		CSS：       input,a.link,#title,.s1   {XXX}

	7、伪类----有不同的状态
		:link---未访问过的
		:hover---悬浮，悬停
		:active---按下
		:visited---访问过的
		CSS：	某种选择器:link/hover

	8、扩展---各种样式选择器----不重复的取并集，重复的依靠优先级
		选择器的优先级：范围越小，优先级越高
<div>
	<a id="link1" class="s1"></a>
</div>
div a {}
#link1 {}
a.s1 {}


三：各种样式属性
	尺寸单位：pt/px/cm/mm/%/..
	颜色单位:red/#ff0000

四：尺寸
	width
	height
	overflow:visible/hidden/scroll/auto(建议)---设置内容溢出时如何处理

五：边框
	border:width style color;---4边框
	border-top:1px solid red;
	border-left:2px dotted blue;

	border-left-width:2px;
	border-left-style:dotted;---线型
	border-left-color:blue;

六、边距
	盒子模型（框模型）：元素的边框、内容、外边距以及内边距之间的定义
	margin：外边距
		margin:20px;---四个方向		
		margin:10px 20px 30px 40px;
		               top  right  bottom left
		margin:10px 20px;---值复制

		margin-left:10px;---单个方向的边距
		margin-top:20px;
	padding：内边距
		padding:1/2/4;
		padding-left/right:;
	定义边距，可能导致占用的总面积的增加
	特别的取值：
		margin:10px auto;----居中
		auto：由浏览器自动计算左右的边距

七：背景
	1、背景色： background-color:颜色；---纯色
	2、背景图片：
		background-image:url(images/a.jpg);
		background-repeat:repeat/no-repeat/repeat-x/repeat-y;
		background-position:x y;
		background-attachment:scroll/fixed;--附着方式---取值为fixed，背景图像固定，类似于水印的效果

八：文本
	color
	font-size
	font-family:value1,value2,value3;
	font-weight:normal/bold;
	text-align:left/center/right;
	text-decoration:none/underline;
	text-indent:12px;----仅首行缩进
	line-height:20px;---行高

九：表格
	vertical-align:top/middle/bottom;----td里
	border-collapse:separate/collapse;---边框合并
	border-spacing:10px;---边框之间的边距；
十：光标
	cursor:default/pointer/help/....;---光标
	
十一：浮动
	1、页面默认情况下，采用流布局的模式
	2、设置元素浮动，脱离原有的布局，原有的位置不再保留，后续元素补上
		float:none/left/right;
	3、清除浮动元素带来的影响	
		clear:left/right/both;

十二：显示----元素的显示方式
	每个 html 元素都有其默认的显示方式（块级、行内）
	行内元素：高度和宽度---无效
	块级元素：高度和宽度有效
	display:
		none---不显示，结合js代码实现动态显示效果
		block---块级元素
		inline---行内元素

十三：列表的样式
	list-style-type:none/circle/...;
	list-style-image:url();----使用图片作为列表项的标识

十四：定位-----需要在页面随意定位放置某个元素时
	1、默认情况，流模式---元素的定位和布局
	2、使用 float：修改布局和定位
	3、使用 position：static/relative/absolute
	4、相对定位
		position:relative;
		相对于原有的位置，使用偏移属性，原有的位置仍保留
	5、绝对定位
		position:absolute;
		相对于最近的已定位的祖先元素，原有位置不保留
	6、偏移属性
		top:20px;
		left:40px;
		right:
		bottom:
	7、堆叠顺序：相对或者绝对定位，元素脱离原有的层，层的层次
		z-index:-2/30;