HTML基础

最新推荐文章于 2022-08-23 15:45:00 发布

dong021103

最新推荐文章于 2022-08-23 15:45:00 发布

阅读量416

点赞数

文章标签： html

本文链接：https://blog.csdn.net/dong021103/article/details/122716481

版权

一.

HTML5文件的基本结构：

<html>

<head>
     <title> 我是第一个网页</title>
</head>

<body>
            
            我的第一个网页

</body>

</html>

1<title>网页标题标签

<title>网页标题<title>

2.<meth>标签：

<meta charset="UTF-8">      UTF-8 国际通用字符

3.标题标签：

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

4.段落标签与换行标签：

<p>....</p>
<br/>

5.水平线标签：

<hr/>

6.字体样式标签；

<strong>字体加粗<strong>    <b>字体加粗</b>
    <em>字体倾斜</em>      <i>字体倾斜</i>

7.注释与特殊符号：

<!--  注释 -->
 &nbsp;空格
 &gt;大于号
 &lt;大于号
 &quot;引号
 &copy;版权符号

8.图像标签基本语法：

<img src="图片地址" alt="图片替代文字" title="鼠标悬停提示文字" width="图片宽度" heigth="图片高度"/>

9.超链接的基本语法：

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href：表示链接地址的路径

target：指定在那个窗口打开，常用取值self(自身窗口)，blank(新建窗口)，

10.锚链接：

<a name="marker">目标位置已></a>
<a href="#marker">当前位置甲></a>

11.功能性链接：

[<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>]

12.无序列表：

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

13.有序列表：

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

15.定义列表：

<dl>
    <dt>标题</dt>
    <dd>1项</dd>
</dl>

14.表格的基本语法：

<table>
    <tr>
        <th>1行1列的标题</th>
        <th>1行2列的标题</th>
    </tr>
    <tr>
        <td>1行1列的单元格</td>
         <td>1行2列的单元格</td>
    </tr>
</table>

第一步：创建表格标签<table>.....<table>.

第二步：在表格标签<table>...<table>里创建行标签<tr>...</tr>,可以多行。

第三步：在第一行标签<tr>...</tr>里创建单元格标签<td>...</td>,可以有多个单元格。

第四步：在行标签<tr>....</tr>里创建单元格标签<td>...</td>，可以有多个单元格。

为了显示表格的轮廓，一般还需要设置<table>标签的border边框属性，指定边框的宽度。

15.表格跨列与跨行：

<table>
    <tr>
        <td colspan="所跨的列数">单元格内容</td>
    </tr>
</table>


<table>
    <tr>
        <td rowspa="所跨的行数"></td>
    </tr>
</table>

16.视频元素：

<video src="视屏路径" controls="controls"></video>
contrils   提供播放
autoplay   自动播放
muted       静音播放
loop        循环播放

17，音频元素：

<audio src="音频路劲" contrils="contrils"></video>
contrils   提供播放
autoplay   自动播放
muted       静音播放
loop        循环播放

18.<iframe>的语法

<iframe src="引用页面地址" name="框架标示名"....></iframe>

三.章

1.表单标签记标单属性：

使用<form>标签来实现表单的创建，属于容器标签，<input>便是其中的一个，用以设定各种输入资料的方法，<form>标签有两个常用的属性;

1action method

<form  merhod="post" asrion="result.html">
    <form method="post" action="Shili8.html">
<P> 名字：<input name="name" type="text"/></P>
<p>密码：<input name="pass" type="password"/></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填">
    </p>
</form

2.表单元素及其格式：

<type>        此属性指定表单元素的类型，可用的类型有text文本、password数字、checkbox多选、radio单选、submit提             交、reset、file、cmail、number、url、hidden、image和button。默认为text。
<name>        此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标示他们，如username、phone等。
<value>       此属性是可选属性，它指定表单元素的初始值，如果type为radio类型，则必须制定一个值。
<size>        此属性指定表单元素的初始宽度。如果type为text或password类型，则表单元素的大小以字符为单位，对于其他输入类型，宽度以像素为单位。
<maxlength>   此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大。
<checked>     此属性用于指定按钮是否是被选中的，当输入类型为radio或checkbox时，使用此属性。

（1）.文本框：

<form method="post" action="">
    <p>
        名字：
        <input type="text" value="" name="fname">
    </p>
    <p>
        姓氏：
        <input name="lname" value="张" type="text">
    </p>
    <p>
        登录名:
       
        <input name="sname" type="password" size="30">
    </p>
    <p>
        登录名:

        <input name="sname" type="password" size="30" maxlength="20">
    </p>
</form>

（2）密码框：

<form method="post" action="">
    <p>
        用户名：
        <input name="name" type="text" size="21">
    </p>
    <p>
        密码：
        <input name="pass" type="password" size="22">
    </p>
</form>

（3）单选按钮：

 <form method="post" action="">
        性别：
        <input name="gan" type="radio" value="男" checked/>男
        <input name="gan" type="radio" value="女"/>女
    </form>

（4）复选框：

<form method="post" action="">
    爱好：
    <input type="radio" name="interesr" value="sports"/>运动
    <input type="radio" name="interesr" value="sports"/>聊天
    <input type="radio" name="interesr" value="sports"/>玩游戏

</form>

（5）列表框：

seleted 默认情况下是被选中的！

<form method="post" action="">
    <select> name="bmon（列表名称）">
        <option value=""selected>{选择月份} </option>
        <option value="1">一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="4">四月</option>
      
    </select>月
</form>

（6）按钮：

<input type="reset" name="Reset" value="重填"/>

<form method="post" action="">
    <p>用户名：
        <input name="name" type="text"/></p>
    <p>密码：
        <input name="pass" type="password"/></p>
    </p>
    <p>
        <input type="reset" name="butReset" value="reset按钮"/>
        <input type="submit" name="butSubmit" value="submit按钮"/>
        <input type="button" name="butButton" value="button按钮"
        onclick="alert(this.value)"/>

    </p>
</form>

（7）多行文本域：

<p>
    <textarea name="textarea" cols="40" rows="6">
    文本 
    </textarea>

</p>

（8）文件域：

<form action="" method="post" enctype="application/x-www-form-urlencoded">
    <p>
        <input type="file" name="files" /><br/>
        <input type="submit" name="upload" value="上传"/>
    </p>
</form>

（9）邮箱：

 <form action="" method="post">
        <p>
            邮箱：
            <input type="email" name="emall"/>
        </p>
        <input type="submit"/>
    </form>

（10）网址

 <form action="" method="post">
        <p>
            请输入你的网址：
            <input type="url" name="userUrl"/>
        </p>
        <input type="submit"/>
    </form>

（11）数字：

v <form action="#" method="post">
        <p>
            请输入数字：
            <input type="number" name="num" min="0" max="100" step="10"/>
        </p>
        <input type="submit"/>
    </form>

（12）滑块：

<form action="#" method="post">
        <p>
            请输入数字：
            <input type="range" name="rangel" min="0" max="10" step="2"/>
        </p>
        <input type="submit"/>
    </form>

（13）搜索框：

<form action="#" method="post">
        <p>
            请输入搜索的关键词：
            <input type="search" name="sousuo"/>
            <input type="submit" value="Go"/>

        </p>
    </form>

3.设置表单隐藏域:

<form action="" method="get">
    <p>  用户名：
        <input type="text" name="name"/> </p>
    <p>密码：
        <input name="pass" type="password"/> </p>
   <p><input type="submit" value="提交"/>  </p>
    <p><input type="hidden" name="userid" value="666"/> </p>
</form>

4.表单的只读于禁用;

<readonly> 只读

<reauired> 提示

<disabled> 禁用

  <form acyion="" method="get">
            <p>用户名：
                <input name="name" type="text" value="张三" readonly/> </p>
            <p>密码：
            <input name="pass" type="password" /> </p>
            <p>
                <input type="submit" value="修改" disabled/>
            </p>
        </form>

5.表单元素的标注：

<label  for="表单元素的id">标注的文本</label>

<form>
            请输入性别：
            <label for="male">男</label>
            <input type="radio" name="gender" id="male"/>
            <label for="female">女</label>
            <input type="radio" name="gender" id="female"/>
        </form>

6.表单初级验证的方法：

（1）placeholder

属性用于为input类型的文本框提供一种提示（hint），这种提示可以描述文本框期待用户输入何种内容，再输入为空时，当在文本框中写入内容时消失。placeholder属性适合于input标签：text、search、url、email、和password等类型。

（2）required

属性用于规定文本框填写内容不能为空，否则不允许用户提交表单，该属性适合input标签：text、search、url、email、password 、checkbox、radio、file等类型。

（3）pattern

属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。正则表达式是javaScript中的内容。

常用元素有：

文本框<text>   密码框<password> 单选按钮<radio>  默认选中   <checked>    复选框<checkbox>
列表框<select>和<option> 默认选中  <seleted>   滑块<range>      邮箱<email>  网址<url>  
普通按钮<button> 提交按钮<submit> 重置按钮<reset>    多行文本框<textarea>  数字<number>    搜索<search>   头部<header>   主体部分<secyion>  底部<footer>   
只读  <readonly>  提示不能为空<reauired>  禁用    <disabled>  提示语<placeholder>
<td colspan="所跨的列数">内容</td>  
<td rowspan="所跨的行数">内容</td>
提供播放  <contrils>   自动播放  <autoplay>   静音播放 <muted>      循环播放 <loop>

块元素特性：

无论多少，都独占一行。

<div>定义文档中的分区或节

<h1>定义最大的标题

<h2>定义副标题

<h3>定义标题

<h4>定义标题

<h5>定义标题

<h6>定义最小的标题

<ul>定义无序列表

<ol>定义有序列表

<li>定义有序列表或无序列表的列表项目

<dl>定义自定义列表

<dd>定义自定义列表中的条目

<dt>定义自定义列表中的项目

<hr>创建一条水平线

<p>定义段落

<table>定义表格

<td>表格中的标准单元格

<th>定义表头单元格

<thead>标签定义表格的表头

<tr>定义表格中的行

行内元素特性：

内容撑开宽度，左右都是行内元素的可以排在一行

<a>定义超链接

<b>字体加粗

<span>定义在文档中的行内元素

<img>向网页中插入题图像

<input>输入框

<small>小号字体效果

<br>换行

<big>字体加大加粗

<strong>强调的语气

<select>创建单选或多选菜单

<textarea>定义文本域，多行的文本输入控件

number 和 range类型的属性

value      规定的默认值
min        规定允许的最小值
max        规定允许的最大值
step       规定合法的数字间隔（如果step="2",合法的数是—2、0、2、4等）

4.章

1 . 什么是 c s s：

css 全称为层叠样式表（Cascading Style Sheet）又称为风格样式表（Style Sheet）它是用来进行网页风格设计的！

2.如何应用：

通过设立样式表，可以统一的控制HTML中各标签的显示属性，如设置字体，大小，样式等，使用CSS还可以设置文本居中和显示，文本与图片的对齐方式，超链接的不同效果等，这样层叠样式表达可以更有效的控制网页外观！

3.在HTML中引入CSS样式：

（1）行内样式：

就是在HTML标签中直接使用，style属性设置CSS样式；

<h1  style="color:red">style属性的应用</h1>

（2）内部样式：

把CSS代码写在<head>的<style>标签中

（3）外部样式：

外部样式是把CSS代码保存为一个独立的样式表文件扩展名为.CSS

1)链接外部

<head>
<link     href="style.css"   rel="stylesheet"   type="text/css"/>
</head>

2）导入外部：使用@import导入外部样式必须放在<style>标签中

<head>
    <style>
    @impot  url("common.css")
    </style>
</head>

标签优先级：

优先级：行内标签>内部标签>外部标签

4.基本选择器：

（1）标签选择器：

p { font-size:16px }

（2）类选择器

.class{font-size：16px}

5.章

1字体样式：

<font-family>设置字体类型 <font-family：“隶书”>

<font-size>设置字体大小 font-size:12px；

<font-style>设置字体风格 font-style：italic；

<font-weight>设置字体的粗细 font-weight：bold；

<font>在一个声明中设置所有字体属性 font：italic bold36px “宋体”；

2.字体粗细：

normal 默认值，定义标准的字体

bold 粗字体

bolder 更粗的字体

ligher 更细的字体

100,200,300,400,500,600,700,800,900 定义由细到粗的字体，400等同于normal，700等同于bold

3.排版网页文本：

color 设置文本颜色 color：#00c；

color：rgba（0,0,255,0.8 / *透明度 */）

text-align 设置元素水平对齐方式 text-align：right；

text-indent 设置首行文本的缩进 text-indent：20px；

line-height 设置文本的行高 line-height：25px

text-decoration 设置文本的装饰 text-decoration：underline；

4.水平对齐：

left 把文本排到左边，默认值，由浏览器决定；

right 把文本排到右边

center 把文本排到中间

justify 实现两端对齐文本效果

5.首行缩进，行高

line-height 设置行高

text-indent 首行缩进

6.文本装饰（上划线）：

none 默认值，定义标准文本

nderline 设置文本下划线

overline 设置文本上划线

line-through 设置文本删除线

6.垂直对齐：

vertical-align 设置文本与图片的居中对齐，此时他的值为 middle

7.文本阴影：

text-shadow：color x轴位移（o-offset） y轴位移（y-offset）模糊半径（blur-radius）

可以使用 text-shadow 指定多个阴影

8.超链接的伪类：

a:link 单击访问前的超链接样式 a:link {color：#9EF5F9；}

a:visited 单击访问后的超链接样式 a:visited{color：#333；}

a:hover 鼠标悬浮其上的超链接样式 a:hover{color：#FF7300；}

a:active 单击未释放的超链接样式 a:active{color：#999；}

9.列表样式：

none 无标记符号 list-style-type：none；

disc 实心圆，默认类型 list-style-type：

circle 空心圆 list-style-type：

square 实心正方形 list-style-type：

decimal 数字（有序列表） list-style-type：

10.<div>网页内容<div> 块元素

11.背景属性：

背景包括：背景颜色（background-color）背景图像（background-image）

（1）背景颜色：

背景颜色值有一个特殊值；transparent即透明，是background-color属性的默认值；

（2）背景图像：

使用background-image属性设置网页元素的背景图像

当背景重复时<background-repeat>方式和背景定位<backgroun-position>两个属性一起使用

1）背景图像：

使用<background-image>属性设置背景图像的方式是background-image:url(图片路径)

图片路径通常写相对路径；此外，backound-inage还有一个特殊值，即none表示不显示背景图像，实际工作中这个值很少用。

2）背景重复方式：

如果设置了background-image，那么背景图默认自动向水平和垂直方向重复平铺。如果不希望图像平铺，或者只希望图像沿着一个方向平铺，则使用<background-repeat>属性来控制。该属性有四个值实现不同的平铺方式。

1.repeat：沿水平和垂直两个方向平铺。

2.no-repeat：不平铺，即背景图像只显示一次

3.repeat--x: 只沿水平方向平铺；

4.repeat--y：只沿垂直方向平铺；

（3）背景定位：

在CSS中，使用<background-position>l来设置图像在背景中的位置。

也可以使用<background-position>属性设置背景图像出现的位置，

12.背景尺寸：

background-size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 130px;
        border: 1px solid red;
        background:url("../../image/太阳的后裔.png")no-repeat;}
   加     /* background-size:auto}*/
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（1）auto

当background-size：取值为auto时图片没发生任何变化， auto值的左右就是使用图片保持原样，是默认值；

（2）percentage

background-size:还可以是0%~100%的值

（3）cover

属性图片放大后图片显示的不是中间，为了让背景图放大后在中间显示，需要在元素中设置background-position 为center。

（4）contain

的background-size:还有一种取值为contain，可以让背景图保持本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域。

13.CSS3渐变：

IE浏览器是Trdent内核，在写样式兼容的时候要加前缀：-ms-

Chrome 浏览器是Webkit内核，在写样式兼容的时候要加前缀：-webkit-

safari浏览器是Webkit内核在写样式兼容的时候要加前缀：-webkit-

Opera浏览器是Blink内核，在写样式兼容的时候要加前缀：-o-

Fieefox浏览器是Mozilla内核，在写样式兼容的时候要加前缀：-moz-

常用：

6.章

1.边框:

（1）border-color 边框颜色

border-top-color 设置上边框颜色

border-right-color 设置右边框颜色

border-bottom-color 设置下边框颜色

border-left-color 设置左边框颜色

（2）border--width边框粗细

他的值有 thin 设置细的边框

medium：默认值，设置中等的边框

thick：设置粗的边框

border-top-width 设置上边框粗细

boder-right-width 设置右边框粗细

boder-bottom-width 设置下边框粗细

boder-left-width 设置左边框粗细

（3）border-style边框样式{实线，虚线..}

实线（solid），点线（dootted），虚线（dashed），双线（double）。

border-top-style：solid 设置上边框为实线

border-reght-style：solid 设置右边框为实线

border-bottom-style：solid 设置下边框为实线

border-left-style：solid 设置左边框为实线

2.外边距：

margin-top 设置上外边距

margin-right 设置右外边距

margin-botton 设置下外边距

margin-left 设置左外边距

margin 上，下，右，左边距均为： matgin：21px

3.内边距：

padding-top：设置上外边距

padding-right：设置右外边距

padding-botton：设置下外边距

padding-lift：设置左外边距

padding 上，下，右，左边距均为： padding：21px

常用：

<border>边框   <solid> 实线  ，<dootted>点线，<dashed>虚线，<double>双线。
<margin>内边距    <padding>外边距

9.章

1css3变形是通过《transform》实现的

<transform:translate>           2D位移  平移         <transform: translate(x轴,y轴);><transform:scale>                 2D缩放              <transform: scale(1.5);>         放大1.5倍
<transform:rotate>              2D旋转              <transform: rotate(-90deg) scale(2);>旋转多少度
<transform:skew>                2D倾斜              < transform: skew(40deg,-20deg);> 倾斜

1.过渡属性：

transition-property 属性用来定义转换动画的CSS属性名称，常用的取值如下：

IDENT:指定的CSS属性（width宽，height高，background-color 背景颜色属性等）。

2.过度所需的时间：

transition-duration 属性用来定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间单位为 s；

3.过渡动画函数：

transition--timing-function 属性用来指定浏览器的过度速度，以及过渡期间的操作进展情况，通过给过度添加一个函数来指定动画的快慢方式。

<ease：>                         默认值
            
<near:>                         均速运动

<eadse-in:>                     渐显效果

<ease-out:>                     渐隐效果

<ease-in-out:>                  渐显溅隐效果

4.过渡延迟时间

transition-delay 属性用来指定一个动画开始执行的时间，这个时间可以是正值，负值或0；