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。

相关文章

Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Java进阶学习之如何开启远程调式

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,：本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2