HTML学习week01

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量177 收藏
点赞数 1
分类专栏： html 文章标签： html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73800442/article/details/130448066
版权

初识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 

21cv
关注
专栏目录
html显示ftp资料,获取FTP信息及使用方法
weixin_29189381的博客
06-27 1189
网站文件上传，权限修改，删除等操作都需要通过 FTP 工具才能够实现。那么，什么是 FTP ?如何获取 FTP 信息？ FTP 工具怎么使用？FTP(FileTransferProtocol)，是文件传输协议的简称。用于 Internet 上的控制文件的双向传输。FTP 的主要作用，就是让用户连接上一个远程计算机(这些计算机上运行着FTP服务器程序)察看远程计算机有哪些文件，然后把文件从远程计...
VS code-HTML与CSS基础学习与运用Week02
2301_80216014的博客
12-14 1415
CSS指的是层叠样式表（Cascading Style Sheets），是一种表现HTML或XML等文件样式的计算机语言，可以静态修饰网页和脚本语言，动态地对网页各元素进行格式化，还能够对网页中元素位置的排版进行像素级精确控制，具有丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等特点。简单来说，就是只改变网页的静态表现。CSS规则集（rule-set）由选择器和声明块组成：p {color:red;
前端学习week9
weixin_74078488的博客
02-03 1078
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage和localStorage约5M左右正则表达式是用于匹配字符串中正负组合的模式。在JavaScript中，正则表达式也是对象，通常用来查找、替换哪些符合正则表达式的文本作用：表单验证、过滤敏感词、字符串中提取我们想要的部分const 变量名 = /表达式/其中/ /是正则表达式字面量基于VueCli自定义创建项目架子安装脚手架创建项目。
HTML学习笔记
橘颂的博客
07-10 1716
学习笔记
前端学习week8
weixin_74078488的博客
01-28 1041
标准属性：标签自带的属性，比如class、id、title，可以世界使用点语法操作比如disabled、checked、selected正在html5中推出来的专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取node.js是一个基于Chrome V8引擎的JavaScript运行环境浏览器是JavaScript的前端运行环境node.js是JavaScript的后端运行环境inserted会在指令所在的元素，被插入到页面中时触发。
Html、CSS 学习 5.0
O_osange的博客
11-24 1682
web学习 5.0
Web安全学习 Week1
m0_59271033的博客
01-12 2613
Web新手安全入门Week1
英专文科生转码 12月学习计划 Week01
Uyue_的博客
12-05 120
自学转码计划
HTML5的学习总结
JavaAlliance
05-21 3079
HTML5的学习总结 一、什么是HTML5？ 1.支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力 2.HTML5的设计...
HTML&CSS 学习笔记
王珂的专栏
04-22 1965
HTML5 CSS3 定位 布局
基于Java与HTML的微课week设计源码学习教程
09-27
本项目是一款基于Java和HTML的微课week设计源码，包含了109个文件，其中Java源文件99个，XML配置文件5个，属性文件3个，HTML文件2个。该源码旨在实现微课week的功能，适用于学习和研究微课week的设计与实现。
CurwickACSC435Week01
03-15
在HTML学习的初期，你可能会接触到以下几个关键知识点： 1. **HTML基本结构**：HTML文档通常由`<!DOCTYPE html>`声明开始，定义文档类型，接着是`<html>`元素，它是整个文档的根元素。在`<html>`内部，有两个重要的...
week1:网络学习
03-20
在“week1:网络学习”这个主题中，我们聚焦于HTML（HyperText Markup Language），这是一种用于创建网页的标准标记语言。HTML是互联网的基础，它允许开发者构建结构化的文档，这些文档可以被浏览器解释并呈现为用户...
robot-framework-week:用于学习目的的存储库
03-10
"robot-framework-week:用于学习目的的存储库" 这个标题表明了这是一个专注于Robot Framework的学习资源库，特别关注于一周的学习计划或课程。Robot Framework是一个开源自动化测试框架，它允许用户使用自定义的...
Week1Taller01_BICTIADesarrolloWeb
02-17
【标题】"Week1Taller01_BICTIADesarrolloWeb" 指的是一项针对BICTI（可能是某个教育机构或课程）第一周的Web开发练习。这个练习可能是一个学习项目，目的是让学生们在Web开发的初期阶段建立起基础。 【描述】描述...
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 116
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1947
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 847
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 691
【代码】Html编写发射粒子爱心。
HTML5中文学习教程：从入门到精通
HTML5引入了更多类型的input元素，如color、date、datetime-local、email、month、number、range、search、tel、url和week，这些新类型的输入控件为表单数据的输入提供了更好的用户体验和验证功能。 HTML5表单元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值