HTML学习week01

2023-10-14 13:10
文章标签 学习 html frontend week01

本文主要是介绍HTML学习week01，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

初识web

  • b (browser 浏览器) / s (server 服务器)

服务器就是与用户交互的,而浏览器可以跨平台开发,无需安装更新,与C/S(客户端)相反,但安全性有所欠缺.

  • 网页标准
    多个网页构成网站 网页是由结构(html),表现(css),行为(js)构成.

HTML

超文本标记语言 超文本 普通文本通过标记就可以变身 画面渲染->网页

本质 是一种组织信息的方式,通过超链接将不同空间的文字,图片等各种信息交织在一起,能从当前阅读的内容,跳转到超链接指向的内容.

对于标签(元素)理解:注重语义 而不是效果(可由css处理)

  • 第一行代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>First code</title>
</head><body><marquee>这是简单跑马灯</marquee>
</body></html>

  •  排版标签以及语义化标签

用特定的标签去表达特定的含义--有利于引擎优化 设备解析

 

  •    块级元素及行内元素 

 块级元素能写行内和块级元素,

行内元素只能写行内

但也有一些特殊规则 比如p不能写块级 h不能互相嵌套

  • 文本标签

 

1. 用于包裹：词汇、短语等。
2. 通常写在排版标签里面。
3. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。

 

其中 address blockquote是块级元素

语义感强的  h1~h6  p div strong em span

  • 图片标签
常见图片格式:png jpg base64(图片解码的第三种方式)

 

<!DOCTYPE html>
<html lang="ch-CN"><head><meta charset="UTF-8"><title>图片</title>
</head><body>
<img id="bg" src="C:\Users\李华昭\Pictures\cxk\背景.png" alt="图片">
<img id="p1" src="./Resource/王源.jpg" alt="图片">
<img id="im" src="https://pic1.zhimg.com/v2-d58ce10bf4e01f5086c604a9cfed29f3_r.jpg?source=1940ef5c" alt="网络图片">
</body></html>

 需注意 通过绝对标签 引用的图片 不一定能成功显示 因为不一定有对应的资源.

  • 超链接

 可以打开网页

        <!--a是一个 行内标签 但是它可以包裹快标签以及行内标签 但不能是一个 超链接--><a href="https://www.taobao.com/">
<img src="C:\Users\李华昭\Pictures\cxk\背景.png" alt="图片" width="600xp"></a><a href="https://www.jd.com/" target ="_blank">去秒杀</a><!--回车或空格出现空格了,实际是没有的--><a href="https://www.baidu.com/" >去百度</a><a href="./图片_.html">这里有个图片</a>

 打开文件

    <a href="./Resource/beijing.jpg">这里有个文件</a><!--无法打开时 将下载--><a href="Resource/2023-04-18 22-38-04.mkv">这里有个未知文件</a><!--强制下載--><a href="./Resource/beijing.jpg" download>下載文件</a><!--但不开启一个服务器 无法实现-->

作为描点

a href="#taikulka">太酷啦</a>
<a href="#capper">capper</a>
<a href="#wangyuan">禁烟大使</a>
<a href="#gege">练习生</a>
<a name="taikula"></a>
<!--两种实现方式--> 
<p>我是一个特别固执的人</p>
<img src="./Resource/xiaogui.jpg" width="100xp" >
<a name="capper"></a>
<p>雪</p>
<img src="./Resource/capper.jpg" width="100xp">
<p id="wangyuan">啊哈哈哈哈哈</p>
<img src="./Resource/王源.jpg"  width="100xp">
<p id="gege">哥哥</p>
<img src="./Resource/cxk.jpg" width="100xp">
<a href="./图片_.html#bg">看看其他页面的锚点</a>
<a href="javascript:alert(666);">点我有弹窗</a>
<p>这就是所有的阵容</p>
<!--比较特殊的 回到顶部 两种-->
<a href="#">再看一眼</a>
<a href="">刷新页面</a>

 超链接唤应用

  <a href="tel:10010">电话联系</a><a href="mailto:Lioxbb@outlook">邮件联系</a><a href="sms:10086">短信联系</a>

  •  列表 
        <!--有序列表--><h2>怎么写有序列表</h2><ol><li>写一个ol</li><li>写一些li</li><li>跑页面运行</li></ol><!-- 无序列表 --><h2>我想去旅游</h2><ul><li>广州</li><li>理塘</li><li><span> 深圳技术大学</span><ul><li>E0</li><li>篮球场</li><li>宿舍</li></ul></li></ul><!-- 自定义列表 --><h2>如何高效的学习？</h2>
<dl><dt>做好笔记</dt><dd>笔记是我们以后复习的一个抓手</dd><dd>笔记可以是电子版，也可以是纸质版</dd>  <dt>多加练习</dt><dd>只有敲出来的代码，才是自己的</dd><dt>别怕出错</dt><dd>错很正常，改正后并记住，就是经验</dd></dl>

 

 

  •  表格

 表格分为 标题 头部 主体和脚注

以及表格的跨行跨列

 下面设计一个课表

 <table border="1" cellspacing="0"><caption>课程表</caption><thead><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">活动与休息</th></tr></thead><tbody><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4">上午</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td rowspan="4">休息</td></tr><tr><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td></tr><tr><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td></tr><tr><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td></tr><tr><td rowspan="2">下午</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td rowspan="2">休息</td></tr><tr><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td></tr></tbody></table>

效果:

  •  表单

 表单的应用很常见 注册登录页面 提交信息 修改信息等等

基本结构就是由form加其他控件(单选框 复选框...构成)

提交表单后,通过键值对的方式传输获取数据(所以需要正确的key)

注意:须指明对应的action

 <form action="https://www.baidu.com/s" target="_blank" method="get"><input type="text" name="wd"><button>去百度搜索</button></form>

点击搜索 会跳转到百度 百度会返回搜索结果

需注意 不同的网站的申请码不同 需要正确的name属性值

 

下面的表单的常见控件:

  1. 文本输入框
  2. 密码输入框
  3. 复选框
  4. 隐藏域
  5. 按钮
  6. 单选

代码实现:

  <!-- 文本输入框 --><form><input type="text"></form><!-- 密码输入框  disabled 变成不可编辑--><form><input type="password" disabled></form><!--单选框 checked 默认选中 value代表提交的内容--><form><input type="radio" name="sex" value="female"> 女<input type="radio" name="sex" value="male" checked> 男</form><!-- 复选框 --><form><input type="checkbox" name="hobby" value="唱">唱<input type="checkbox" name="hobby" value="跳">跳<input type="checkbox" name="hobby" value="rap">rap</form><!-- 隐藏域 --><form><input type="hidden" name="tag" value="default"></form><!-- 提交按钮 两种实现方式--><form><input type="submit" value="提交"><button type="submit">提交</button></form><!-- 重置按钮 两种实现方式--><form><input type="reset" value="重置按钮"><button type="reset">重置</button></form><!-- 普通按钮 两种实现方式--><form><input type="button" value="按钮"><button type="button">按钮</button></form><form><textarea name="msg" rows="12" cols="23">我是文本域</textarea></form><form><select name="from"><option value="黑">黑龙江</option><option value="辽">辽宁</option><option value="吉">吉林</option><option value="粤" selected>广东</option></select></form>

 效果:

 

还有 可以利用labei获取控件焦点

两种实现方式:

   <form><label for="account">account:</label><input id="account"type="text" name="ac"><label>password:<input type="password" ></label></form>

当你点击password 光标自动对准输入框

总结:

  • iframe框架

这可不是vue那些框架  它的相当于一种嵌入  在网页上嵌入一些文件

它的作用一般有:

1. 在网页中嵌入广告
2. 与超链接或表单的 target 配合，展示不同的内容
代码演示: 
   <!-- 利用iframe嵌入一个普通网页 --><iframe src="https://www.taobao.com" width="300" height="300" frameborder="0"></iframe> <!-- 利用iframe嵌入一个广告网页  --><iframe width="300" height="250" src="https://pos.baidu.com/xchm?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=2619619085&s2=735691552&dri=1&dis=0&dai=24&ps=2557x1059&enu=encoding&exps=110283,110277,110273,110261,110254,110011&ant=0&psi=ec321235870ce038&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1675046784135&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0129&dbv=2&drs=4&pcs=1519x763&pss=1519x11348&cfv=0&cpl=5&chi=2&cce=true&cec=UTF-8&tlm=1675046701&prot=2&rw=763&ltu=https%3A%2F%2Fnews.163.com%2F&ecd=1&fpt=TSqlzRKQUoc9+DbwoBg+b3cB10ATMyxUj3wjiV0jemwIVBo7z2ECouhUiVZq9IXN5cuofEzg/QDLSl5smhScYpTN+HQc3+QhnKv3H8MhzCYvAEcKDXAQAxK1FTXUdEd7J70MlzGWjb5DY6rlVbwmYbud1lCLmHxH5enja3K/dBHQzpLvsZCQqnanh/vBkkBTauX5z2jCEQvudlFgU1sHGA2kmnPoF0fHQA756T+sNKjATCqWL62CuVSrPm52Es2xtwueTF6sREr61IdA4wcZwEObe67hCIHPeGk5UX48Fw06RMTjgGDr6oQhyEpAeW3u9Gi0qHTYg8wBI1yoBmmwhuh0MpxtrJcLm0tGY4ODYGriOVhYwo/vU1cGOPrxvZG39yCve9+xcc7sVW4DBkCezA==|2UoaY428DIL/VGPLaRon4l5i5WbAevIWwjj0W0sj4LU=|10|d42cad75cac5486feb0f88674f9a220a&dft=0&uc=1536x834&pis=-1x-1&sr=1536x864&tcn=1675046784&qn=75c4f389da0f062c&ft=1" frameborder="0"></iframe> --><!-- 利用iframe嵌入其他内容 --><iframe src="../../HTML/Resource/cxk.jpg" frameborder="0"width=500 height="500"></iframe><!-- 与超链接的target属性配合使用 --><a href="https://www.toutiao.com" target="container">点我看新闻</a><a href="https://www.taobao.com" target="container">点我看淘宝</a><br>与表单的target属性配合使用<form action="https://so.toutiao.com/search" target="container"><input type="text" name="keyword"><input type="submit" value="搜索"></form><iframe name="container" frameborder="0" width="900" height="300"></iframe>

效果:

 

  • htm字符实体

我的理解 相当于ascii码表  只不过多了一个&

字符实体 由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一
个分号 ; 
常用的:

 

  • meta 元信息

 在vsc上 使用快捷键!+enter 快速生成一个页签 可以看到 :

 有几行的meta 标签

其实它是关于网页的基本设置

其中charset是编码设置

而 <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >

是对ie浏览器的优化兼容

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
是对移动端的设置
此外 还有很多

 结束语

上面是对html4大致的学习  由于时间 以及这是我第一次写博客文章 还有很多知识点没有展示,很多细节而没有处理. 但是我会坚持下去 从这里启航,探索web

参考文档:MDN： developer.mozilla.org 

这篇关于HTML学习week01的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/210708。

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...
详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2