html常见的标签与使用 CSS选择器 CSS字体文本边框背景表格相关样式 CSS浮动使用 一些简答题
html常见的文本标签
标题标签
写法： 一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
范围：h1-h6(从大到小)
功能：作为标题使用，并且依据重要性递减。
默认属性：自动加粗
分割线标签
写法：
特点：没有开始标签
段落标签
写法：这是段落标签
特点：这一段内容的前后都会带换行效果。
段落缩进标签
写法：这是段落缩进标签
滚动标签
写法：
常用的属性：scrollamount:设置滚动速度：正整数的值（值越大，速度越快）behavior:滚动方式：slide :滚动某边框停止掉scroll:穿梭滚动（默认值）alternate:交替滚动direction:滚动方向left:从右到左（默认值）right:从左到右up:向上滚动down:向下滚动
bgcolor:背景颜色（颜色的英文单词或十六进制数）
格式标签
加粗标签
写法：我变粗了！我变粗了
strong和b是同样的效果
区别：strong有“文章语言语气强调”b只是普通加粗
斜体标签
写法：我快倒了！我快倒了
em和i是同样的效果
区别：em有语气强调i只是普通斜体
换行标签
写法：
作用：换个行
预先排版的文本展示标签
写法：我想怎么样就怎么样
作用：按照文本的格式原封不动的进行浏览器输出
计算机的编码代码标签
写法：function checkUser(){alert("hello") ;}
此标签用于表示计算机源代码或者其他机器可以阅读的文本内容，把文本变成等宽内容，暗示此段文本是源程序代码。
上下标标签
作用：一般情况用在网站门户首页 下面底部栏的版权所有信息或者注册商标信息。
上标标签
写法：x2
运行结果：x²
下标标签
写法CO2
运行结果：CO₂
html转义字符
浏览器解析(所有现代浏览器:谷歌/火狐/ie/edge/欧朋浏览器/洋葱浏览器...)
转义字符:© 等价于©® 等价于® 等价于一个空格 等价于两个空格< 等价于<> 等价于>
超链接
超链接标签
写法：超链接，点我跳转
属性:href:链接到的资源地址url(统一资源定位符)url统一资源定位符的组成:协议+域名+端口 :网站默认都是将端口80(省略不写)http://www.baidu.comtarget:打开资源文件的方式_blank:新建一个窗口打开_self:(默认值),当前窗口直接打开
协议:file:// 本地文件协议http:// http协议https:// 适合发送隐私数据jdbc:mysql:// (jdbc的mysql协议)thunder://迅雷协议mailto: 邮件协议...
以下为具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接标签title>head><body><a href="01_html常见的文本标签.html" target="_blank">点击跳转a><br/><a href="http://www.baidu.com" target="_blank">进入百度a><br/><a href="thunder://www.dytt8.net" target="_blank">高速通道-《米奇妙妙屋》a><br/><a href="http://www.dytt8.net" target="_blank">普通通道-《米奇妙妙屋》a>body>
html>
超链接的使用方式
方式一:跳转链接a标签的href:从一个页面链接到到另一个页面
方式二:锚链接写法：同一个页面下1)创建锚点(跳转标记) 文本...不同页面下1)创建锚点(跳转标记)2)创建跳转到锚点的链接地址
图像标签
img标签
写法：
一些基本属性：src:链接到图片资源地址 (相对路径)相对路径注意事项:页面存储位置是否在同级目录下(绝对路径:就是直接指定磁盘上的具体图片位置)title:图像的标题文字提示设置宽和高:width和height 单位为px或者是权重百分比%alt:替代文本 (当图片链接失效了,给文字提示信息)align:(左右浮动)left(左对齐)right(右对齐)
图像链接
将img标签包裹在a标签中, 在a标签中设置图像链接跳转地址。
写法：
表格
表格标签
写法：
这是一个三行三列表格
子标签caption:指定表格的标题内容tr:行标签th:表头(特殊单元,居中加粗)td:数据表内容普通单元格
table标签的常见属性:border="表格边框大小"cellspacing="单元格的边框和table边框的距离"width和height:表格宽度和高度像素或者百分比bgcolor:背景颜色
表格单元格的合并属性:合并行(行合并)rowspan="所占的单元格的数量"合并列(列合并)colspan="单元格的数量"
以下是具体代码举例：
代码用到了以上所有标签和标签属性。
DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格标签title>head> <body><table border="1px" align="center"cellspacing="0"bgcolor="pink"width="500px"height="500px"><caption>学生成绩表caption><tr><th>学号th><th>姓名th><th>班级th><th>成绩th>tr><tr align="center"><td>2012td><td>张三td><td>1班td><td>80td>tr><tr align="center"><td>2013td><td>李四td><td>2班td><td>98td>tr><tr align="center"><td>2014td><td>王五td><td rowspan="2">3班td><td>100td>tr><tr align="center"><td>2015td><td>赵六td><td>90td><tr align="center"><td colspan="3">平均成绩td><td>未知td>tr>tr>table>body>
html>
表格嵌套
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格嵌套title>head><body>
<table border="1px" cellpadding="0" width="100%"><tr><table><tr><td><img src="img/英特尔大logo.jpg" align="center" width="900px"/>td><td align="left"><a href="https://world.taobao.com/wow/z/oversea/SEO-SEM/ovs-pc-login"target="_blank">登录a><a href="https://world.taobao.com/wow/z/oversea/SEO-SEM/ovs-pc-register"target="_blank">注册a>td>tr> table><table><tr><td><a href="#"target="_blank">首页a><a href="#"target="_blank">CPUa><a href="#"target="_blank">主板套餐a><a href="#"target="_blank">固态硬盘a>td>tr>table><table><tr><td><img src="./img/intel轮播图1.jpg" width="100%" /><img src="img/intel轮播图2.jpg" width="100%" />td>tr>table><table><tr><td><a href=product_info.htmltarget="_blank"><img src="./img/热门商品1.png">a><a href=product_info.htmltarget="_blank"><img src="./img/热门商品2.png">a><a href=product_info.htmltarget="_blank"><img src="./img/热门商品3.png">a>td>tr>table>tr>table>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品信息title>head><body>处理器真好body>
html>
块标签
块标签div
写法：这是div块标签
块级的块标签，定义一块，默认占满一行，进行内容的显示。1）默认占满一行。2）会自动换行。
适用于大量数据展示。
块标签span
写法：这是span块标签
行级的块标签，一行上定义一个块，进行内容的显示。
1）有多少内容，就会占用多大空间。
2）不会自动换行。
适用于少量数据展示
块标签的应用场景
div标签应用场景
应用网页布局
使用div将任意html元素(标签)包裹起来,
在通过css(Casading Style Sheet:层叠样式表)进行样式修饰达到一种层级布局的效果。
span标签应用场景
相对于div进行少量数据的块标签显示。
列表
无序列表
列表项前面有标记（实心圆点符号、空心圆点符号和实心小正方形符号等）。
写法：
ul属性 type="指定列表项前面的标记"disc:实心圆点cicle:空心圆点square:实心小正方形
子标签li（列表项）
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>无序列表title>head><body>你喜欢的篮球明星是？<ul type="cicle"><li><a href="#">科比a>li><li><a href="#">詹姆斯a>li><li><a href="#">乔丹a>li><li><a href="#">kka>li>ul>body>
html>
有序列表
列表项前面有标记（阿拉伯数字、罗马数字和大小写字母等）。
写法:
ol属性 type="指定列表项前面的标记"默认值:1.....其他标记AI
子标签li（列表项）
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>有序列表title>head><body>cxr是个啥？<ol type=""><li>szli><li>bmli><li>hhli><li>pzli>ol>body>
html>
自定义列表
写法：
dl:定义自定义列表dt：自定义的列表项dd:自定义列表项中的具体内容
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>自定义列表title>head><body><p>公司项目部架构如下p><dl><dt>项目总监dt><dd>技术总监dd><dd>架构总监dd><dd>管理总监dd><dt>攻城狮dt><dd>攻城狮1dd><dd>攻城狮2dd><dd>攻城狮3dd>dl>body>
html>
表单元素
最常见表单的应用场景
用户通过表单提交,将用户数据提交到服务器端登录或者注册.
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单元素title>head>
<body><form action="server.html" method="get">用户名：<input type="text" name="wyh" placeholder="请输入用户名" /> <br/>密 码：<input type="password" name="123"placeholder="请输入密码" /><br/><input type="submit" value="登录" /><br/>form><form action="server.html" method="post">\用户名：<input type="text" name="wyh" placeholder="请输入用户名" /> <br/>密 码：<input type="password" name="123"placeholder="请输入密码" /><br/><input type="submit" value="登录" /><br/>form>body>
html>
表单中常见的表单项
输入相关的组件: 文本输入框 密码输入框 单项按钮 复选框 文件上传组件 日期组件 yyyy/MM/dd(这种格式年份/月份/月中日期) 普通按钮 特殊的提交按钮:将表单项提交到form的action地址上 重置清空 输入有效的时候必须有@标记
下拉菜单:
文本域:
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>常见的表单项title>head><body><form action="server.html" method="get">用户名：<input type="text" placeholder="请输入用户名"name="name" /><br/>密 码：<input type="password"placeholder="请输入密码"name="password"/><br/>性 别：<input type="radio" value="0"name="sex" />男<input type="radio"value="1"name="sex" />女<br/>爱 好：<input type="checkbox"value="yuanshen"name="hobby"/>yuanshen<input type="checkbox"value="lol"name="hobby"/>lol<input type="checkbox"value="cf"name="hobby"/>cf<br/>籍 贯：<select><option value="blank">请选择option><option value="0">山西省option><option value="1">山东省option><option value="2">河北省option><option value="3">河南省option>select> <br/>出生日期：<input type="date"name="birthday"/><br/>上传图片：<input type="file" name="photo" /><br/>自我介绍：<textarea cols="30" rows="5">chenxinrushigeshazitextarea><br/>邮 箱：<input type="email"name="my_email"placeholder="请输入你的邮箱地址"/><br/><input type="button" value="点我没用" /><br/><input type="submit" value="提交" /><input type="reset" value="清空" />form>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>后台服务器地址title>head><body>正在校验中！body>
html>
table嵌套表单
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>格式优雅的表单title>
head><body background="img/bg.jpg"><form action="server.html" method="get"><table border="0px" cellspacing="0" width="1000"height="500"align="center"bgcolor="white"><caption><b>注册用户b>caption><tr align="center"><td>用户名：td><td><input type="text" placeholder="请输入用户名"name="name" />td>tr><tr align="center"><td>密 码：td><td><input type="password"placeholder="请输入密码"name="password"/>td>tr><tr align="center"><td>性 别：td><td><input type="radio" value="0"name="sex" />男<input type="radio"value="1"name="sex" />女td>tr><tr align="center"><td>爱 好：td><td><input type="checkbox"value="yuanshen"name="hobby"/>yuanshen<input type="checkbox"value="lol"name="hobby"/>lol<input type="checkbox"value="cf"name="hobby"/>cftd>tr><tr align="center"><td>籍 贯：td><td><select><option value="blank">请选择option><option value="0">山西省option><option value="1">山东省option><option value="2">河北省option><option value="3">河南省option>select>td>tr><tr align="center"><td>出生日期：td><td><input type="date"name="birthday"/>td>tr><tr align="center"><td colspan="2"><input type="submit" value="注册" />td>tr>table>form>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>后台服务器地址title>head><body>正在校验中！body>
html>
框架标签
frameset框架集
注意：不能和body一块用，要么body标签去掉,要么在body前面去使用frameset
写法：
一些属性：rows="由上而下看的每一个部分占用的权重百分比"cols="由左到右看的每一个部分占用的权重百分比"
frameset框架集能与frameset框架集和frame框架嵌套使用。
frame框架
写法：
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>xxx后台管理系统title>head> <frameset rows="20%,*"><frame src="header.html" /><frameset cols="15%,*"><frame src="menu.html" /><frame src="main.html" name="main" />frameset>frameset>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>主页面title>head><body><img src="../img/主页面.jpg" />body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><ul><li><a href="main.html" target="main">首页a>li><li><a href="product/product_lists.html" target="main">酷睿i9a>li><li><a href="product/product_lists - 副本.html" target="main">酷睿i7a>li><li><a href="product/product_lists - 副本 (2).html" target="main">酷睿i5a>li><li><a href="#">酷睿i3a>li>ul>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>头部页面title>head><body><div><img src="../img/英特尔大logo.jpg" width="100%"height="100px"/>div>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>酷睿i5title>head><body><table border="1px" align="center" cellspacing="0" ><tr><th>商品编号th><th>商品名称th><th>商品价格th><th>商品型号th><th>商品生产企业th><th>商品图片th>tr><tr><td>1td><td>酷睿i5-13900KFtd><td>5849td><td>13代i5新品td><td>inteltd><td><img src="../../img/酷睿i9（1）.jpg_.webp" />td>tr><tr><td>2td><td>酷睿i5-13900Ktd><td>5649td><td>13代i5新品td><td>inteltd><td><img src="../../img/酷睿i9（2）.jpg_.webp" />td>tr><tr><td>3td><td>酷睿i5-13900KStd><td>6849td><td>13代i5新品td><td>inteltd><td><img src="../../img/酷睿i9（1）.jpg_.webp" />td>tr><tr><td>4td><td>酷睿i5-14900KStd><td>8849td><td>13代i5新品td><td>inteltd><td><img src="../../img/酷睿i9（2）.jpg_.webp" />td>tr>table>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>酷睿i7title>head><body><table border="1px" align="center" cellspacing="0" ><tr><th>商品编号th><th>商品名称th><th>商品价格th><th>商品型号th><th>商品生产企业th><th>商品图片th>tr><tr><td>1td><td>酷睿i7-13900KFtd><td>5849td><td>13代i7新品td><td>inteltd><td><img src="../../img/酷睿i9（1）.jpg_.webp" />td>tr><tr><td>2td><td>酷睿i7-13900Ktd><td>5649td><td>13代i7新品td><td>inteltd><td><img src="../../img/酷睿i9（2）.jpg_.webp" />td>tr><tr><td>3td><td>酷睿i7-13900KStd><td>6849td><td>13代i7新品td><td>inteltd><td><img src="../../img/酷睿i9（1）.jpg_.webp" />td>tr><tr><td>4td><td>酷睿i7-14900KStd><td>8849td><td>13代i7新品td><td>inteltd><td><img src="../../img/酷睿i9（2）.jpg_.webp" />td>tr>table>body>
html>
DOCTYPE html>
<html><head><meta charset="utf-8"><title>酷睿i9title>head><body><table border="1px" align="center" cellspacing="0"width="1000" ><tr><th>商品编号th><th>商品名称th><th>商品价格th><th>商品型号th><th>商品生产企业th><th>商品图片th><th>修改信息th>tr><tr><td>1td><td>酷睿i9-13900KFtd><td>5849td><td>13代i9新品td><td>inteltd><td><img src="../../img/酷睿i9（1）.jpg_.webp" />td><td><a href="#">修改a><a href="#">删除a>td>tr><tr><td>2td><td>酷睿i9-13900Ktd><td>5649td><td>13代i9新品td><td>inteltd><td><img src="../../img/酷睿i9（2）.jpg_.webp" />td><td><a href="#">修改a><a href="#">删除a>td>tr><tr><td>3td><td>酷睿i9-13900KStd><td>6849td><td>13代i9新品td><td>inteltd><td><img src="../../img/酷睿i9（1）.jpg_.webp" />td><td><a href="#">修改a><a href="#">删除a>td>tr><tr><td>4td><td>酷睿i9-14900KStd><td>8849td><td>13代i9新品td><td>inteltd><td><img src="../../img/酷睿i9（2）.jpg_.webp" />td><td><a href="#">修改a><a href="#">删除a>td>tr>table>body>
html>
新增元素video元素
浏览器需要flash插件,浏览器通过video元素进行视频的播放video元素属性:width:宽度 以及height:高度controls="controls" h5的video控制视频播放source子标签:指定 加载视频连接地址 src属性type="媒体类型 举例.mp4/.mp3/.ogg等等都是媒体类型"
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8" /><title>videotitle>head><body><video height="500px" width="700px" controls="controls"><source type="audio/mp4" src="mp4/OPPO-京东.mp4">source>video><p style="font-weight: bold;">gege p><p style="font-size:20px;font-weight: 900;">2023年7月13日19:57:32p>body>
html>
CSS使用方式
行内样式
1) (如果某个页面中某个位置单独去使用某个样式,可以使用行内样式)每一个标签都有style属性="css代码"样式名称:值;样式名称2:值2;...
内部样式(内联)
在style标签体 通过选择器{样式属性名称:值;样式属性名称2:值2;}
写法：
优点:一次性控制多个标签
弊端:css代码和html标签混合使用,不利于后期管理(阅读性差)
外部方式(外联)
方式3:外部方式(外联) 导入css文件 link的href属性导入css文件地址link写法：rel:固定写法 stylesheet:系统库中的层叠样式表
以下是具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS的使用方式title>head><link href="css/mycss.css" rel="stylesheet" /><body><a href="#" style="text-decoration: none;color: rosybrown;font-size: 40px;">点我1111a><a href="#">点我试试a><a href="#">别点我a>body>
html>
<body><p style="text-decoration:none;color:red;font-size:20px;">2023年7月13日19:57:32p><body>
<style>p{font-size:20px;coloer:red;text-decoration:none;}style><body><p>2023年7月13日20:07:24p>body>
p{font-size:20px;coloer:red;text-decoration:none;}<body><p>2023年7月13日20:12:29p>body>
常见的CSS选择器
id选择器
id选择器(同一个页面标签id属性值必须"唯一")
写法: #id属性值{样式名称:值;...}
id选择器优先级最大
class 类选择器
同一个页面标签元素的class属性值是可以重复的
写法: .class属性值{属性名称:值;属性名称2:值2;...}
class 类选择器优先级次于id选择器
标签名称选择器
写法： 标签名称{样式属性:值;...}优先级:标签名称选择器 < class选择器 < id选择器
后代选择器
写法： 标签1 标签2{样式属性:值;...}
作用：标签1后包含标签2的所有相关标签样式属性都对于改变。
并集选择器
写法：标签1，标签2{样式属性:值;...}
作用：同时选中多个标签
伪类选择器
锚伪类:将一个标签的状态划分为以下几种:1)鼠标未访问过的状态 link2)鼠标经过这个元素的状态 hover3)鼠标经过了并且点击在这个元素状态:active4)鼠标访问的状态(上面3)之后的,点击并且松开了) visited代码:选择器:状态名称(不区分大小写)提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
以下为具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>伪类选择器title><style>/* 鼠标未访问*/a:link{font-size: 40px;color: red;}/* 鼠标访问过的状态 */a:visited{font-size: 30px;color: blue;}/* 鼠标经过 */a:hover{font-size: 45px;color: pink;}/* 激活状态 */a:active{font-size: 30px;color: green;}style>head><body><a href="02_h5新增video元素.html" target="_blank">恒大商城a>body>
html>
CSS字体相关的样式属性
font-family:字体库的类型:楷体/宋体/其他/黑体
font-style:字体样式normal:文字正常显示(正常体:默认值)italic:文字"斜体"
font-weight:属性指定字体的粗细适当加粗:bold
font-size:字体大小
CSS之文本样式
文本样式:colorcolor: deepskyblue;
文本对齐方式:text-alignleft:默认值 左对齐center:居中right:右对齐
文本装饰:text-decoration:underline:设置下划线overline:上划线line-through中划线none:去掉文本修饰line-through
设置字母大写:uppercase/lowercasetext-transform: uppercase;
文本缩进:第一行文本设置 缩进效果text-indent: 500px;
行高:line-height 属性用于指定行之间的间距line-height: 60px;
单词间距:word-spacing系统认定中文,必须两个字组成一个单词word-spacing: 20px;
为文本添加阴影:text-shadow垂直和水平阴影 默认2px 后面可以指定颜色text-shadow: 2px 2px firebrick;
CSS之边框样式属性
边框有四个边: 颜色/宽度/样式(必须有)(单实线/虚线/点/双实线)边框颜色边框宽度边框样式给四个边设置边框的颜色border-top-color: blueviolet;border-right-color: rosybrown;border-bottom-color: aqua;border-left-color: violet; 给四个边的边框设置宽度border-top-width: 5px;border-right-width: 6px;border-bottom-width: 7px;border-left-width: 8px;四个边框的样式solid:单实线double:双实线dotted:点dashed:虚线border-top-style: dashed;border-right-style: dotted;border-bottom-style: double;border-left-style: groove;
有简写属性格式(将四个边的颜色/宽度和样式进行简写)border-color:border-width:border-style: border:特点:默认的方向 上右下左某一边没有设置颜色/宽度/样式,会补齐对边的颜色/宽度/样式
边框四个角的弧度:border-radius: 5px;高度和宽度:width: 150px;height: 150px;
CSS背景样式属性
background-color:背景颜色background-color: darkgray; */
background-image:背景图像这个图像尺寸没有屏幕这么大,图像出现x轴和y抽重复background-image: url(#); */
background-repeat:设置图像是否重复以及如何重复repeat:x轴 /y轴重复(默认值:跟图像的分辨率尺寸相关)repeat-x:x轴重复repat-y:y轴重复no-repeat:不重复background-repeat: no-repeat;
background-position:背景图像的起始位置浏览器中显示的位置 left ,center ,right图像位置 top,center,bottombackground-position: left top ;
背景附着: fixed背景图像固定,不会随着页面滚动而滚动scorll:会随着其余部分滚动而滚动background-attachment: scroll;background的简写属性:background:background-color background-image background-repeat backgound-position；
CSS列表样式
list-style-type 设置列表项的标记类型disc:默认值 实心圆点circle:空心圆点square:实心小正方形none:去掉列表项的标记list-style-type: none;
让列表项的内容，水平排列：display: inline;
list-style-image:自定义列表前面的标记类型list-style-image: url();
CSS表格
border-collapse 属性设置是否将表格边框折叠为单一边框：collapse:合并
CSS盒子模型（框模型）
控制div边距
万物皆盒子! 就是通过div将一个大的页面划分成很多块;每一个块里面存储很多html元素,然后在通过css样式控制视图
控制div内边距padding: 20px 0 0 40px;padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px; 简写：（对应上右下左）padding: 300px 0 0 400px;
控制div外边距margin-top: 30px;margin-right: 30px;margin-bottom: 30px;margin-left : 30px;简写：（对应上右下左）margin: 100px 0 0 200px;
CSS盒子模型的使用_注册页面
以下为具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>注册页面title><style>body{background: #FAEBD7;}/* 修饰外面大的div样式 */.div1{border:1px solid black;width: 400px;height: 400px;/* 外边距的简写属性 *//* margin-left: 400px;margin-top: 120px; */margin: 260px 0 0 725px;background: url(img/intel轮播图2.jpg);/* 边框四个角为圆角 */border-radius: 5px;}.div2{margin: 50px 0 0 100px;}.div3{margin: 50px 0 0 100px;}.div4{margin: 50px 0 0 83px;}.div5{margin: 50px 0 0 100px;}.div6{margin: 30px 0 0 160px;}div{color: orangered;}style>head><body><div class="div1"><form><div class="div2">用户名：<input type="text" placeholder="请输入用户名" />div><div class="div3">密 码：<input type="password"placeholder="请输入密码"/>div><div class="div4">确认密码：<input type="password" placeholder="请再次输入密码"/>div><div class="div5">邮 箱：<input type="text" placeholder="请输入邮箱" />div><div class="div6"><input type="submit" value="注册" /><input type="submit" value="登录" />div>form>div>body>
html>
CSS浮动
CSS浮动概念
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中(不占据一行空间,单独的浮块)，所以文档的普通流中的块框表现得就像浮动框不存在一样。
以下为具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS浮动属性title><style>#div1{border: 1px solid red;background-color: blue;width: 300px;height: 300px;float: left;}#div2{border: 1px solid yellow;background-color: red;width: 300px;height: 300px;float: left;}#div3{border: 1px solid blue;background-color: yellow;width: 300px;height: 300px;float: right;style>head><body><div id="div1">div1div><div id="div2">dir2div><div id="div3">dir3div>body>
html>
CSS浮动使用
以下为具体代码举例：
DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮动页面title><style>.div_header{height: 25px;background-color: #000000;}/* 两个中间div加入一个空div,给class或者id */.div_blank{background-color: black;width: 100%;/* 清除浮动 clear属性:both:两边都不浮动(通用)clear:left左边不浮动/right:右边不浮动*/clear: both;}.div_header1{float: left;}.div_header2{float: right;}style>head><body><div class="div_header"><div class="div_header1"><select><option>中国大陆option><option>小日子option><option>小棒子option>select><a href="#">请登录a><a href="#">请注册a><a href="#">手机淘宝a><a href="#">无障碍浏览a>div><div class="div_header2"><a href="#">我的淘宝a><a href="#">购物车a><a href="#">收藏夹a><a href="#">商品分类a><a href="#">免费开店a>div>div><div class="div_blank">div><div><input type="text" /><input type="submit" value="搜索" src="#" />div>body>
html>
一些简答题：
超链接标签的href可以指定某个url地址,请描述关于url地址协议如果是http协议,它的的执行流程?
以访问百度为例：href指定百度的url地址，向系统发送request请求，然后系统通过访问hosts文件寻找是否存在百度域名对应的IP地址，若找到，则访问此地址；若找不到，则通过调用网卡驱动联网访问DNS服务器，通过DNS服务器寻找百度服务器，找到百度的IP地址后，向超链接标签response响应,成功访问到百度。
表单提交的get和post有什么区别? 请描述。
在使用get方式提交时，提交的内容会显示在地址栏上，而使用post方式提交时，提交的内容不会显示在地址栏上，但使用浏览器的检查功能，可以查看到表单的数据。所以说，使用post提交相对于get提交安全。get提交的内容的数据量较小，如果超过会导致数据不完整；而使用post提交的数据是通过IO流传输，能够传输的数据量大。get是从服务器上获取数据，post是向服务器传输数据。
表单form的action和method是什么。
action的值为URL，是指定提交表单后，表单所到达的地址。method的值为get或者post，是指定表单提交的方式。
-----------------------------------------------------------------------action属性是用来指定跳转后端服务器的地址。（url-统一资源定位符）url和uri的区别：（url是uri的子集）url是带上具体的协议 http：//域名：端口号/项目名称/登录接口，范围小uri （url的一部分 “/项目名称/登录接口”）没有明确的协议，范围大
method属性是用来指定提交表单的方法。
input type=“button” 和 input type=“submit” 这两个都是按钮有什么不一样的地方?
input type="button"的按钮只是能够点击而input type="submit"的按钮可以点击，并且在点击后会提交input项的所有信息到后端的服务器上。
CSS是什么和它的作用是什么？
CSS是层叠样式表，作用是控制html元素，给html进行修饰，使其达到一种效果。
框架标签frame的src和name属性是什么？什么是farmeset框架集？
frame:框架标签一个frame包含一个html页面，src="链接的html页面地址"name="给页面所在框架起一个名称"
frameset:框架集当整个结构有两个或者两个以上的html页面组成，必须使用框架集framesetrows:由上而下划分的每一个部分所占的权重百分比；在通过frame规定某一个html的页面位置cols:由左到右划分每一个部分所占的权重百分比
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！