web前端1

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量21 收藏
点赞数
分类专栏： web前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peach_TT/article/details/131606500
版权
本文介绍了HTML的基础结构，包括文档声明、标题、段落、文本格式化、无语义标签、图片、视频和音频的使用。此外，还讲解了链接、锚点、列表、表格、表单元素以及HTML的全局属性和H5新增的表单类型。
摘要由CSDN通过智能技术生成

html

html骨架

<!DOCTYPE html>

<!--声明文档 html5  -->

<html lang="en">

<head>

</head>

<body>

</body>

</html>

属性名=“属性值”

eg：loop=“1”

属性名与属性值相同，只写属性名

Ctrl+/ ---- 快捷注释

！----快速生成

标签

标题标签---<h>

h1-h6逐渐变小    独占一行

段落标签---<p>

p行与行之间空

换行标签---<br>

水平线标签---<hr>

文本格式化标签

<del>---划去

<s>---划去

<strong>---字体加粗

...

无语义标签

<div>---容器，独占一行      多用于布局

<span>---容器，一行可存在多个

图片标签---<img>

src：指向图片位置   

alt：图片地址发生错误时，用来提示的字

title：鼠标经过时，显示的文字

border：边框

width：宽度

height：高度

视频标签---<video>

controls：控件

autoplay：自动播放

muted：静音播放

loop：自动连播

poster：等待加载时的显示图片

width：宽度

height：高度

音频标签---<audio>

同图片与视频

链接标签---<a>

默认当前窗口打开

href

href=“网站地址” 

target=“_blank”     新建标签页打开

锚链接

 <a href="#one">个人经历</a>

...

  <div id="one">个人经历</div>

id就如身份证号

有序列表---ol  

 <ol type="a">

        <li>榴莲</li>

        <li>臭豆腐</li>

        <li>鲱鱼罐头</li>

        <li>奶茶泡饭</li>

    </ol>

无序列表---ul

  <ul type="circle">

        <li>丁真</li>

        <li>法外狂徒张三</li>

        <li>华晨宇</li>

        <li>罗翔</li>

    </ul>

自定义列表---dl

  <dl>

        <dt>

            你们喜欢的明星是？

        <dd>

            张三

        </dd>

        <dd>

            里斯

        </dd>

        <dd>

            张三

        </dd>

        </dt>

    </dl>

iframe框架

<iframe src="淘宝" width="900px" height="600px"></iframe>

元素显示模式

块元素：独占一行（div）   宽、高、内外边距可以设置

行内元素：一行可以存在多个（span）  宽、高、内外边距不可以设置

表格标签---<table>

tr---行

th---表头单元格

td---列

eg：

<table>

        <!-- 表头 rows  data-->

        <caption>学生信息</caption>

        <thead>

            <tr>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

                <th>民族</th>

                <th>政治面貌</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>王鑫宇</td>

                <td>男</td>

                <td>18</td>

                <td>汉</td>

                <td>党员</td>

            </tr>

            <tr>

                <td>王鑫宇</td>

                <td>男</td>

                <td>18</td>

                <td>汉</td>

                <td>党员</td>

            </tr>

            <tr>

                <td>王鑫宇</td>

                <td>男</td>

                <td>18</td>

                <td>汉</td>

                <td>党员</td>

            </tr>

            <tr>

                <td>王鑫宇</td>

                <td>男</td>

                <td>18</td>

                <td>汉</td>

                <td>党员</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

                <td>共计:4人</td>

            </tr>

        </tfoot>

    </table>    

表格标签属性

表头 rows  data

table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)

caption；通过css更改

thead、tr、tbody、tfoot：height\align（水平）\valign（垂直）

单元格合并

在td中输入：

      跨行：rowspan

      跨列：colspan

详情标签---details

 details：详情标签         配合summary使用

tabindex

tabindex 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数

表单

表单的基本结构

 表单：网页交互区，收集用户信息

      action:将数据交给谁处理

      name：必有属性

      method：提交方式   ajax

eg：

    <form action="百度安全验证">

        <input type="text" name="wd">

        <button>提交</button>

    </form>

常见的表单元素

文本框，密码，单选框，多选框，checked默认选中，隐藏域，确认按钮，重置按钮，普通按钮，文本域，下拉菜单...

eg：    <form action="#">

        <!-- 文本框    maxlength:最大长度-->

        用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />

        <!-- 密码 -->

        密码：<input type="password" name="pwd"><br />

        <!-- 单选框 -->

        <input type="radio" name="gender" value="nan">男

        <input type="radio" name="gender" value="nv">女<br />

        <!-- 多选框   label标签-->

        <input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>

        <label><input type="checkbox" name="food">吃臭豆腐</label>

        <!-- checked默认选中 -->

        <input type="checkbox" name="food" checked>吃肥肉

        <!-- 隐藏域 -->

        <input type="hidden" name="hid" value="南德斯才能使调查">

        <!-- 确认按钮 -->

        <button type="submit"></button>

        <!--重置按钮 -->

        <input type="reset">

        <!-- 普通按钮 -->

        <input type="button">

        <!-- 文本域 -->

        <textarea cols="20" rows="10" maxlength="200

        ">

        </textarea><br />

        <!-- 下拉菜单 -->

        <select name="jiguan" id="">

            <option value="南京">南京</option>

            <!-- selected下拉菜单的默认选中 -->

            <option value="成都" selected>成都</option>

            <option value="西安">西安</option>

        </select>

        <input type="submit">

    </form>

html的全局属性

id：身份证号，在一个页面中只能出现一次

class：一类，可以出现多个

accesskey：设置快捷键

data：自定义属性

eg：

    <!-- id身份证号，在一个页面中只能出现一次 -->

    <div id="one"></div>

    <!-- class   一类 可以出现多个-->

    <div class="pink" style="font-size: 40px;">我是哟个盒子</div>

    <div class="pink">我是哟个盒子</div>

    <div class="pink">我是哟个盒子</div>

    <div class="pink">我是哟个盒子</div>

    <!-- accesskey  设置快捷键 -->

    <form action="#">

        <input type="text" name="a" id="">

        <button accesskey="s">提交</button>

    </form>

    <!-- style -->

    <!-- data-*  自定义属性 -->

h5表单

    <form action="#">

        <input type="number">

        <input type="color">

        <input type="time">

        <button>tijiao</button>

    </form>

peach_TT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1+X Web前端.zip
10-10
1+X Web前端开发职业技能等级证书 2019年Web前端开发职业技能等级考试试题初级 中级 2019年Web前端开发职业技能等级考试试题高级 2019年Web前端开发职业技能等级考试试题真题 2019年Web前端开发职业技能等级考试...
Web前端开发初级样题一理+实.zip
11-15
【标题】"Web前端开发初级样题一理+实.zip" 涵盖了Web前端开发的初级理论和实践知识，是针对“1+x WEB前端开发初级考试”的备考资料。这个压缩包很可能是为了帮助初学者或者准备参加该级别认证考试的人员进行系统性...
【1+X Web前端等级考证 】| 最新Web前端开发中级实操
热门推荐
go
11-23 4万+
# 前言 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？ # 关于考不考 因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除.
【1+X Web前端等级考证 】 | Web前端开发中级理论 (附答案)
go
11-23 3万+
# 前言 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？ # 关于考不考 因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除.
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
go
11-18 1万+
目录试题一（30分）试题二（45分）试题三（15分）试题四（20分）实操考试答案评分细则 2020年下半年 Web前端开发中级 理论考试 考生姓名：——————————— 准考证号：—————————— 试题一（30分） 阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。 【说明】 这是一个响应式完成，用bootstrap4完成响应式轮播效果。 项目采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中
1+X Web前端等级考证 | Web前端开发中级12月最新模拟题 (5套包含理论&实操&答案)
go
11-14 1万+
前言： 今年是1+X 等级考试试点第二年，2020年1+X Web前端开发考试第一批在10月17号已经考了，今年的第二批将在12月进行… 下面是研究这方面的人给出的模拟题,考前做一做，考试不慌慌！根据前几批考的真题来看,有时候选择还会做到原题哦，链接放这里了，需要考的童鞋自取。哈哈哈,加油~ 链接：1+X Web前端开发中级12月最新模拟题 提取码：kb2p 总共5套，包括中级理论和实操题以及答案评分： 考前学习复习可看这里： 一. 1+X Web前端中级必考 | PHP 技术与应用 二. 1+X W
web前端发展历程
官方推荐
05-30 3万+
前言 目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，众多培训机构也将前端知识作为了主流课程，也有越来越多的同学加入到前端学习的行列中，作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。...
1+X Web前端证书中级备考攻略
l1727182921的博客
02-03 1万+
1+X Web前端证书中级备考攻略 前言 我参加的是2020年11月的考试，那次考的相对比较简单，取得了不错的成绩，这个证书毕竟刚出没多久，网上资料也不太多，本文就整理了一下考试前我收集到的学习资料和关于这个证书的一些考纲分析。 章末附上我整理的相关资料，包含以下内容 ，考试的内容不止这些，还有jQuery、BootStrap等，相对比较简单我考试的时候也没有单独去准备其他的内容，如果有需要的话可以留言，我会试着整理一下(bilibili大学都有) 1 考试内容的分析 以下数据来源于网络 核
Web前端开发概述
weixin_57813136的博客
09-04 1778
它拥有着独特的选择器、链式操作、事件处理机制和封装，以及完善的异步JavaScript和XML ( Asynchronous JavaScript and XML ，Ajax )，这些都是其他JavaScript库所望尘莫及的。Web（World Wide Web，全球广域网）是指一种基于互联网的信息系统，通过超文本链接将全球各地的文档、图像、视频等资源相互关联起来，并通过Web浏览器进行交互浏览和访问。它由协议、主机名、路径和可能的查询参数组成，可以通过浏览器访问和获取特定的资源。
web前端开发介绍
淘小欣的博客
03-02 1万+
前端内容介绍 一、什么是前端 应用软件组成：前端＋后端 后端负责处理业务逻辑＆提供数据，任何与用户直接打交道的操作界面都可以称之为前端，主要负责页面展示、与用户交互等等下面都是前端： 公司官网（在PC通过浏览器来访问公司网站） 移动端网页（在手机上来浏览公司信息、小游戏等） 移动端APP（例如：淘宝、去哪儿旅游、携程等） 微信小程序（微信最新推出的功能，随用随装，不占用手机空间）。 前端开发是从网页制作演变而来的。 早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。 随着互联网
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (模拟试题第四套) 附答案
go
11-21 9311
目录一、单选题（每小题2分，共30小题，共60分）二、多选题（每小题2分，共15小题，共30分）三、判断题（每小题2分，共5小题，共10分）理论考试答案评分细则 2020年下半年 Web前端开发中级 理论考试 考生姓名：——————————— 准考证号：—————————— （考试时间9:00-11:30 共150分钟） 本试卷共3道大题，满分100分。 请在指定位置作答。 一、单选题（每小题2分，共30小题，共60分） 1、javascript中，以下变量命名不正确的是（）
web前端基础知识
早睡早起长头发的博客
07-11 6856
一、网页、静态网页、动态网页 二、网页名词解释 三、Web标准 四、Web页面的组成
1+X Web前端开发例题 实操题2
04-30
内容为1+X Web前端开发例题 题目类型为实操题 包含11题(与我的其他资源有一二重复例题) 内容不含答案解析(答案可以来我的博客找喔，有题目分析 https://blog.csdn.net/weixin_53231455?spm=1011.2124.3001.5343 题目...
1+X Web前端开发例题 实操题1
03-30
内容为1+X Web前端开发例题 实操题6题 内容不含答案解析(答案可以来我的博客找喔，有题目分析 https://blog.csdn.net/weixin_53231455?spm=1019.2139.3001.5343 题目类型都是前端的知识点
WEB前端-案例汇总
11-08
在“WEB前端-案例汇总”这个资源包中，包含了丰富的前端开发实例，旨在帮助初学者逐步进阶，全面掌握前端开发的各项技能。这个资源大汇总几乎涵盖了前端开发的所有领域，对于想要深入学习和理解Web前端技术的人来说...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 340
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1128
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 644
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1599
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
web前端1+x中级实操题
12-16
Web前端是指构建在网页浏览器上的用户界面，通常由HTML、CSS和JavaScript等技术实现。对于1 x中级的web前端实操题，一些可能的题目包括： 1. 制作一个响应式网页布局，要求在不同设备上都能正确显示和排版，考察对于CSS的布局和响应式设计的掌握。 2. 使用JavaScript实现一个简单的交互效果，例如点击按钮弹出提示框、图片轮播、表单验证等，考察对于JavaScript基础知识的掌握和运用能力。 3. 对于一个给定的网页设计图，使用HTML和CSS实现网页的静态布局，要求布局准确、样式统一、符合设计要求，考察对于HTML和CSS的实际运用能力。 4. 结合Ajax技术实现一个简单的数据交互功能，比如从服务器获取数据并在网页上展示，考察对于Ajax和后端数据交互的基本理解和实现能力。 5. 使用前端框架（如Bootstrap、Vue、React等）完成一个小型应用，比如一个todo列表或者简单的网页功能，考察对于前端框架的使用和运用能力。 以上都是一些常见的1 x中级web前端实操题目，通过实际动手操作和编码实现，能帮助提升实际技能和解决问题的能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值