Html篇

谁借莪１个温暖的怀抱￠ 2024-04-17 06:04 58阅读 0赞

html是用来描述网页的一种语言，超文本标记语言

1.  HTML主要标签：

基本格式

<!DOCTYPE html>//声明

<html>

<head>

</head>

<body>

</body>

</html>

1.1 <html></html>用来标记该文件是html文档

1.2<head></head>文档的头部信息，说明文档的基本情况，在此标签对中可使用<title></title>、<script></script>等描述html文档相关信息的标签对

1.3<body></body>html文档的主题部分，包含显示信息及控制信息的各种标签 只有body中的内容才会在浏览器中显示

属性：

bgcolor：设置背景颜色

text：设置文本颜色

1.3.1超链接<a href=”url”>超链接名称或图片</a>

1.3.2图片标签<img src=”url” height=” ” weidth=” “>

1.       表格标签：

基本语法

<table>

<tr>

</tr>

<tr>

</tr>

....

</table>

表格属性

<table> border：表格边框 cellspacing：单元格间的间距

cellpadding：单元格的内容与其边框的内边距 align：表格的对齐方式，通常是left，center，right

bgcolor：表格的背景颜色 background：表格的背景图片

width：表格宽度 height：表格高度

border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽

表格行的属性<tr>

align :设置水平对齐方式

valign :单元格中内容的垂直对齐方式：top middle bottom

bgcolor :背景颜色

<td><th>属性（th一般用于表示某一列的名字）

<td>用于设置表格中某一单元格的属性

单元格属性

width：单元格宽度height：单元格高度

align：单元格内文本的对齐方式,通常是左，中，右 left，center，right

valign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottom

nowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行

表格的跨行和跨列

rowspan：跨行标签

colspan：跨列标签

1.       表单标签：

表单是用户雨服务器交互的主要方法，用户在表单中填写数据，提交给服务器程序来处理。

表单是由文本框、密码框、多行文本框、单选按钮、复选框、下拉菜单列表、按钮、文件域、隐藏域等各种表单元素及其标记组成。

<form>属性：

name 表单对象名称

method 提交方法

action 处理程序

target 用于指明在何处打开

input 属性

输入域类型 文本域   text

密码域   password

单选按钮 radio

复选框   checkbox

提交按钮 submit

取消按钮 reset

图像按钮 image

文件域   file

隐藏域   hidden

下拉列表框<select><option>

//multiple表示用户从列表中选择多项，若缺省，则表示多选

<option>.../option>

//option中value和selected都是可选项，value表示选中后浏览器传递给服务器的数据，//selected用来指定选项的初始状态，该选项初始时被选中

</select>

多行文本框<textarea>标记

初始值

</textarea>

html块级元素

大多数html元素被定义为块级元素或内联元素

块级元素在浏览器显示时，通常会以新的行来显示（和结束））

实例：<h1><p><ul><table>

html内联元素

内联元素在显示时不会以新行开始

实例:<b><td><a><img>

<div>标签可以把文档分割为独立的、不同的部分。

每一个div占满一整行，块级标签

<span>

文本信息在一行展示，行内标签 内联标签，可用作文本的容器

html的几种布局元素

一、流动布局

块级元素都会自上而下按顺序垂直延伸分布，默认状态下块级元素的宽默认为100%

内联元素都会从左到友水平延伸分布

二、浮动布局

在默认布局下，如果我们想让两个块级元素并排显示，通过float浮动实现，使用后记得清除浮动

三、层模型

通过设置定位position实现 absolute 绝对定位； relative 相对定位 ； fixed  固定定位等

目前前端的几种布局方式：

一、静态布局

特点：不管浏览器的尺寸多大，网页布局始终按写代码式的固定宽高显示，常规的pc网站都是静态布局移动端的话另外建设网站单独设布局

移动端开发中采用静态布局的两种方式：

（1）在viewport meta标签上设置宽的大小width=320，也页面的各个元素也以像素px为单位

通过js动态修改标签initial-scale使得页面等比缩放，从而刚好占满整个屏幕

（2）在viewport meta标签上设置content"width=640,user-scalabel=no",页面的各个元素以

像素px为单位。由于640px超出手机宽度，浏览器会自动的缩小页面至全屏

优点：这种布局方式简单，亦没有什么兼容问题

缺点：不能根据用户的屏幕大小做出相应变化

二、流式布局

特点：页面元素的宽度是按照屏幕的分辨率进行适配调整，简单说使用百分比%设置，再设置max-width，min-width； 等属性控制尺寸流动范围；使整体布局不变，代表作网格系统

缺点：如果屏幕过大，相对原始设计过小或过大的屏幕不能正常显示，因为设置的是百分比；但是文字等元素的

大小是以像素px为单位的，在大屏下显示的效果会是宽被拉宽，使整个页面看起来不协调

三、自适应布局

特点：分别为不同的屏幕分辨定义布局，即创建多个静态布局，每个静态局部对应一个屏幕的分辨率范围。改变

屏幕分辨率可以切换不同的静态布局，但每个静态布局中页面元素大小不随窗口的大小而改变。位置发生改变

四、响应式布局

概述：随着CSS3的媒体查询，出现了响应式布局，目标：确保每一个页面在所有的终端都能显示满意的效果

通常糅合了流式布局与自适应布局 再搭配媒体查询技术，

根据不同的屏幕分辨率做不同的布局，且宽根据屏幕的分辨率做出适配的调整

特点：每个屏幕分辨率下面都会有一个布局样式，即元素位置大小都会变

优点：适应移动和PC端

缺点：媒体查询技术有限只能适应主流的宽高；要匹配足够多的屏幕大小，工作量大，设计版本多

响应式布局步骤

在head定义:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-  scalable=no">

name="viewport" :名称=视图；

width="device-width":页面宽度=设备宽度

initial-scale：初始缩放比例

maximum-scale：允许用户的最大缩放比例

minimum-scale：允许用户的最小缩放比例

user-scale：是否允许用户可以手动缩放

media query是响应式设计的核心，它能够跟浏览器进行沟通

结构：@media screen and(max-width:980px)\{

\#head\{...\}

\#content\{...\}

\#footer\{....\}

例：iphone:  @media only screen and (width:320px) and (width:768px)\{\}

ipa :  @media only screen and (min-width:768px) and (max-width:1024px)\{\}

字体设置： html\{font-size：100%;\}

完成后可以定义响应式字体

@meta (min-width:640px)\{body\{font-size:1rem\}\}

@meta (min-width:960px)\{body\{font-size:1.2rem\}\}

@meta (min-width:1200px)\{body\{font-size:1.5rem\}\}

宽不固定，可以使用百分比： \#head\{width:100%\}   \#content\{width:50%\}等

详情可借鉴http://www.mahaixiang.cn/wzsj/278.html

五、弹性布局（rem/em布局）

rem、em的区别：都是顺应不同网页字体大小展现而产生的，em相对是父元素，rem始终相对html大小即页面根元素

使用em相对布局相对与使用百分比%布局更灵活

特点：包裹文字的各元素的尺寸采用em/rem为单位，而页面的主要划分区域仍然使用百分比或像素为单位

rem、em与px区别：

px：像素，比较精确，不方便左响应式布局

em： 以父节点font-size大小为参考点，标准不统一，IE6-8不支持

表格样式，字体颜色，字体大小，边框

css包括对象、属性（选择器）和值

选择器：标记选择器 引用样式的对象\{标签属性：属性值;...\}

类别选择器 标签.类名\{标签属性：属性值;...\}

.类名\{标签属性：属性值;..\}

ID选择器 \#id名\{标签属性：属性值;...\}

在html中使用css有4种方式：行内式、内嵌式、外链式（<link href=”\*.cdd文件路径” type=”text/css” rel=”stylesheet”>在<head>标签内）、导入式（style type=”text/css” @import url(.css 文件路径);</style>）

css常用属性 ：

1.字体属性：

font-family（字体）  取值（如“宋体”）

font-size            取值单位pt(点数)

font-style           normal(普通，默认值) italic(斜体) oblique(中间状态)

font-weight（加粗）  normal bold(一般加粗) bolder(重加粗) lighter(轻加粗) number:100~900的加粗

font（字体复合属性）  可以取值以上所有的属性值，之间用空格分开

2.颜色和背景属性：

color                 颜色值为英文名称或16进制的RGB值

background-color     同上

background-image     none(不用背景) url(图像地址)

background-position  top,left,right,bottom,center等

background            可取以上所有值，之间用空格分开

3.文本段落属性：

text-decoration      none，underline，overline，line-though（删除线 blink（文字闪烁）

vertical-align      baseline，super(文字上标)，sub(文字下标)，top，text-top(使元素和上级元素的字体向上对齐)，middle，text-bottom

text-align            left，right，justify(两端对齐)

text-indent           缩进值（长度或百分比）

line-height           行高值（长度、倍数、百分比）

white-space           normal将连续的多个空格合并，nowrap强制在同一行内显示所有文本，知道文本结束或者遇到<br>对象

1.  边框属性

border-stytle        solid(实线) dashed(虚线)

border-color         边框颜色

border-width         边框宽度

或    border:边框宽度 边框颜色 边框样式（如：border：20px rebeccapurple solid；border-left border-right border-top border-bottom）

1.  列表属性 ul,ol\{ list-style:decimal-leading-zero;

list-style: none;    除去列表样式   
             list-style: circle;

list-style: upper-alpha;

list-style: disc; \}

1.  display 属性

none            隐藏

block           块元素

inline          内联元素

inline-block   内联元素具有块属性

1.水平对齐方式  text-align

2.垂直对齐方式  vertical-align     配合行高（line-height）使用。

3.行高  line-height

4.缩进  text-indent   单位：像素

五、边界与边框

1.外边距 margin  方向：上右下左   顺时针

<div style="width:300px; height:300px;

</div>

float为流向，在以后的布局中会学，在这不加上边距不起作用。

2.内边距 padding 方向：上右下左   顺时针

如果加了内边距，该元素会相应的变大。

3.边框 border   border代表四个方向全有。

div style="width:200px; height:200px; border:1px solid \#60F"></div>

1px solid \#60F  简写方式  第一个边框粗细  第二个边框样式  第三个边框颜色

盒子模型

通常用四个边界来描述：

margin(外边距)

border(边框)

padding(内边距)

content(内容区域)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70][]

1.padding，border，margin都是可选的，默认值为0，但是浏览器会自行设置元素的margin和padding，通过在css样式表中设置来覆盖浏览器样式。

2.如果给元素设置背景，并且边框的颜色为透明，背景将应用于内容，内边距和边框组成的区域。

3.浏览器兼容性  
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。  
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。  
不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/2af86d7d798d48ec99b485544218a226.png