coderwhy - html基础HTML（超文本标记语言——HyperText Markup Language）是构成

1 html基础

01 html是超文本标记语言

是构建网页的基石由无数个标记组成不属于编程语言

标记语言

由无数个标签组成

对某些内容进行特殊的标记

由标签和内容组成的部分称为元素

02 什么是超文本

不仅仅可以插入文本还可以有视频图片链接

html的后缀名.html .htm 现在统一使用.html

html文件的结构

 <html>
 
 <head>写入元数据 描述数据的数据 title</head>
 
 <body>
 
 然后写入各种标签
 
 </body>
 
 </html>

2 Vscode的安装和插件

01 安装插件

Chinese中文化插件颜色主题 atom one dark 文件夹图标：great icon
open in browser 直接打开网页缺点没有实时刷新网页
live server 自动刷新网页内容用一个服务器给你搭建进行打开
auto rename 自动修改后边闭合的tag

3 各种html元素

01 元素分类

元素可以包含其他的元素
不区分大小写但是一般小写
开始标签和结束标签
还有单标签

02 元素的属性

属性名称=“属性值属性值” 多个属性值之间用空格进行分割

 <p class="demo"></p> class就是类属性 一般不会被展示出来
 <a href=""></a>

03 属性的分类

公共属性：class id title属性
特有的属性 img的alt a的href

04 元素的嵌套

元素与元素之间的关系
父子关系 ul和li
兄弟关系 div与div

05 元素嵌套的快捷键

alt+shift+向下可以快速复制多个元素
ctrl + Alt + 向下同时选中多列
按住alt， 用鼠标左键点击，可以出现多个光标，输入的代码可以在光标处同时增加。

  <div>
         <span></span>
     </div>

06 css的注释

对代码进行解释说明和结构之间的划分能够方便清晰的说明代码提升开发的效率
快捷键 crtl + /

07 html常见的元素

一个完整html包含文档声明 !DOCTYPE html 表示html5 lang属性 html设置的语言确定语言的发音翻译规则进行翻译
lang = "zh-CN"中文 lang="en"英文
html称为根元素所有别的元素都是他的后代元素
head元素可以设置网页的字符让浏览器更加精准设置每个字符不设置可能导致字符编码
各种字符在电脑存储要进行编码成01010 然后在浏览器显示要进行解码然后在界面上进行显示
h1-h6 字体不一样 margin外边距不一样 css样式不一样 h1级别最高 h6级别最低
p 段落的意思多个段落之间存在一定的间距
img 单标签元素 src引入图片资源 alt属性表示鼠标放置的文字可替换元素用另一种资源进行替换

08 路径

绝对路径：从根盘符开始查找一直找到这个资源 D://://这样的
相对路径：相对于自己进行查找某一资源 ../两个点上一层文件夹 ./当前文件一个点
部署资源的时候用户浏览图片的时候这个地址会指向服务器地址图片打包会自动进行更改
绝对路径一般用不上

09 a元素的使用

a 在网页中需要跳转到另外一个链接定义超链接打开一个新的url
常见属性 href引入url地址 target在哪个窗口进行打开 _self当前窗口 _blank新窗口
a元素锚点链接的重要步骤

   <a href="#theme01">主题一</a>
     <a href="#theme02">主题二</a>
     <a href="#theme03">主题三</a>

a元素与img元素进行结合

 <a href="http://www.baidu.com" target="_blank">
         <img src="./bili.webp" alt="">
     </a>

a元素的其他的url地址本地链接远程链接(实际也在请求html页面)
指向zip压缩包文件进行下载
指向其他的协议地址 mailto:123@qq.com
iframe元素利用iframe
- frameborder：属性值有0和1显示边框和不显示边框

_parent 在父元素中打开窗口 a元素在iframe

_top 多级嵌套的使用

 <iframe src="www.taobao.com" target="_blank" frameborder="0">11</iframe>

在Network可以进行查看请求

在响应头已经禁止掉要求同源才可以请求

10 常用元素

div元素divsion分开分配的意思
span元素跨域涵盖的意思
html刚开始只有最基本的元素慢慢才发展到(div span strong i元素) 添加各种包含样式的元素
之后流行div/span+css 目前的状态元素语义化
我们的页面可以没有div或者span
div与span元素之间的区别 (都是为纯粹的盒子容器)
div一般作为父元素独占一行
span一般为同一行显示

11 不常用元素

strong 内容加粗强调
i元素斜体
code元素显示代码的
br 元素换行

12 html全局属性

id
class
style
title

4 额外知识补充

01 url 与其他

字符实体以&开始以;结尾
或者不可见的符号 < lt >gt 空格nbsp
编写的html代码都会被浏览器解析
url 代表资源统一定位符(动词)(网络地址网络门牌号) url有标准的其他的也可以查找到的但是没有这个标准
url就是一个给定的资源地址可以是html页面图片 css文件音频视频
url的标准格式 [协议类型]://[服务器地址]:[端口号]/

和Uri的区别统一资源标识符用于标识技术使用的逻辑或者物理资源(名词)
Url是uri的子集 uri不一定是url

02 元素语义化

用正确的元素做正确的事情元素本身没有区别所有的html都能实现相同的事情 (但是不要只用div) 只是浏览器(user agent)默认加了样式
好处:方便代码的维护增强代码阅读性有利于SEO优化
SEO优化(爬虫原理) 搜索引擎优化(提高网站排名) 整个网站的数据 (拿到数据存到数据库中)
字符编码 encode (指定标准将0 1 转化为字符) 字符解码 UFT-8现在用的多
计算机可以直接存储和处理二进制的数字(计算机思维)
人的思维(编程语言)

03 html高级元素

列表元素：网页开发过程中很多数据都是以列表的形式存在的

列表的实现方案

采用div来编写(传统列表有很多限制 ul ol li)

采用列表元素编写(有默认的css样式)

常见列表 (一般不用自己的默认样式对样式进行清除)

有序列表 ol li(order list) 一般ol只能放li(list item) 默认有边距和序号
无序列表 ul li ul的直接子元素是li
定义列表 dl 直接子元素dt(team) dd(define description) (definition list)

列表练习
表格元素
表格合并

表单元素
- 表单常见属性

 <style>
      body,h4,ul,li,a,span,p {
         margin:0;
         padding:0;
         
      }
      h4 {
         font-size: 20px;
         font-weight: 500;
      }
      ul >li {
         list-style: none;
         margin-top:14px;
      }
      ul li a span {
         display: inline-block;
         width: 16px;
         height: 16px;
         line-height: 16px;
         text-align: center;
         margin-right:8px;
         font-size: 18px;
         /* color:#999; */
      }
      ul li a span.one {
         color:red;
      }
      ul li a span.two {
         color:purple;
      }
      ul li a span.three {
         color:orange;
      }
      ul li a p {
         display: inline-block;
         /* color:black; */
         font-weight: 500;
         font-size: 17px;
      }
      ul li a .icon {
         position:relative;
         top:2px;
         left:2px;
         display: inline-block;
         width: 16px;
         height: 16px;
         background-image: url(./hot.svg);
      }
       a {
         display: inline-block;
         text-decoration:none;
      }
     ul li a:hover {
         color:red;
         
     }
     </style>
 </head>
 <body>
     <h4>头条热榜</h4>
     <ul>
         <li><a href="#"><span class="one">1</span><p>习近平向2023年浦江创新论坛致贺信</p><i class="icon"></i></a></li>
         <li><a href="#"><span class="two">2</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         <li><a href="#"><span class="three">3</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         <li><a href="#"><span>4</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         <li><a href="#"><span>5</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         <li><a href="#"><span>6</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         <li><a href="#"><span>7</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         <li><a href="#"><span>8</span><p>习近平向2023年浦江创新论坛致贺信</p></a></li>
         
     </ul>
 </body>

先整体再局部
从上往下从外往里
去除重复的代码

color是一个继承属性给自己设置颜色优先使用自己的和权重没有关系(文字类型都有继承性)

04 表格元素的认识和介绍

认识表格元素 (表格有相关属性设置表格的样式但是已经不推荐了) 不用使用了

table(表格)
tr(table row) 行
td(table data) 行中的单元格

1.表格练习

最外层table 几行tr 里边放td (应该给td加border)
去除td之间的间隙
边框折叠 border-collapse:collapse(这个属性要加在table上)

  <style>
       table {
          border-collapse:collapse;
       }
       td {
          text-align: center;
          border:1px solid #ccc;
          
       }
    </style>
 </head>
 <body>
    <table>
       <tr>
          <td>排名</td>
          <td>学号</td>
          <td>性别</td>
          <td>名字</td>
       </tr>
       <tr>
          <td>1</td>
          <td>01</td>
          <td>男</td>
          <td>张三</td>
       </tr>
       <tr>
          <td>2</td>
          <td>02</td>
          <td>女</td>
          <td>李四</td>
       </tr>
       <tr>
          <td>3</td>
          <td>03</td>
          <td>男</td>
          <td>王五</td>
       </tr>
    </table>

05 表格的其他元素

头部元素语义化效果明显有增加了th 身体 caption 元素是表格的正中介绍

跨列合并：使用colspan属性

跨行合并:使用 rowspan属性

确定是谁需要跨
跨行还是跨列
跨几行或者几列

合并练习

<style>
      table {
         border-collapse: collapse;
         text-align: center;
      }
      th,td {
         padding:10px 20px;
         border:3px solid black;
      }
   </style>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th colspan="6">课程表</th>
            
         </tr>
         <tr>
            <td></td>
            <td>星期一</td>
            <td>星期一</td>
            <td>星期一</td>
            <td>星期一</td>
            <td>星期一</td>
         </tr>
         <tr>
            <td rowspan="4">上午</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td rowspan="4">下午</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td rowspan="2">晚自习</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
         <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            
         </tr>
      </thead>
   </table>

06 认识表单元素

是和用户重要的交互方式之一很多网站都需要表单

常见的表单元素
form表单一般情况其他的都是他的后代元素
input 文本输入框 (是行内替换元素)
属性非常多：text password time date radio file reset submit
readonly 只读 disabled 禁用掉 checked默认被选中 (当radio与checkbox时可以使用)
布尔属性可以没有属性值属性值就是属性名本身

按钮(常见的三种按钮)
会将form表单(或者其他表单)中的内容进行重置
会将内容提交给服务器
button按钮也有type类型 reset或者submit
input和label之间的关系
label 表单元素的标题(label文字可以和某个input绑定点击文字激活对应的input变成选中状态)
用for属性值与id属性值一一对应就是绑定在一起

 <div><label for="user">用户名:<input id="user" type="text"></label></div>
 <div><label for="password">密码:<input id="password" type="text"></label></div>

radio的使用(单选框) (label可以在单选框选中)

<label for="man">男:<input type="radio" name="" id="man"></label>

单选框应该存在互斥原则 radio中name一样就可以互斥

向服务器传的时候 url可以识别到key=value 所以属性应该加上name="" value="male" 具体传过去的值

<label for="man">男:<input type="radio" name="sex" id="man"></label>
<label for="man">女:<input type="radio" name="sex" id="man"></label>

checkbox多选框的使用

<form action="/cba">
   <div>
      <label for="lanqiu">
         篮球<input type="checkbox" name="hobby" value="lanqiu" id="lanqiu">
     </label>
     <label for="zuqiu">
        足球<input type="checkbox" name="hobby" value="zuqiu" id="zuqiu">
    </label>
   </div>
   <input type="submit">
</form>

textarea

resize:none可以禁止文本输入框拉伸

  <form action="">
      <label for="desc">
         <textarea name="" id="desc" cols="30" rows="10"></textarea>
      </label>
   </form>

selection option 下拉选项

multiple可以选中多个但是需要按住crtl键

selected 默认选中子元素 checked在表单中默认被选中

<label for="fruit">
   <select name="" id="fruit" multiple>
      <option value="apple">苹果</option>
      <option value="banner" selected>香蕉</option>
      <option value="orange">橘子</option>
    </select>
</label>

表单需要提交服务器地址
action属性写入提交的服务器地址
- get请求会展示在浏览器的输入框中会把用户的信息给展示出去

用加密方法进行保护

另一种方法通过post请求(method="post")

用axios进行请求比较多的 (流程一样方式不一样)

5 html5新增

01 语义化元素 (都是块元素)

  <header>
        头部元素
    </header>
    <nav>导航元素</nav>
    <section>区域</section>
    <article>文章</article>
    <aside>侧边元素</aside>
    <footer>尾部元素</footer>

02 video(视频)与audio(音频)元素的使用

(之前是通过flash或者其他插件来使用的)

controls 控制栏
autoplay 自动播放(在大多数浏览器上不会生效不希望自动播放)
muted 是否静音播放
preload 预加载视频(提前缓存提前获取视频时长)

<video src="./img/v.f100830.mp4" width="200px" controls></video>

audio音频
controls 控制栏
autoplay 自动播放(在大多数浏览器上不会生效不希望自动播放)

 <audio src="./img/v.f100830.mp3"></audio>

03 input额外扩展内容

placeholder 内容占位符

autofocus 自动聚焦

 <input type="text" placeholder="请输入">

04 全局属性

data-* 用于自定义属性 data-name data-age

可以让js中获取data定义的数据 dataset(保存了这几个属性)

05 css属性

white-space:用来设置空白处理与换行规则 tab键换行符
normal 合并连续的空白允许单词超盒子时换行
nowrap 合并连续的空白不允许单词超盒子时换行
pre 不合并连续的空白不允许单词超盒子时换行
pre-wrap 不合并连续的空白允许单词超盒子时换行
pre-line

<p>11          1222这有换行
     333</p>

text-overflow
visible 不生效
clip 裁剪
ellipsis 超出文字省略号代替

coderwhy - html基础