首页前端开发HTML【web前端阶段一】HTML巩固学习（持续更新）（上）

【web前端阶段一】HTML巩固学习（持续更新）（上）

时间2023-07-14 11:56:02发布访客分类HTML浏览904
导读：一.什么是web前端web前端就是提供数据交互的平台。具体有:html,css,js三个部分。如果把前端比做写的一封信：html（“描述”）就是写信用的笔；css（为“描述”添加样式）就是写信用的墨水和信纸；js（为“描述”添加行为）就是这...

一.什么是web前端

web前端就是提供数据交互的平台。


具体有:html,css,js三个部分。


如果把前端比做写的一封信：


  • html（“描述”）就是写信用的笔；


  • css（为“描述”添加样式）就是写信用的墨水和信纸；


  • js（为“描述”添加行为）就是这封信所具有的功能，比如“给女孩表白”的功能。


1.交互思想如何让用户看到数据（how to see）


接上面的把前端当做一封信的假设


  • !DOCTYPE html > 就是一张信封上的邮票


  • html> 就是信封


– head> 就是信封上的收信人，寄信人，即信封上的内容


---- title> 就是标题


---- meta charset=“UTF-8”>


– body> 就是信封内的内容


2.交互思想如何让用户更舒服的看到数据（how to comfortable）


在head> 中加入style>


添加css样式，如：对齐，大小，高度，宽度，颜色，布局，圆角


3.交互思想如何让用户称为数据的主人（how to be lord）


body> 中加script>


添加js实现交互，将数据传递给用户，用户又将操作的信息传递给网站


二.HTML

(1).什么是web前端


  1. 可视化数据


  1. 美观的UI


  1. 可操作，具有交互功能


  1. 易于用户理解，通俗易懂


(2).怎么学好web前端


  1. 是否感兴趣：你是喜欢直观表达出来（适合前端），还是喜欢抽象的表达（逻辑方面，适合编程之类）


  1. 是否可以长期坚持做一件事情（解决问题的能力）


  1. 乐观向上的生活态度（对用户负责）


  1. 设身处地的考虑用户的使用（同理心）


  1. 勇于探索，旺盛好奇心（保持学习）


1.webstorm的使用



菜单栏常用FILE下（通常操作关于文件、工程）


New Project创建工程
New  会弹出一个列表供选择要创建的类型
Open  打开一个项目
Save As  将当前页面另存为
Reopen Project  近几次打开的项目列表
Close Project  点击后回到欢迎页面上
Rename Project  它修改的不是当前项目的文件夹名，而是文件夹目录下.idea的以iml结尾的文件，这个是项目的名字。rename后观察iml文件名的变化。
settings  常用设置
Exit   退出Webstorm

---


(1).webstorm常用配置


  1. 如何更改主题（字体& 配色）


file-> setting-> editor-> colors& fonts-> scheme选择你的主题（darcula）


  1. 如何让webstorm启动的时候不打开工程文件


file-> settings-> Appearance& Behavior-> System settings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）


  1. 如何完美显示中文


file-> settings-> appearance中勾选override default fonts by(not recommended)，设置name:NsimSum,Size:12

(appearance外观选项，选中“重写默认字体”，设置名字为NsimSum，它是windows下的宋体字，字号12)。这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。


  1. 如何显示行号


在代码显示区的左边右击选择“show line number”。


  1. 如何代码自动换行


file-settings-editor-> general-> “use soft wraps in editor” 打上钩，代码就自动换行了。


(2).webstorm快捷键


  1. TAB


自动补全


  1. 复制当前行


ctrl+d


  1. 删除当前行


Ctrl+y


  1. 注释当前行|取消注释


ctrl+/


  1. 注释多行|取消注释


ctrl+shift+/


  1. 撤销


ctrl+z


  1. 同时编辑


alt


  1. 新建多个


∗


  1. 包含关系


>


2.html简介


(1).HTML是什么


  1. 超文本标记语言（HyperText Mark-up Language ）


  1. 用来设计网页的标记语言


  1. 用该语言编写的文件，以 .html或 .htm为后缀


  1. 由浏览器解释执行


  1. 不区分大小写，建议小写


(2).HTML标签标签


  1. HTML用于描述功能的符号成为“标签”


  1. 标签都封装在一对尖括号“…> ”之中,如html> 就是一个标签


  1. 封闭类型标记（也叫双标记），必须成对出现,如p> /p>


  1. 非封闭类型标记，也叫作空标记，或者单标记，如br/>


(3).HTML 元素


指的是从开始标签（start tag）到结束标签（end tag）的所有代码


某些 HTML 元素具有空内容（empty content）


空元素在开始标签中进行关闭（以开始标签的结束而结束）


大多数 HTML 元素可拥有属性


(4).HTML属性与值


  1. 属性是用来修饰元素的


– 属性必须位于开始标签里


– 一个元素的属性可能不止一个，多个属性之间用空格隔开


– 多个属性之间不区分先后顺序


  1. 每个属性都有值


– 属性和属性的值之间用等号链接


– 属性的值包含在引号当中


– 属性总是以名称/值对的形式出现



(5).注释


  1. 为代码添加适当的注释是一种良好的编程习惯


  1. 注释标签不支持任何属性


  1. 语法：!-- 注释的文本内容 -->


  1. “！–"和“–> "之间的任何内容都不会显示在浏览器中


  1. 注释不可以嵌套在其他注释中


3.htm基本骨架


!DOCTYPE html>
    ！--文档类型声明-->
    
html lang="en">
    
head>
    
    meta charset="UTF-8">
    
    title>
    Title/title>
    ！--文档标题，一个网页只能有一个标题-->
    
/head>
    
body>
    

/body>
    
/html>
    



head lang="en">


lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，还有常见的值是zh-CN，代表了中文。


（这样写让搜索引擎知道你的这个站点是中文还是英文网站）


meta charset="UTF-8">


meta标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式


GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准,GBK编码专门用来解决中文编码的,是双字节的。UTF－8 编码是用以解决国际上字符的一种多字节编码。


(1).什么是DTD文档模型，为什么写在HTML当中？


DTD文档模型也称DOCTYPE文档声明，它是Document Type Definition（文档类型定义）的英文缩写，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。


注：它不是HTML标签。


DTD文档模型=DOCTYPE=DOCTYPE文档声明


(2).html和xhtml的区别


XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了“表现层”的标签，同时要求标签的严格嵌套，标签结束等等。


4.基本结构中的属性


html> 定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。


html>
    
head>
    
    title>
    我的第一个 HTML 页面/title>
    
/head>
    
body>
    
p>
    body 元素的内容会显示在浏览器中。/p>
    
/body>
    
/html>


标签用于定义文档的头部，它是所有头部元素的容器。head>  中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。


下面这些标签可用在 head 部分：
title>
    、meta>
    、link>
    、style>
    、 script>
    。


title> ：


  1. 可定义文档的标题。


  1. 它显示在浏览器窗口的标题栏或状态栏上。


  1. 当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。


  1. title> 标签是 head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。


  1. title写和你网页相关的关键词有利于SEO优化


html>
    
head>
    
    title>
    我会显示在收藏栏里/title>
    
/head>
    
    body>
    .../body>
    
/html>


**meta> **可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有:


  1. Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。


meta name="keywords" content="Lotay,csdn,前端,html">


  1. description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。


meta name="description" content="Lotay,csdn,前端,html">


  1. author作者 标注网页的作者


meta name="author" content="root,root@xxxx.com">


5.基本元素


标签作用
p> /p> 段落标签
hn> /hn> 段落标签（n为1-6）
br/> 换行标签
hr/> 水平线标签
span> /span> 无语义标签


(1).字体样式标签


加粗：strong>
    …/strong>
    或者b>
    …/b>
    
斜体：em>
    …/em>
    或者i>
    …/i>
     
中划线：s>
    …/s>
    或者del>
    /del>


标签描述
b> /b> 粗体
u> /u> 下划线
i> /i> 斜体
strong> /strong> 加重语气
em> /em> 着重
del> /del> 删除
small> /small> `小号
sup> /sup> 上标
sub> /sub> 下标
ins> /ins> 插入


(2).特殊符号


特殊符号字符实体
空格& nbsp;
大于符号（> ）& gt;
小于符号()& lt;
引号（"）& quot;
版权符号@& copy;


hr> ：


在 HTML 页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。


属性：


  1. align：水平对齐方式，默认居中


  1. width：水平线的长度，可取像素（px）和百分比（%）


  1. size：水平线的高度


  1. color：颜色


示例——使水平线在页面中间显示，它的宽度为页面的50%


hr align="center" width="50%" />


pre> /pre> ：


被包围在 pre 元素中的文本通常会保留空格和换行符


示例——用pre定义有换行的文本


body>
    ：
    pre>
    
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
    /pre>
    
/body>


6.图片标签


  1. 使用元素将图像添加到页面


  1. 空标记


  1. 必须属性：src（存储图像的位置）


  1. 常用属性：width，height，alt，title


img src="URL" width="300" alt=”替换文本属性”/>


title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的


alt当图片未能正常显示时，用于给用户的提示信息


比如下面的，图片,文本,超链接的显示并对齐：


!DOCTYPE html>
    
html lang="en">
    
head>
    
    meta charset="UTF-8">
    
    title>
    work2/title>
    
    style>

        p{
    
            text-align:center;
    
            font-size: 50px;
    
            color: aliceblue;

        }

        .a1{
    
            color: antiquewhite;
    
            font-size: 30px;

        }
    

    /style>
    
/head>
    
body bgcolor="#4fa286">
    
div align="middle">
    
    img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=546572147,4046548459&
    fm=26&
    gp=0.jpg"
         width="40%" alt="无法找到图片"  >
    
/div>
    
p class="p1">
    今天用Forest在尚学堂坚持学习了5个小时，我真棒！/p>
    
div align="middle">
    a href="https://www.forestapp.cc/" class="a1" >
    你好呀，我是Forest的官网/a>
    /div>
    

/body>
    
/html>



7.相对路径和绝对路径


8.超链接


1.使用a> /a> 元素创建一个超链接


2.语法：


a href=""  target=""  title=””>
    文本/a>


9.锚点定位


  a href="#锚点名">
    目录/a>
    
                1.id="锚点名"
                2.a  name="锚点名">
    /a>


10.文本格式化标签


hr> :


1. align 水平对齐方式 属性值：left center right


2. width 水平线的宽度


3. size 水平线的高度


4. color 颜色


pre> /pre> 预文本标签


被包围在 pre 元素中的文本通常会保留空格和换行符


如下，用pre定义有换行的文本：


body>
    
    pre>
    
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
    /pre>
    
/body>



11.块级元素和行内元素


  1. 块级元素独占一行，行内元素在同一行显示


  1. 块级元素默认宽度为100%，行内元素由内容撑开


  1. 块级元素可以设置宽高，行内元素不可以设置宽高


  1. 块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用


  1. 块级元素默认的display为block，行内元素的display为inline


  1. 块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本


  1. 常见的块级元素有h1-h6，p，div等，行内元素有a，em，b，i，u等


声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！


若转载请注明出处： 【web前端阶段一】HTML巩固学习（持续更新）（上）
本文地址： https://pptw.com/jishu/309286.html
html 练习：展示一首古诗词 一文带你了解前端三剑客之HTML（三）

游客 回复需填写必要信息
↑