HTML初学第一周

已于 2022-10-26 21:15:53 修改
阅读量1k 收藏
点赞数
文章标签： html css 前端
于 2022-10-21 11:32:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjy0914kid5910/article/details/127328525
版权

​

一、HTML、CSS系列之导学

1. 拨云见日

  • HTML、CSS→基础
  • 切图流程→传统切图，智能切图，公司流行切图方式
  • 实战阶段：PC企业站布局 PC游戏站布局

2、溯本求源

  • 扩展HTML与扩展CSS
  • HTML5新语法 CSS3新语法
  • 不同浏览器的兼容与hack（解决方案）

3、风生水起

  • 布局：弹性布局、网格布局、移动端布局
  • 响应式布局（基于）→Bootstrap

4、巧夺天工

  • 预编译CSS
  • postcss
  • CSS架构
  • 高级功能
  • CSS与JS交互

二、什么是HTML、CSS

是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。

例（以淘宝源代码为例）：
在这里插入图片描述

上为HTML代码

下为CSS代码（包含后面一大串，在<style>与</style>里的）

在这里插入图片描述

  • 每一个网页→ .html文件
  • 每一个内容→ .mp4 文件

如何创建文件：

  1. 先新建一个文本文档（.txt文件）
  2. 重命名为.html:
    在这里插入图片描述
  • hello world演示：
    在这里插入图片描述
    在这里插入图片描述

​在这里插入图片描述

三、VSCode编辑器

  • 安装插件：语言包，open/view in browser
  • 编辑器的基本使用：
  1. 保存：
    在这里插入图片描述↑未保存状态
    在这里插入图片描述↑保存状态
    快捷键：
  • ctrl+s：保存
  • ctrl +a：全选
  • ctrl+x/ctrl+c/ctrl+v：剪切、复制、粘贴
  • ctrl+z/ctrl+y：撤销、前进
  • shift+end：从头选中一行
  • shift+home：从尾部选中一行
  • shift+alt+↓：快速复制一行
  • alt+↑或↓：快速移动一行
  • tab：向后缩进
  • tab+shift：向前缩进
  • alt+鼠标左键：多光标
  • ctrl+d：选择相同元素的下一个

四、深入了解网站开发

  • UI设计师：设计稿
  • web前端开发工程师(H5开发)
    设计稿→代码
    数据库里的数据→显示到页面
    HTML+CSS
    HTML：结构
    CSS：样式
    JavaScript：行为
  • web后端开发工程师

五web核心三剑客

HTML
CSS
JavaScript
视频中演示代码：


<style>
    div{ color:red; font-style:italic; }
</style>

<div>HTML+CSS系列教程</div>


<script>

let div = document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover = function(){
    timer = setInterval(()=>{
        if(flag){
            div.style.color = 'blue';
            div.style.fontStyle = 'normal';
        }
        else{
            div.style.color = 'red';
            div.style.fontStyle = 'italic';
        }
        flag = !flag;
    },500);
};
div.onmouseout = function(){
    clearInterval(timer);
};

</script>

演示成果：

HTML代码成果

六、HTML基本结构和属性

  • HTML：超文本 标记 语言
    超文本：文本内容+非文本内容（图片、视频、音频等）
    标记：<单词>
    语言：编程语言
    标记也叫做标签：
<header>
<footer>

写法分成两种：
单标签：<header>
双标签：<header></header>

创建标签的快捷键：单词+tab键→<单词>
标签是可以上下排列，也可以组合嵌套。
在这里插入图片描述
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”>
视频中演示代码：

<header title="hello">hello world</header>

<footer title="hi">hi HTML</footer>

七、HTML初始代码

快捷键：！+tab键

<!DOCTYPE html>

文档声明：告诉浏览器这是一个html文件

<html lang="en">

html文件的最外层标签：包裹着所有html标签代码

<meta charset="UTF-8">

元信息：是编写网页中的一些赋值信息

  • HTML注释：<!--注释的内容-->在浏览器中看不到。只能在代码中看到注释的内容
    意义：
  1. 把暂时不用的代码注释起来，方便以后使用。
  2. 对研发人员进行提示
  • 快捷添加注释与删除注释：
  1. ctrl+/
  2. shift+alt+a

八、HTML语义化

指根据网页中内容和的结构，选择适合的HTML标签进行编写
好处：

  1. 在没有CSS的情况下，页面也能呈现出很好的内容结构
  2. 有利于SEO，让搜索引擎爬虫更好的理解网页
  3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）
  4. 便于团队开发与维护

九、标题与段落

标题→双标签：<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签
h5,h6标签在网页中不经常使用
段落→双标签：<p></p>

  • 文本修饰标签
    强调→双标签：<strong></strong>或<em></em>会对文本进行加粗或斜体
    下标：<sub></sub>
    上标：<sup></sup>
    例如：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
    删除：<del></del>
    插入：<ins></ins>

  • 图片标签与图片属性<img>(单标签）
    引入图片的地址：<src>
    当图片出现问题的时候，可以显示一段有好的文字：<alt>(优先级比src低）
    提示信息：<title>
    控制图片大小：<width> <height>（可固定空间）

十、引入文件的地址路径

  • 相对路径：
    . 在路径中表示当前路径
    … 在路径中表示上一级路径
  • 绝对路径：
    例如：http://cms-bucket.ws.126.net/2019/04/16/7a5b31e0ce5474a7515.jpeg

图例：在这里插入图片描述
注意：除网页地址外，引入时斜线和反斜线都可，但还是尽量避免写反斜线

十一、跳转链接、跳转锚点、特殊符号

1.跳转链接

链接标签：
a→双标签 <a></a>
href属性：链接的地址
图例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com"target="_blank">访问百度</a>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com"target="_blank">访问百度
    <a href="http://www.qfedu.com">
        <img src="./22270319尉轩.jpg">
    </a>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开： _self 新窗口打开： _blank
代码：<a href="http://www.baidu.com"target="_blank">访问百度

<base>标签：改变<a>标签的一个行为

视频中小练习：在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./html/list.html">列表页</a>
    <img src="./images/QQ图片20220512200011.png"alt="">
</body>
</html>

list:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./detail.html">详情页</a>
    <img src="../images/QQ图片20220512200023.png"alt="">
</body>
</html>

detail:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="../index.html">返回首页</a>
    <img src="../images/QQ图片20220512200033.jpg"alt="">
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.跳转锚点

  • 实现一：#号+id属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#JavaScript">JavaScript</a>
    
    <h2 id="html">HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="JavaScript">JS脚本</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p> -->
    
    
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#JavaScript">JavaScript</a>
    
    <a name="html"></a>
    <h2>HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="JavaScript"></a>
    <h2>JS脚本</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>

</body>
</html>

在这里插入图片描述
刷新页面，三个按键点击后，自动跳转到对应位置

  • 实现二：#号+name属性
    <a name="html"></a>

3.特殊符号

  • 特殊字符 —— 含义 —— 特殊字符代码
                空格符         &nbsp;
       ©         版权          &copy;
               注册商标         &reg;
       <        小于号          &lt;
       >        大于号          &gt;
       &         和号           &amp;
       ￥       人民币          &yen;
       ℃       摄氏度          &deg;

十二、无序列表、有序列表、定义列表、嵌套列表

1.无序列表

  • <ul>、<li>：列表的最外层容器、列表项
    注：ul和li必须是组合出现的，他们之间是不能有其它标签的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 正确的写法
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul> -->
    
   <!-- 错误的写法 
    <ul>
        <p>
            <li>第一项</li>
        </p>
    </ul> -->
  </body>
  </html>  ```


- type属性：改变前面标记的样式（一般都是用CSS去控制）

正确的写法
    <ul type="circle">
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    ```
## 2.有序列表
- `<ol>、<li>`：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
- 同样有type属性
## 3.定义列表
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

4.嵌套列表

列表之间可以互相嵌套形成多层级列表

ヰ世界情緒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Horiseon:第一周HTML和CSS分配
04-04
在"Horiseon:第一周HTML和CSS分配"中，我们关注的是网页开发的基础部分，主要涉及HTML（超文本标记语言）和CSS（层叠样式表）。这些是创建任何网页内容的基本工具，允许我们将结构与样式分离，使网页设计更加灵活...
html 单击选择一行,html – 仅选择带有css的表中的第一行
weixin_35853083的博客
06-03 387
我在HTML页面中有很多表,其中一些只使用tr&其他人正在使用他们所能做的一切：thead,tbody,tfoot,tr,th& TD.因为一些问题我们使用CSS规则来制作表格的左上边框和每个td都有自己的右边框和下边框.因为这个特殊的东西,我们需要在所有四个角落中获得td并围绕它们的特定角落.如何才能执行只能选择表中第一行的单个规则？到目前为止,我正在使用此规则：table.un...
html中自动选中行,Layui中使用table组件时让某些行的checkbox自动选中
最新发布
weixin_40362806的博客
11-23 835
在使用layui框架时，数据表格是经常使用的一个组件，一般在表格的左侧会有checkbox可以用来勾选当前行的数据，但是checkbox一般是由用户自己手动勾选的，那遇到需要自动勾选的情况怎么办呢？如果使用dom操作来控制checkbox选中是没有问题的，但是在使用layui的api方法时会获取不到此条被选中的数据，解决该问题的方法有两个。修改数据方法在表格的json数据中设置。
JS(javascript)入门：html表格怎么实现鼠标移动到某一行上有被选中效果，js怎么实现复选框全选和取消全选的效果？
Cone0212的博客
04-14 951
表格选中一行效果，全选与取消全选效果 for循环应用 function函数应用 鼠标经过（onmousever）和鼠标离开（onmouseout）应用 最终效果展示 css部分 <style> table { width: 500px; text-align: center; font-si...
html 选中状态,html默认选中状态
weixin_42193786的博客
05-30 5841
html中标签用法解析及如何设置selec标签定义和用法 select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name 属性。 标签可选的属性 属性 值 描述 disablehtml中单选按钮控件标签用法解析及如单选1单选2单选3单选4/**注意：name值一定要相同才能够单选...
HTML基础知识3
qq_51637289的博客
11-10 319
HTML基础知识3
第一周
02-14
作为初学者，"第一周"的学习内容很可能是HTML的基本概念、语法结构以及实际应用。接下来，我们将深入探讨HTML的相关知识点。 HTML是一种标记语言，它的主要任务是在网页中定义文本、图像和其他元素的结构和样式。...
第1周
02-17
在"第1周"的学习中，我们将会深入探讨HTML的基本结构、元素和属性，为今后的网页开发打下坚实的基础。 HTML是由一系列的元素组成的，每个元素都有其特定的用途。例如，`<html>`元素是所有页面的根元素，它包裹着...
html 单击选择一行,在html中点击一行
weixin_39632327的博客
06-03 540
您可以在下面尝试此解决方案。修改强>请务必在标题部分中添加此引用的修改将js代码放在一个文件中，并在正文关闭之前将其放在页面底部。进入标题N°TitreDate{% for key, rech in recherche %}{{ loop.index }}{{ rech.titre | raw }}{{ rech.date | date('Y-m-d') |raw }}{% endfor %...
html表格选中行事件,bootstrap table onCheck选中行事件
weixin_39625468的博客
06-05 2937
bootstrap table onCheck选中行事件当bootstrap table开启选择列时用户点击复选框而产生的事件，onCheck事件返回选择行的数据和被点击的元素对象。onCheck选中行事件点击复选框的事件注意这里是选择的事件，取消选中的事件是onUncheck，返回参数如下。参数名称说明row选中行的数据对象json格式如{id:1,playe:true}$element被点击的...
html 单击选择一行,从html表中选择一行，并在单击按钮时发送值
weixin_32467421的博客
06-03 518
我有HTML表，我需要在其中选择一行并将其第一个单元格ID发送给一个按钮，onclick而按钮的其中一个将所选值发送给Javascript函数。我该如何实现？test.html ：1 Ferrari F1381 000€1 200€2 Ferrari F1381 000€1 200€3 Ferrari F1381 000€1 200€test.js ：var table = document.ge...
html表格选中行事件,单击选中GridView 或 HTML 表格的某行，并获取该行的数据。。。。...
weixin_39843677的博客
06-05 520
首先绑定行单击事件，如下：也可以用Jquery的.click进行事件绑定protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){if (e.Row.RowType == DataControlRowType.DataRow){e.Row.Attributes.Add("onClick", "javas...
[HTML]table选中行效果
热门推荐
我是涛锅
05-04 1万+
比如是这样一个结构的table<table id="tUsers"> <thead> <tr> <td>序号</td> <td>帐号</td> <td>密码</td> </tr> </thead> <tbody> <tr> <td>1
jquery点击tr整行选中
Relievedsir的博客
03-08 462
css: table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 500px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} .yanse{ background-color: #848484; -webkit-transition-p
html表格选中行事件,bootstrap 给table 增加这一行的点击事件,如图,点击某一行时我想触发一个方法?...
weixin_42165018的博客
06-05 385
$table.bootstrapTable({//url:'json/dev.json',data:wcssdata,toolbar:'#toolbar',//工具按钮用哪个容器//striped:true,//是否显示行间隔色cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)pagination:true,//是否显示分页sor...
html表格点击某一行后变色,elementui点击table每一行会变色，当有固定列的时候，...
weixin_35687571的博客
06-20 533
1. html代码@row-click="rowClick":row-class-name="tableRowClassName":row-style="selectedHighlight"2. js代码// 解决当表格有固定列，点击，鼠标悬浮的时候行会变色的问题tableRowClassName({ row, rowIndex }) {//把每一行的索引放进rowrow.index = rowI...
获取html的table行
jszj的专栏
06-24 2589
有如下表格： <table id="tbLabelList" width="100%" cellpadding="0" cellspacing="0" border="1"> <tr><td>11</td><td>12</td><td>13</td></tr> <tr><td>21</td><td>22</td><td>23&
html中的各类选择器
Samsung.的博客
07-10 864
nth-child(n)与nth-of-child(n)有不同的用法。nth-child(n) 先排序后查找目标元素。nth-of-child 先查找目标元素后排序。标签选择器:一次性把页面所有一类的标签选择出来。类选择器:选择同一类,class为全局属性。id选择器:身份证号码,每个网页里不能重复。逗号选择器:把多个元素选择出来相叠加。通配符选择器:选中所有标签。子代选择器:选择亲儿子。
HTML表格区域选中列选中-Vue & ElementUI
季秀的博客
10-07 2612
HTML 元素（主要是文本）能否被选中，是由 user-select css 属性控制的，若设置为 none 则不可选中，更多属性值参考 MDN. HTML 页面的默认选中方式是行选择模式，即鼠标从按下到释放中间经过的所有行都会被选中。若要实现列选中模式或是任意选中模式，基本思路是：将表格所有单元格设置为不可选中，在鼠标经过时，将对应的单元格设置可选中，即可实现任意选择的模式。 以上思路有几点需要注意的： 浏览器适配：完整的设置不可选中的样式为: -webkit-user-select: none; -m
HTML基础教程：超文本标记语言入门
在本次第六周实训中，我们将专注于HTML入门学习，这是一项基础但至关重要的技能，对于任何想要涉足网页设计和开发的人来说都是必不可少的。HTML，全称为HyperText Markup Language，是一种超文本标记语言，用于描述...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值