html基础-几种布局

最新推荐文章于 2024-05-25 10:40:54 发布

最爱喝的是酸奶

最新推荐文章于 2024-05-25 10:40:54 发布

阅读量1.8k

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/m0_53161190/article/details/118975647

版权

1.html标签

html为网页标记语言 <标签名>

DTD声名

新版

<!DOCTYPE html>

标题标签 hn

<h1></h1>
<h2></h2>
<h3></h3>  
<h4></h4>
<h5></h5>
<h6></h6>

n越大，字体越小，自动加粗，换行


color设置字体的颜色
1.HEXColor 六位的十六进制
十六进制范围0-9 a-f

姓名:
密码:
提交: 性别:男女保密

段落标签 p

<p></p>

注意:自动换行

加粗

<b></b>

强调加粗

<strong></strong>

斜体

<i></i>

强调斜体

<em></em>

换行

<br>  <br />  <br/>

分割线

<hr>

删除线

<del></del>

注释

<ruby>鼎<rt>ding</rt></ruby>

超链接（超文本传输协议）

<a href="" target="_self">点击的内容</a>

href网页跳转的地址

绝对地址：

域名（网址）

本地的文件目录（不建议使用）

相对地址：

参考物：当前文件路径

./当前路径（当前路径可以省略） …/上一级路径 …/…/上两级

target超链接的跳转方式

_self在本窗口打开（默认）

_blank在新窗口打开（重点）

_top在顶层窗口打开(了解）

_parent在父级窗口打开(了解）

图片标签

<img src="" width="" height="" alt="" title="">

src设置图片的路径（必填）

相对地址

绝对地址

width设置图片的宽度单位：px 百分比

height设置图片的高度

注意：当单独设置图片的宽度或者高度时，图片会等比例缩放；当你同时设置图片的宽度和高度时，图片会严格按照所给的比例进行缩放。

alt图片失效时显示

title设置图片的描述

列表

无序列表(重点)
<ul>
    <li></li>
</ul>

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

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

无意义标签

<div></div>块级标签
<span></span>行级标签

块级标签可以直接设置宽高，默认纵向排列

行级标签不能直接设置宽高,默认横向排列

上标

<sup></sup>

下标

<sub></sub>

列表

1、无序列表

<ul>
    <li></li>
</ul>

2、有序列表

<ol>
    <li></li>
</ol>

3、自定义列表

<dl>
    <dd></dd>
    <dt></dt>
</dl>

表格

<table border="1">
<caption>GZ20直播</caption>
   <tr>
       <th></th>
       ...
   </tr>
   <tr>
       <td></td>
       ...
   </tr>
</table>

表格的属性：

border设置是否有边框 0无边框 1有边框

style设置样式

边距

内边距cellpadding

外边距cellspacing

合并单元格

合并行rowspan=""

合并列colspan=""

注意：合并单元格遵循从左往右合并，从上往下合并

表单form（重点）

<form action="" method=""> 
    ...
</form>

action表单提交的地址

绝对地址(网址)

相对地址后端可以用 php java c语言

method表单提交的方式

get提交 1.php?name=zhangsan&age=18&sex=男

post提交

get提交和post提交的区别：

get提交任务栏可见，post提交任务栏不可见

get提交数据不安全,post提交数据相对安全

get提交数据大小会受任务栏限制，而post不受限制

IE限制2KB 谷歌/火狐限制8KB

输入框

<input type="" name="" value="">

type输入框的类型

text文本框

password密码框

radio单选框 name的值必须要相同，value必须不同

checkbox复选框 name的值一般为数组 like[],value必须不同

file文件 enctype=“multipart/form-data”

button按钮

image图片提交

submit提交

reset重置按钮

name设置名字

注意：如果你需要将数据提交给后端，那么必须写上name属性

value为提交的值

下拉框

<select name="">
    <option value=""></option>
</select>

文本域

<textarea></textarea>

表单的属性：

readonly只读

disabled禁用

readonly和disabled的区别：

readonly代表只读，允许数据提交，但是只能适用于input输入框类型为text、password以及文本域使用

2.与后端联系的form表单

1.先安装WampServer

2.写好表单代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="get.php" method="get">
			姓名:<input type="text" /><br>
			密码:<input type="password" /><br>
			提交:<input type="submit" />
			性别:<input type="radio" name="sex" value="0"/>男
				 <input type="radio" name="sex" value="1"/>女
				 <input type="radio" name="sex" value="2"/>保密
		</form>
	</body>
</html>

注意:复选框和单选框必须在表单出现，单选框时候，name必须相同,value不相同

3.自定义一个文件为get.php

代码为

<?php
	var_dump($_GET)
?>

4.把项目复制到WampServer的www目录下

5.再把www目录下这个(0719导入)hbuilder

注意:不能导入原来的项目

6.运行，在浏览器输入localhost

后端得到值

3.css复习

css 层叠样式表级联样式表

css中class的命名规范： https://blog.csdn.net/qq_37361815/article/details/86607763

css的引入：

1、行内样式（不推荐使用）

            <p style=""></p>

2、内嵌式

            <style></style>

3、外部引入式

css的优先级别：

在代码不冲突的情况下，所有的样式都可以正常显示；

若样式出现冲突，css遵循就近原则和遵循写在后者的样式

css的选择符(可以看手册)

元素选择符

通配符匹配所有的标签

*{sRules}

类型选择符（标签选择符） E element代表标签

E{color:red;}

id选择符(保证其唯一性，留给javascript使用)

            <p id="test"></p>  <style>     #test{              } </style>

class选择符（可以重复使用多次）

            <p class="test"></p>  <style>     .test{              } </style>

关系选择符

包含选择符(空格)

<div>
    <p></p>
    <ul>
        <li><p></p></li>
    </ul>
</div>
<p>该标签不会被选择</p>

选择div内所有的p标签
div p{
    
}

子选择符( > )(重点)

<div>
    <p>选择到该元素</p>
    <h2>
        <!--孙子不能被选择-->
        <p>该元素不会被选择</p>
    </h2>
</div>

选择div内的子元素p
div>p{
    
}

相邻选择符（+）

注意：相邻选择符只能向下选择

<p>该元素不会被选择</p>
<div>
    <p>该元素不会被选择</p>
</div>
<p>该元素被选择</p>
<p>该元素不会被选择</p>
<p>该元素不会被选择</p>

div+p{
    
}

兄弟选择符（~）

注意：兄弟选择符只能向下选择

<p>该元素不会被选择</p>
<div>
    <p>该元素不会被选择</p>
</div>
<p>该元素被选择</p>
<p>该元素被选择</p>
<p>该元素被选择</p>

div~p{
    
}

伪类选择符

鼠标悬停 E element(标签)

E:hover{}设置鼠标悬停时样式（重点）

E:link设置超链接未访问前样式
E:visited设置超链接访问后的样式
E:hover设置鼠标悬停时样式
E:active设置超链接点击时样式
口诀：love  hate


了解
E:enabled 当元素处于可用状态
E:disabled 当元素处于禁用状态
E:empty 选择指定的空元素
E:target 
E:root 相当于html
E:checked 选择input的radio和checkbox默认选中的元素

字体样式font

bold粗体(700) bolder加粗体(800) lighter细体（400）

取值为100|200|300|400|500|600|700|800|900

font-weight:800；加粗相当于

<b></b>   <strong></strong>

em（参考父级元素的字体大小）

rem（参考根元素的字体大小）

注意：一般默认字体大小为16px，最小12px

常规情况下，字体设置为偶数

复合写法：

font:20px 微软雅黑；（必须写font-size和font-family）

font:italic bolder 20px**/30px** 微软雅黑；加粗的为line-height

font:30px/1.5 微软雅黑；

文本样式

text-align文本对齐方式

left左对齐

right右对齐

center文本居中

text-indent:2em;首行缩进

letter-spacing字间距

字体装饰

text-decoration

重点： text-decoration:none;

第一个参数：

none取消装饰线

underline下划线

overline上划线

line-through贯穿线 ~~~~

第二个参数：

solid 实线 dashed虚线 dotted点线状 double双实线 wavy波浪线

第三个参数：color颜色

text-shadow文本阴影

1、水平偏移正数：右移负数：左移

2、垂直偏移正数：下移负数：上移

3、模糊程度单位：px

4、阴影颜色

列表

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

边框border

border-width边框的宽度

border-style边框的样式

solid实线 dashed虚线 dotted点线状 double双实线 inset

border-color边框的颜色

边框分为四个方向：left right top bottom

复合写法： border:1px solid red;

背景background

background-color设置背景颜色

background-image设置背景图片 url(图片路径)

background-repeat设置背景图片是否重复

repeat重复（默认）

repeat-x X轴重复

repeat-y Y轴重复

no-repeat不重复

background-attachment设置背景图像是否固定

取值为fixed （常用于：微信聊天背景）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			
		</title>
		<style>
			*{
    
				margin: 0;
				padding: 0;
			}
			.wrap{
    
				width: 100%;
				height: auto;
				background: url(desk.jpg) no-repeat 0 0/100%;
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11</li>
				<li>11

最低0.47元/天解锁文章

最爱喝的是酸奶

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
html基础-几种布局

1.html标签html为网页标记语言 <标签名>DTD声名新版<!DOCTYPE html>标题标签 hn<h1></h1><h2></h2><h3></h3> <h4></h4><h5></h5><h6></h6>n越大，字体越小，自动加粗，换行color设置字体的颜色1.HEXColor 六位的十
复制链接

扫一扫