html基础操练和进阶修炼宝典

简介: html基础操练和进阶修炼宝典

html修炼必经之路—各种类型标签详解加展示,关注点赞加收藏,防止迷路哦

1.超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a 超链接标签</title>
</head>
<body>
<!--
GET   - 从服务端请求数据 (可以携带参数来获取数据,参数会暴露在地址栏上,不太安全。传参大小受浏览器限制,控制在2k~8k范围内,显式传值)
POST  - 向服务端发送数据 (发送数据时候不限制发送数据的大小,隐式传值)
-->

<!-- target="_self" 代表本页面跳转 target="_blank" 新窗口跳转   默认是_self -->

1、target=“_self”, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转都在同一个窗口的核心点)

2、target=“_blank” ,浏览器总在一个新打开、未命名的窗口中载入目标文档。


<a href="./2.html" target="_self">点我1</a>

通过相对路径跳转到当前目录下的2.html。链接地址跳转都是get方式

   <a href="http://www.baidu.com" target="_blank">点我2</a>
    <a href="http://www.baidu.com/s?wd=王文" target="_blank">点我3</a>

百度搜索,是把搜索框的搜索内容当参数传递给地址栏

我们可以自己传参,实现点击即搜索

点击 点我3 实现跳转搜索

<!-- 实现跳转,获取页面的时候,把参数传进去 -->

<a href="./2.html?a=1&b=2&c=3&d=4" target="_blank">点我4</a> <!--地址栏传值 -> get显式传值-->


用 & 拼接不同参数,get方式传参

<!-- 刷新页面 a标签herf=空,表示点击刷新页面-->
<a href="">点5</a>

<!-- 不刷新页面   用户填表单的时候,不要刷新,不然数据丢失-->
<a href="#">点6</a>

点击没任何反应

<!-- 把数据扔到a连接中的href属性中 , 默认下载操作 -->
<a href="VSCodeUserSetup-x64-1.51.0.exe">点7</a>

</body>
</html>

2.跳锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> a链接 跳锚点 </title>
</head>
<body>
    <ul>

       <!-- 跳锚点要通过a链接来跳,href = "#a1" 不刷新跳,跳到id = a1的位置 --> 
       <li><a href="#a1">第一章</a></li>
        <li><a href="#a2">第二章</a></li>
        <li><a href="#a3">第三章</a></li>
    </ul>

    <a id="a1">第一章内容</a>
    <p style="width:500px;height:1000px;background-color: silver;">孙悟空三打白骨精</p>

    <a id="a2">第二章内容</a>
    <p style="width:500px;height:1000px;background-color:skyblue;">孙悟空怒锤红孩儿</p>
    
    <a id="a3">第三章内容</a>
    <p style="width:500px;height:1000px;background-color:tan;">孙悟空大闹凌霄殿</p>

   <!-- href="#" 表示回到顶部 --> 
  <a href="#">回到顶部</a>
</body>
</html>


3.图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img 图片标签</title>
</head>
<body>
    <!-- img 单独调整width或者height可以随着比例进行缩放,如果同时指定有可能失真;  title属性设置图片的提示功能 -->
    <a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin">
        <img src="zhouxingchi1.jpg" width="200px" height="200px;" title="周星驰" />
    </a>
    <img src="zhouxingchi1.jpg" width="200px" height="200px;" />
</body>
</html>


a标签href填地址,不写target,默认target是 _self 本窗口跳转 px像素,图像最小显示单位为1个像素

可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素,它是以一个单一颜色的小格存在 [1] 。

每一个点阵图像包含了一定量的像素,这些像素决定图像在屏幕上所呈现的大小。

把img标签放在a标签里面,实现点击图片跳到相应链接,title属性设置图片的提示功能,当鼠标放在图片上时,会出现title设置的字段提示。用于 当浏览器图片不能显示时的提示

<img src="" />  src填写图片路径,一般是本地路径,也可以是网络图片。a标签是行内块状元素,不用通过css,可以直接针对img标签设置大小

4.表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> table 表格标签</title>
</head>
<body>

    <!-- 
    ### part1    
    table 表格  border 表框 width 宽度设置
    tr 表示一行
    th 表示标题加粗
    td 表示一个单元格 


-->

<table border=1 width="1000px;">
    <thead style="background-color: tan;">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>薪水</th>
            <th>部门</th>
        </tr>
    </thead>

    <tbody style="background-color: teal;">
        <tr>
            <td>王文</td>
            <td>18</td>
            <td>10万</td>
            <td>python</td>
        </tr>

        <tr>
            <td>王伟</td>
            <td>20</td>
            <td>11美元</td>
            <td>开发部门</td>
        </tr>

        <tr>
            <td>王致和</td>
            <td>22</td>
            <td>100万</td>
            <td>臭豆腐研发部门</td>
        </tr>
    </tbody>
    <tfoot style="background-color: thistle;">
        <tr>
            <td>lianxi1</td>
            <td>lianxi2</td>
            <td>lianxi3</td>
            <td>lianxi4</td>
        </tr>
    </tfoot>
</table>

分割线

 <hr  style="width:20px;height:100px;"/>
    <!-- 
        colspan  横向合并
        rowspan 纵向合并 
    -->
    <table border=1 width="1000px;">
        <thead style="background-color: tan;">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪水</th>
                <th>部门</th>
            </tr>
        </thead>

        <tbody style="background-color: teal;">
        <tr>
            <td colspan=2>123</td>
            <td>10万</td>
            <td rowspan="3">销售</td>
        </tr>

        <tr>
            <td>王伟</td>
            <td>20</td>
            <td>11美元</td>

        </tr>

        <tr>
            <td>王致和</td>
            <td>22</td>
            <td>100万</td>

        </tr>
        </tbody>

        <tfoot style="background-color: thistle;">
            <tr>
                <td  colspan=4>lianxi1</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

5.表格的方向属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table 表格的方向属性</title>
</head>
<body>
    <!-- 
    水平方向设置 align : left center right  
    垂直方向设置 valign: top middle bottom 

    cellspacing td 与td 之间的间距
    cellpadding td 与其中内容之间的间距
一般不用这俩控制,而是用css


    -->
    <table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
        <tr align="center" valign="top">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>
        <tr align="center" valign="middle"">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>

        <tr align="center" valign="bottom">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>


    </table>


水平方向设置 align : left center right  
垂直方向设置 valign: top middle bottom

在tr中设置

cellspacing td 与td 之间的间距

cellpadding td 与其中内容之间的间距

在table中设置


</body>
</html>

6.子窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> iframe 子窗口</title>
</head>
<body>
    <iframe src="" name="isme" width="1000px" height="200px;"></iframe>
    <hr />
    <a href="http://www.baidu.com" target="isme">点我跳转百度</a>
    <a href="3.html" target="isme">点我跳转3.html</a>
    <a href="4.html" target="isme">点我跳转4.html</a>
</body>
</html>
<iframe>标签生成一个指定区域,在该区域中嵌入其他网页

出现个小窗口

点击按钮,相应页面在小窗口显示,目前百度拒绝在小窗口访问了

7.音视频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- https://www.w3school.com.cn/html/index.asp  w3c school 手册 -->

    <video src="ceshi.mp4" controls = "controls" style="width:100px;">
        抱歉~! 您的浏览器不支持,该扔了
    </video>
    <audio src="潮汐-她的城市.mp3" controls = "controls">
        抱歉~! 您的浏览器不支持,该扔了
    </audio>
</body>
</html>

显示控件 controls = “controls”。如果浏览器不支持,在标签之间写上描述文字,告诉用户不支持

8.表单

input标签一定要套在form表单里面提交,不然只有前端样式,没有提交功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单<</title>
</head>
<body>
    <!-- action 表示提交的数据地址
    method 表示数据以什么样的形式提交
        get    显式获取数据(参数在地址栏上,参数大小在2k~8k左右)  不写默认是get请求
        post   隐式提交数据(参数不在地址栏,参数大小没有限制) 

    input 是行内块状元素
    type  指定input的类型
    name  指定input的名字,必须写
    value 指定input的默认值
    -->

一:表单属性

表单一共有五个重要属性:name 、 action、 method 、target和enctype属性


1 name 属性

一个页面上的表单可能不止一个,为了区分这些表单,就需要name 属性给表单命名,通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格

要想提交数据,必须带name属性


2 action属性

用于指定表单数据提交到哪个地址进行处理。

3 method属性

作用是告诉浏览器,指定将表单中的数据使用哪一种HTTP提交方法,取值为get 或者 post。


其中:get 是默认值,表单中的数据被传送到action 属性指定的URL,然后这个新的URL 被传送到处理程序上。


post:表单数据被包含在表单主体中,然后被传送到处理程序上。


两者区别:


get:该请求会将请求参数的名和值转换成字符串,然后拼接到URL 之后,因此在地址栏等地方可以看到请求的参数;但是安全性差,并且安全性差,传输的数量比较小,在URL中的最大长度是2048个字符。


post:该请求方式通过HTTP的post 机制,将所有的请求参数的名和值放在HTML的header 中传输;并且安全性号,传输的数量也大。


GET请求中URL的最大长度限制总结


浏览器

1、IE

IE浏览器(Microsoft Internet Explorer) 对url长度限制是2083(2K+53),超过这个限制,则自动截断(若是form提交则提交按钮不起作用)。


2、firefox

firefox(火狐浏览器)的url长度限制为 65 536字符,但实际上有效的URL最大长度不少于100,000个字符。


3、chrome

chrome(谷歌)的url长度限制超过8182个字符返回本文开头时列出的错误。


4、Safari

Safari的url长度限制至少为 80 000 字符。


5、Opera

Opera 浏览器的url长度限制为190 000 字符。Opera 9 地址栏中输入190 000字符时依然能正常编辑。


服务器

1、Apache

Apache能接受url长度限制为8 192 字符


2、IIS

Microsoft Internet Information Server(IIS)能接受url长度限制为16 384个字符。

这个是可以通过修改的(IIS7)configuration/system.webServer/security/requestFiltering/requestLimits@maxQueryStringsetting.


3、Perl HTTP::Daemon

Perl HTTP::Daemon 至少可以接受url长度限制为8000字符。Perl HTTP::Daemon中限制HTTP request headers的总长度不超过16 384字节(不包括post,file uploads等)。但当url超过8000字符时会返回413错误。

这个限制可以被修改,在Daemon.pm查找16×1024并更改成更大的值。


4、ngnix

可以通过修改配置来改变url请求串的url长度限制。


client_header_buffer_size 默认值:client_header_buffer_size 1k


large_client_header_buffers默认值 :large_client_header_buffers 4 4k/8k


由于jsonp跨域请求只能通过get请求,url长度根据浏览器及服务器的不同而有不同限制。

若要支持IE的话,url长度限制为2083字符,若是中文字符的话只有2083/9=231个字符。

若是Chrome浏览器支持的最大中文字符只有8182/9=909个。


4 target属性

该属性与a标签的target 属性一样,都是来指定目标窗口的打开方式。


取值:


_self: 默认值,表示在当前的窗口打开页面。


_blank:在新的窗口打开页面。


_top: 表示页面载入到包含该链接的窗口,取值在当前的窗口中的所有页面。


_parent: 在父级窗口打开页面。


5 enctype属性

用于设置表单信息提交的编码方式;

取值:

application / x-www-form-urlencoded :默认编码方式;

multipart / form-data : MIME 编码,对于“上传文件” 这种表单必须选择该值;

text / plain: 空格转换为加号(+),但不对特殊字符编码。


二:表单对象

就是放在form 标签内的各种标签,有:input、textarea、select、option、button、label、otpgroup等。


1 input标签

type属性的值:

默认类型是:text。


text:单行文本框

password: 密码,前端输入页面不显示输入内容


value :定义文本框的默认值,也就是文本框内的文字。


size:定义文本框的长度,单位是一字符。


maxlength :设置文本框最多可以输入的字符数。


radio:单选按钮,name 和 value 是单选按钮中的必要的两个属性,必须要设置。并且同一组单选按钮中各个选项中的 name 属性值必须一样。


checkbox: 普通按钮,checked 属性表示该选项在默认情况下已经被选中。


button:普通按钮


value 属性的取值就是显示在按钮上的文字,onclick 是普通按钮的事(js)


submit: 提交按钮,value 属性的取值就是显示在按钮上的文字,实现将表单内容提交给服务处理。


resrt:重置按钮,value 属性的取值就是显示在按钮上的文字,单击可清除用户在页面当前表单中输入的信息。


file:文件上传,当使用文件域file 时,必须在form标签中指明编码方式,enctype=“multipart/form-data”,以确保服务器正常接收数据。


image:图片域,拥有按钮的特点,也拥有图像的特点(不常用)。

hidden:隐藏字段(不常用)。

input标签的其他属性:

checked:设置单选框、复选框,初始状态是选中,属性值仅有checked。


disabled:设置首次加载禁用该元素,属性值仅有disabled,表示该元素被禁用。


maxlength:设置文本框输入的最大字符数。


readonly:只读,表示文本框的内容不允许用户直接进行修改。


size:设置该元素的宽度。


src:设置图像域所显示的图像的URL。


2 多行文本textarea

rows:指定可输入的行数。


cols:指定可输入的列数。readonly:用于指定该文本只读,该属性的值只能是readonly。

4 表单控件(元素)button

用于定义一个按钮,元素内部可包含普通文、文本格式化元素、图片等。提供了更加丰富的显示内容和视觉效果。


type属性智能有button、resert、submit 3种。


5 表单控件(元素)label标签

用于对其他表单控件(元素)进行说明,主要用于单机元素生成标签,浏览器会自动将焦点转移到和标签相关的表单控件上。

实现点击选项也能选中


label标签和表单控件关联的方式有两种:


使用label标签和for属性,指定为关联表单控件(元素)的id即可;将说明和表单控件一起放在label 元素内部即可。

    <form action="" method="">
        手机号:<input type="text" name="phone" value="王文"  />
        <br />
        密码:  <input type="password" name="pwd" value="李四" style="width:200px;height:50px;" />
        <br />       
        <input type="submit" value="提交" />
    </form>
</body>
</html>


input是行内块状元素,可以设置宽高

input 的name必须写,不然后台无法获取表单值

method不写,默认是get方法,点击提交,将默认值传到地址栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框 , 复选框 , 下拉框</title>
</head>
<body>
    <form action="" method="">
        <!-- 单选框 radio 多选一 name名字要一致  checked:默认选中 -->
        <input type="radio" name="sex" value="m" id="sex1"  /> <label for="sex1" >男性</label>
        <input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
        
        <hr />
        <!-- 复选框 checkbox 多选多 name名字要一致 -->
        <input type="checkbox" name="food" value="banana" checked />香蕉
        <input type="checkbox" name="food" value="huanggua" />黄瓜
        <input type="checkbox" name="food" value="qiezi" checked />茄子
        <input type="checkbox" name="food" value="donggua" />冬瓜
        <hr />
        
        <!-- 下拉框 select 多选一 selected 默认选中, disabled 无法选中-->
        <select name="city" >
            <option value="beijing"  >北京人</option>
            <option value="xian" selected>西安人</option>
            <option value="dalian"  >大连人</option>
            <option value="fuzhou">福州人</option>
            <option value="zhengzhou" disabled >郑州人</option>
        </select>

        <hr / >
        <input type="submit" value="点我" />

    </form>
    
</body>
</html>

radio单选框,默认只能点击圆圈才能选中

添加上label标签,点击男性,女性 选项也能选中。label要与 input标签中的id关联
同一组radio选项中,name的值要相同,checked:默认选中
<label> 标签的 for 属性应当与相关元素的 id 属性相同
复选框中name一定要指定,而且值也要一致。
服务器取值的时候取的是value的值,所以value也一定要指定


下拉框,行内元素,selected,默认选中 disabled的,灰色不能选

9.文件上传

涉及到文件上传,method一定得是post 编码类型 enctype=“multipart/form-data”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 文件上传 </title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <!-- 文件上传 -->
        头像:<input type="file" name="myfile" />
        <hr/>
        <!-- 大段文本框 -->
        <textarea name="info" style="width:100px;height:100px;background-color:tan;" >请填写相关数据</textarea>
        <hr/>
        <!-- 隐藏的表单框 => 隐藏要修改的数据id。方便用户填错数据,方便程序员后台修改 -->
        <input type="hidden" name="sid" value="13" />
        <hr/>
        <input type="submit" value="提交"/>
    </form>

</body>
</html> 

10.input属性

input一定要套在form表单里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input属性</title>
</head>
<body>
    <!-- 
    placeholder  灰色输入提示,有需要输入的框中在输入之前有提示,当光标放上去输入内容之后,提示消失
    required     必填项
    readonly     数据只能读不能改   可以被提交
    disabled     数据只能读不能改   不会被提交
    size             设置输入框的大小,可以控制输入框的大小,但一般我们用css来调整
    maxlength    输入框最多可以输入多少字符
    minlength    输入框最少需要输入多少字符
    autofocus    自动获取焦点, 整个页面只能有一个。进入页面光标默认所在位置
    tabindex     设置tab的切换顺序 按table键鼠标的光标切换顺序
    -->
    <form action='' method="" >
        
        用户名:<input type="text" name="username" placeholder="请输入用户名"  tabindex=5 />

<br />
密码: <input type="password" name="pwd" tabindex=4  required />
<br />

密码字段设为必填字段后,不填不让提交

    年龄: <input type="text" name="age" value="18" readonly tabindex=3 />
    <br />
    邮箱: <input type="text" name="email" value="123463922@qq.com" disabled   />
    <br />
    班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2  tabindex=2/>
    <br />
    国籍: <input type="text" name="country" autofocus tabindex=1 />
    <br />
    <input type="submit">

</form>

年龄设为只读,不让修改,按键盘输入不进去

设为光标锁定autofocus 打开页面,光标就在该位置

tabindex=1 按tab键,鼠标光标切换的顺序。


tabindex 有三个值:0,-N(通常是-1),N(正值)

tabindex=0,该元素可以用tab键获取焦点


且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位

tabindex<=-1,该元素用tab键获取不到焦点,但是可以通过js获取


这样就便于我们通过js设置上下左右键的响应事件来focus

取值 -1~-999 之间没有区别,但为了可读性和一致性考虑,推荐使用 -1

tabindex>=1,该元素可以用tab键获取焦点,而且优先级大于tabindex=0


不过在tabindex>=1时,数字越小,越先定位到;

如果多个元素拥有相同的 tabindex ,他们的相对顺序按照他们在当前DOM中的先后顺序决定

</body>
</html>
相关文章
|
2月前
|
JavaScript 前端开发
新手向:HTML进阶
HTML一些进阶内容
24 0
|
2月前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
2月前
|
前端开发 数据安全/隐私保护
html进阶语法(2)
文本域 作用:多行输入文本的表单控件。
61 0
|
2月前
|
数据安全/隐私保护
html进阶语法(1)
html进阶 列表、表格、表单 目标:掌握嵌套关系标签的写法,使用列表标签布局网页
48 0
html进阶语法(1)
|
10月前
|
前端开发
html和css进阶小练习
html和css进阶小练习
|
10月前
|
编解码 前端开发 JavaScript
html和css进阶
html和css进阶
|
移动开发 JavaScript 前端开发
[译]HTML进阶之Content categories
[译]HTML进阶之Content categories
[译]HTML进阶之Content categories
|
Web App开发 XML 测试技术
pytest进阶之html测试报告
pytest进阶之html测试报告前言  Pytest系列已经写了几篇文章了,也不知道对多少人有帮助,总之对于我自己来说该掌握的都已经掌握了,那么今天我们再来说说pytest如何生成一个完整的html测试报告,让你在吹牛逼的路上再多一份资本!废话不多说,进入正题!(咋就莫名其妙想起这句话了呢, 估计看文章看多了,貌似挺多人用这句话过度……) 使用pytest-html插件生成测试报告 pytest-html生成报告pytest是借助pytest-html插件生成测试测试报告, 不用自己编写生成报告代码。
3893 0
|
前端开发 容器 HTML5
Html和Css学习笔记-html进阶-div与span
Html和Css学习笔记-html进阶-div与span 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。
1534 0
|
数据安全/隐私保护 安全 大数据
HTML基础进阶
HTML表单 form标签 标签代表一个表单,表单用于向服务器传输数据。 标签能够包含 ,可以是文本字段,复选框,单选框或提交按钮等。还可以包含 等。    常用属性:       name:用于定义表单的名称       action:用于规定提交表单时向何处发送表单数据。
1202 0