网页前端基础知识---不定时更新

最新推荐文章于 2021-06-28 06:34:16 发布

Java, Python, C++

最新推荐文章于 2021-06-28 06:34:16 发布

阅读量311

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/tgkxms/article/details/112167246

版权

HTML基础

W3C标准包括

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

注释

<!--注释内容-->

常用标签

<!DOCTPYE>

<!DOCTYPE html> <!--告诉浏览器使用什么规范-->

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>

段落标签

<p>
    这是一个段落标签
</p>

换行标签

换行<br/>
或者这个<br>

水平线标签

<hr>

字体样式标签

粗体

<strong></strong>

斜体

<em></em>

特殊符号

空格

&nbsp;

大于号

&gt;

小于号

&lt;

版权符号

&copy;

图像标签

<img src="地址" alt="图片名字" title="悬停文字" width="x" height="y">

超链接

<a href="地址" target="打开方式">链接文本或者图像</a>

target常用值

_self 当前页面跳转（默认此方式）
_blank 新标签页打开

锚链接

<a name="top">top</a>

<a href="#top"></a><!--跳到top那里-->

功能性连接

发送邮件

<a href="mailto:邮箱地址"></a>

QQ链接

到QQ官网看

列表

有序列表

<ol>
    <li>一</li>
    <li>二</li>
</ol>

无序列表

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

自定义列表

<dl>
    <dt>列表名字</dt>
    
    <dd>列表内容</dd>
    <dd></dd>
</dl>

表格

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td colspan="2">跨两列</td>
    </tr>
    <tr>
        <td rowspan="2">跨两列</td>
    </tr>
</table>

视频和音频

视频

<vedio src="" controls atuoplay></vedio><!--自动播放-->

音频

<audio src="" controls></audio>

页面结构

元素名	描述
header	标题头部区域
footer	脚部区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

iframe内联框架

<iframe scr="地址" frameborder="0" width="" height="">
    
</iframe>
<!--或者用name，让a标签设置tagert在iframe中打开-->
<iframe name = "tgk"></iframe>
<a href="http://www.tgkzxy.cn" target="tgk">点击跳转</a>

表单

<!--
action：表单提交的位置，可以是网站，可以是请求处理地址
method：post，get，提交方式
	get：可以在url看见提交信息，不安全
	post：安全一点点，可以在响应头看见，也不是特别安全-->
<form action="get">
    <p>用户名<input type="text" name="username"></p>
    <p>密码<input type="password" name="pwd"></p>
    <p>
        <input type="submit" name="" id="">
        <input type="reset" name="" id="">
    </p>
</form>
<!--文本输入框：input-->

表单元素

属性	说明
type	text、password、checkbox、radio、submit、reset、file
name
value	初始值
size	文本框长度
maxlength	最大字符数
checked	typy为radio和checkbox，指定按钮是否选中

文本框

 <p>用户名<input type="text" name="username"></p>

文本域

textarea

<p>
        文本域：
        <textarea cols="10" rows="3"></textarea>
    </p>

单选框

name设置同一个组

 <p>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
 </p>

多选框

checked默认选中

<p>爱好：
        <input type="checkbox" name="hobby">玩
        <input type="checkbox" name="hobby">吃
        <input type="checkbox" name="hobby">喝
</p>

按钮

value是按钮字符

type为image可以让图片变为按钮

<p>
    <input type="button" name="btn" value="点击这个按钮">
    <input type="image" src="图片地址">
</p>

下拉框

selected 默认选项

<p>下拉框：
        <select name="列表名称">
            <option value="中国">中国</option>
            <option value="瑞士">瑞士</option>
            <option value="美国" selected>美国</option>
        </select>
    </p>

文件域

<p>文件域：
        <input type="file" name="file">
        <input type="button" name="上传" value="上传">
    </p>

滑块

<p><input type="range" name=""max="100" min="0"></p>

搜索

<p><input type="search" name="" ></p>

提交时自动验证的表单元素

email

<p>
        <input type="email" name="email">
    </p>

url
number

表单的应用

readonly 只读
disabled 禁用
hidden 隐藏

表单的初级验证

常用方式：

**placeholder ** 提示描述
required 不能为空
pattern 正则表达式

CSS

如何使用

内部样式：写在HTML的head中

<style>
        h1{
            color: aquamarine;
        }
    </style>

外部样式：写在css文件中(建议使用这种,内容样式分离，可以实现复用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>搞颜色</h1>
</body>
</html>

h1{
    color: aquamarine;
}

行内样式

<h2 style="color: antiquewhite"></h2>

优先级

行内样式>内部样式>外部样式

选择器

基本选择器

标签选择器 标签名{}

    <style>
        h1{
            color: blueviolet;
        }
    </style>

类选择器 class .class名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tgk{
            color: chocolate;
        }
        .zxy{
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="tgk">搞颜色</h1>
    <h2 class="tgk">haha</h2>
    <p class="zxy">哈哈哈</p>
</body>

id 选择器 #id名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <h2 id="pink">haha</h2>
</body>

**优先级：**id>class>标签

层次选择器

后代选择器 空格

所有后代都有

<style>
	li p {
            color: brown;
        }
</style>

子选择器 小于号

只有儿子有

<style>
	li>p {
            color: brown;
        }
</style>

相邻第弟选择器 加号

元素下面的一个第弟

<style>
	  #b333+ p {
            background-color: pink;
        }
</style>

通用弟弟选择器 波浪号

元素下面所有弟弟

<style>
	 #b333~ p {
            background-color: pink;
        }
</style>

结构伪类选择器

冒号

<style>
       ul li :first-child{
            background-color: blueviolet;
        }
</style>

属性选择器（常用）

<style>
        /*    属性选择器格式  标签名字[属性名=属性值]{}*/
        a[id=fia]{
            background-color: blueviolet;
        }
</style>

常用的

=    绝对等于
*=   全等于
^=	 以某某开头
$=  以某某结尾

美化网页元素

span标签

重点的字习惯放在span标签里面

字体样式

    <style>
        body{
            /*字体*/
            font-family: 楷体;
        }
        h1{
            /*字体大小*/
            font-size: 50px;
        }
        .p1 {
            /*字体粗细*/
            font-weight: bold;
        }
    </style>

文本样式

    <style>
        h1 {
            /*文本位置*/
            text-align: center;
            /*背景色*/
            background-color: aquamarine;
            /*行高，当行高与元素高度相同，可以实现上下居中*/
            line-height: 50px;
        }
        .mainText{
            /*首行缩进，em代表一个字符格*/
            text-indent: 2em;
            /*下划线
                中划线为text-decoration: line-through;
            */
            text-decoration: underline;

        }
        #handsome{
            /*文字阴影
                颜色
                x偏移
                y偏移
                偏移半径*/
            text-shadow: aqua 1px 1px 1px;
        }

    </style>

<!--取消下标签-->
<a href="http://www.tgkzxy.cn" style="text-decoration: none">点击这里</a>	

<!--文本图片水平对齐：vertical-align:middle-->

超链接伪类

<style>
    	/*鼠标悬浮颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: green;
        }
        
</style>

列表样式

<style>
	ul li{
         /*none  去掉原点
                circle  空心圆
                decimal 数字
                square  正方形


            */
            list-style: none;
        }
</style>

背景

背景颜色

#nav{
    background-color: cadetblue;
}

背景图片

#nav{
    background-image: url("../../images/backimage.png");
    /*平铺方式*/
    background-repeat: no-repeat;
}

背景

h2{
     /*颜色 图片 图片位置 平铺方式*/
     background: coral url("../../images/箭头.jpg") 220px 7px no-repeat;
}

ul li {
    list-style: none;
    background-image: url("../../images/箭头.jpg");
    background-position: 180px -1px;
    background-repeat: no-repeat;
}

渐变

body{
            background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
        }

盒模型

margin：外边距

padding：内边距

border：边框

边框

粗细
样式
颜色

    <style>
        #box{
            width: 300px;
            border: 1px solid red;
        }
        body{
            /*body总有一个默认的外边距为8，可以自己改为0*/
            margin: 0px;
        }
        form{
            background-color: red;
        }
    </style>

圆角边框

4个角

div{
    width: 300px;
    height: 30px;
    background-color: aqua;
    /*左上 右上 右下 左下 顺时针方向*/
    border-radius:  10px 10px 10px 10px;
}

示例如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rsqCAx2Q-1609831710821)

盒子阴影

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 100px yellow;
}

display和浮动

display

<style>
    /*block：块元素*/
    /*inline：行内元素*/
    /*inline-block：块元素，但是可以内联，在一行*/
    /*none：看不见*/
    div{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        display: inline;
    }
    span{
        border: 1px solid red;
        width: 100px;
        height: 100px;

    }
</style>

浮动

        span{
            border: 1px solid red;
            width: 100px;
            height: 100px;
            float: right;

        }

JavaScript

介绍

JavaScript是一种脚本语言