Web前端学习win11

Web前端学习win11

    • 一、第一部分
      • 1.1什么是HTML、CSS
      • 1.2VS code
      • 1.3深入了解网站开发
    • 二、第二部分
      • 2.1初始代码
      • 2.2 注释
      • 2.3HTML语义化
      • 2.4标题与段落
      • 2.5文本修饰标签
      • 2.6 图片标签与图片属性
      • 2.7 引入文件的地址路径
      • 2.8 跳转链接
      • 2.9 跳转锚点
      • 2.10 特殊符号
      • 2.11.列表
      • 2.12 表格
      • 2.13 表单

一、第一部分

1.1什么是HTML、CSS

介绍HTML、CSS

  1. HTML、CSS是制作网站的两种编程语言,一般配合使用,是网站开发的基础语言

补充:HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。
CSS:层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

  1. 网站是所写代码经过浏览器解析之后的效果
    (在某一网页右击选择“查看页面源代码”便可查看该网页的源代码)

  2. 网站由很多网页构成,一个网页为一个“.html文件”

  3. 如何写一个"html"文件
    简单的:记事本: 在指定目录下新建一个文本文档
    将后缀“.txt”改为”“.html”
    (若看不到扩展名可在上方查看中的显示中点击文件扩展名后重命名)

用记事本打开刚才的".html"文件进行编辑。
Web前端学习win11_第1张图片
再用浏览器将其打开就可以显示自己刚才编辑的内容了。Web前端学习win11_第2张图片

1.2VS code

记事本编写效率低,容易出问题,所以应采用代码编辑器因此我们使用VS code代码编辑器。了解VScode的基本应用。

  1. 介绍:全称为Visual Studio Code,来自微软,是一款开源(免费)的轻量代码编辑器。

  2. 安装插件
    语言包Chinese:将界面中文字变为中文
    open in browser,和view in browser:可直接在浏览器中打开网页。

  3. 编辑器的基本使用
    保存:ctrl+s
    全选:ctrl+a
    剪切:ctrl+x
    复制:ctrl+c
    粘贴:ctrl+v
    撤销:ctrl+z
    前进:ctrl+y
    从头选中一行:shift+end
    从后选中一行:shift+home
    向后缩进:tab
    向前缩进:tab+shift

在这里插入图片描述
多光标:alt+鼠标左键
选择相同元素的下一个:ctrl+d
搜索栏:快速搜索到所有所搜内容

创建文件、文件夹、重命名、删除
设置:文件->首选项->设置(大小,是否换行 word wrap)

1.3深入了解网站开发

  1. 开发人员:
    UI设计师:设计网页,制作设计稿

web前端开发工程师(H5开发):将设计稿写成代码,数据里的数据显示到页面,HTML+CSS

web后端开发工程师:处理数据

  1. 前端核心技术
    HTML:结构
    CSS:样式(美化)
    JavaScript:与用户的交互行为
    补充:JavaScript是用来做交互的,是一种脚本语言,即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎,JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的,使静态的HTML具有一定的交互行为(比如表单提交、动画特效、弹窗等)。

二、第二部分

2.1初始代码

每一个“html"文件都需要添加初始代码。介绍VS code的基础使用。

DOCTYPE html>   文档申明:告诉浏览器这是一个html文件
<html lang="en">     html文件的最外层标签:包裹着所有html标签代码,lang="en"表示是一个英文网站。lang="zh-CN"表示是一个中文网站。
<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>Documenttitle>    设置网页标题
head>
<body>
    
body>
html>

2.2 注释

1.写法在浏览器中看不到,只能在代码中看到注释的内容。

2.意义:把暂时不用的代码注释起来,方便以后使用。对开发人员进行提示。

3.快捷键添加删除注释: ctrl+/(光标移到起始位置,不要选中)或者shift+alt+a(要选中再按)

 

2.3HTML语义化

根据网页中内容的结构,选择合适的HTML标签进行编写。(什么结构采用1什么样的标签)

屏幕阅读器(H5v0.12.4):提炼出当前网页的标题

2.4标题与段落

1.h标签:标题,双标签:

.....
。 网页中,h1标题最重要,h1最大,并且一个.html文件中只能出现一次,其他的都可以有多个。
h5h6标签不经常使用

2.p标题:段落,双标签

3.练习

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>Documenttitle>
head>
<body>
 <h1> 吴亦凡个人简介h1>


 <h2>   基本信息 h2>
 <p>  涉强奸罪加拿大籍男艺人,吴亦凡(Kris),1990年11月6日出生于广东省广州市,加拿大籍华语流行乐男歌手、影视演员、音乐制作人。p>

   <p>2021年7月31日,经警方调查,吴亦凡因涉嫌强奸罪被朝阳公安分局依法刑事拘留;8月10日,律师证实吴亦凡涉嫌在洛杉矶强奸未成年女粉丝 ;8月16日,北京市朝阳区人民检察院经依法审查,对犯罪嫌疑人吴某凡以涉嫌强奸罪批准逮捕。p>
<h2>早年经历h2>
<p>  吴亦凡出生于广东省广州市,父母离异后随母亲生活,10岁时和家人移民加拿大温哥华。2005年,吴亦凡在广州市第七中学读初三,在这期间,他还担任篮球队队长,参加少年NBA中国初中篮球联赛。随后,他回到加拿大,在加拿大温斯顿爵士丘吉尔中学就读;2007年,读高二的吴亦凡参加了韩国SM娱乐有限公司的全球选秀,成为练习生。 p>  


<h2>人物评价h2>

<p>做艺先做人,做人德为先。这句话到什么时候都不过时。艺人们应该始终以此为从业的基本准则,让自己成为一个具有真善美内核的倡导者、践行者和示范者。(央视网评论员)p>
    <p>法律面前没有顶流。人气越高越要检点自律,越当红越要遵纪守法。(《人民日报》评) p>
    <p>法律面前人人平等,正义面前没有“顶流”!(《法治日报》评)p>
    <p> 光环再耀眼,名气再大,均无特权。(《中国妇女报》评) p>
    <p> 千里之堤,溃于蚁穴。失去了慎微慎独、自警自省之心,便是滋生贪婪欲望的开始;从不守规矩,到违反法律,往往也不过是一步之遥。一旦置职业道德等规矩于不顾,做人做事出格走偏就在眼前,不仅毁了个人的立身之本,而且最终会遭大众唾弃、遭市场抛弃。吴某凡被依法刑事拘留,是一声响亮警钟,“演艺圈”不容藏污纳垢,“明星”要将守规矩作为基本责任和义务,远离非法之路。(中央纪委国家监委网评)  p>
body>
html>

2.5文本修饰标签

强调:
对文本进行加粗,双标签
斜体,双标签,

下标,双标签

上标,双标签,

删除文本,双标签,(加删除线)

插入文本,双标签,(加下划线)
(删除,插入文本一般配合使用)

练习

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>Documenttitle>
head>
<body>
    <p>
    北京著名的高档百货店-<em>塞特购物中心em>即将闭店,塞特购物中心总台服务人员表示<strong>“如果手中有购物卡,请尽快到店消费”strong>根据这位工作人员介绍,目前塞特中心正在进行清仓大甩卖。<del>特价电视原价3600元del><ins>现清仓价只需1300元ins>p>
    <p>a<sup>2sup>+b<sup>2sup>=c<sup>2sup>
    H<sub>2sub>Op>



body>
html>

2.6 图片标签与图片属性

图片标签,单标签,img
(快捷键:img+tab->)

src=" ":引入图片地址

alt=" ":当图片出现问题时出现提示,提高用户体验

title=" ":鼠标移动至图片上时显示提示,移开时消失

width=" “、height=” ":单位是像素

练习

<body>
    <img src="https://pic4.zhimg.com/v2-e5f2f72671ac1133e307c324d550467b_r.jpg?source=1940ef5c" alt="天官赐福"title="天官赐福百无禁忌"width="300"height="300">
body>

Web前端学习win11_第3张图片

2.7 引入文件的地址路径

相对路径:
.在路径中表示当前路径(与当前文件在同一级别,在当前文件内部)
…在路径中表示上一级路径(图片所在文件夹与当前文件在同一级别)
/和\都可以用

练习

 
    
    <img src="../hhh/laopo.jpg" alt="">
    (相对路径)
 <img src="C:/hhh/laopo.jpg" alt=""> 
 (绝对路径,盘名E:可不写)

2.8 跳转链接

链接文字地址图片

标签(快捷键a+herf)

属性
href:链接地址

target:改变链接打开的方式,默认情况下在当前页面打开_self.在新窗口打开_lank

base,单标签:改变链接的默认行为,写在body当中

练习

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>Documenttitle>
    <base taeget="_blank">       (base标签)
head>
<body>
    
    
      <a href="http://www.baidu.com" alt=""><img src="./hhh/laopo.jpg" alt="">a>
     <a href="http://www.baidu.com"target="_blank">访问百度a> 
     <a href="http://www.baidu.com"target="_blank">访问百度a> <a href="http://www.baidu.com"target="_blank">访问百度a> <a href="http://www.baidu.com"target="_blank">访问百度a>

    
body>
html>`

2.9 跳转锚点

快速 在当前页面内进行切换 ,切换位置 。类似书的索引。

实现一

 <body>
    <a href="#HTML">HTMLa>
    <a href="#CSS">CSSa>
    <a href="#Javascrip">Javascripa>
    <h2  id ="HTML">  HTML       h2>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <h2 id="CSS">         h2>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <h2  id="Javascrip" >Javascrip        h2>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>

实现二

<a name="    ">a> 
<body>
    <a href="#HTML">HTMLa>
    <a href="#CSS">CSSa>
    <a href="#Javascrip">Javascripa>
    <a name="HTML">a>        不占空间,用来做映射
    <h2> HTML       h2>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <a name="CSS">a>  
    <h2> CSS        h2>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <a name="Javascrip">a>  
    <h2>Javascrip        h2>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
    <p> hhhhhhhhp>
body>

2.10 特殊符号

编写文本时,会遇到无法输入的特殊符号,且多个空格不会不会被页面解析出来。因此准备了专门的代码。还可以避免产生冲突。
&+字符
Web前端学习win11_第4张图片
<html> ->

2.11.列表

1.无序列表:ul li必须组合出现,中间不允许有其他标签)li内部可以有其他。

tupe属性:改变前面标记的样式,一般用CSS控制,查Web前端学习win11_第5张图片

<body>
    <ul type="circle">
        <li>第一项li>
        <li>第二项li>
    ul>
body>

2.有序列表
用的很少,可以用无序列表代替

<ol><li>

默认1.2.3,无序是点

3.定义列表
有标题和标题内容

:定义列表
:定义专业术语或名词
:对名词进行解释和描述
Web前端学习win11_第6张图片
4.嵌套列表
列表之间可以嵌套
有序列表嵌套

<body>
<ul>
<li>辽宁省
<ul>
    <li>沈阳li>
    <li>大连li>
    <li>丹东li>
ul>
li>
<li>山东省
    <ul>
<li>济南li>
<li>青岛li>
<li>烟台li>
    ul>
li>
ul>    
body>

Web前端学习win11_第7张图片
无序列表嵌套

<dl>
    <dt>中国dt>
    <dd>
        <dl>
            <dt>辽宁省dt>
            <dd>沈阳dd>
            <dd>大连dd>
            <dd>丹东dd>
        dl>
        <dl>
            <dt>山东省dt>
            <dd>济南dd>
            <dd>青岛dd>
            <dd>烟台dd>
        dl>
    dd>
    <dt>美国dt>
    <dd>洛杉矶dd>
    <dd>纽约dd>  
dl>

Web前端学习win11_第8张图片

练习

<h1>好美味小吃h1>
<ul>
    <li>小吃类
        <ul>
            <li>煮粉干li>
            <Li>拌青菜Li>
            <li>蛋炒饭li>
            <li>煎蛋li>
            <li>米饭li>
        ul>
    li>
    <li>卤味类
        <ul>
            <li>鸭肠li>
            <li>面筋li>
            <li>牛肚li>
            <li>猪耳朵li>
            <li>猪头肉li>
        ul>
    li>
ul>
<p><em>亲,20元以上可送餐哦em>p>

Web前端学习win11_第9张图片

2.12 表格

1.表格标签

:表格的最外层容器
:定义表格行
:定义表头
:定义表格单元
:定义表格标题
注:之间有嵌套关系,要符合嵌套规范

2.语义化标签:没有什么效果,要符合嵌套规范
tHead、TBody、tFood
TBody可出现多次,tFood,tHead只能出现一次
(tFood无tab快捷键)

<body>
    <table>
        <caption>天气预报caption>
        <tHead>
            <tr>
                <th>日期th>
                <th>天气情况th>
                <th>出行情况th>
            tr>
        tHead>
        <tBody>
            <tr>
                <td>2019年1月1日td>
                <td>td>
                <td>天气晴朗,适合出行td>
            tr>
        <tr>
            <td>2019年1月2日td>
            <td>小雨td>
            <td>有小雨,出门请带伞td>
        tr>
    tBody>
    table>
body>
 

Web前端学习win11_第10张图片
表格属性
border:表格边框(table)
cellpadding:单元格内的空间(table)
cellspacing:单元格之间的空间(table)
rowspan:合并行(th)
colspan:合并列(td)
align:左右对齐方式:left、center、right
valign:上下对齐方式:top、middle、bottom

html
<body>
    <table border="3" cellpadding="30" >
        <caption><strong>天气预报strong>caption>
        <tHead>
            <tr align="left">     
                <th colspan="2">日期th>      <th>天气情况th>
                <th>出行情况th>
            tr>
        tHead>
        <tBody>
            <tr>
                 <td rowspan="2">2019年1月1日td>       <td>白天td>
                <td>td>
                <td>天气晴朗,适合出行td>
            tr>
            <tr>
                <td>黑天td>
                <td>td>
                <td>天气晴朗,适合出行td>
            tr>
        <tr>
            <td rowspan="2">2019年1月2日td>              <td>白天td>
            <td>小雨td>
            <td>有小雨,出门请带伞td>
        tr>
        <tr>
            <td>黑天td>
            <td>小雨td>
            <td>有小雨,出门请带伞td>
        tr>
    tBody>
    table>
body>

Web前端学习win11_第11张图片

2.13 表单

1.表单标签:更加自由
form(外面)、input(输入框去)
(快捷键input+tap)
input(单标签)有一个type属性,决定是什么控件
type=“text(默认)输入框、password密码框(输入显示星号)、checkbox复选框 、radio单选框、file(上传文件)、submit(提交)reset(重置)、”

<body>
    <form action="所需提交的地址"
    >输入框h2>
     <input type="text" placeholder="请输入用户名">
     <h2>密码框h2>
     <input type="password"placeholde="请输入密码">
     <h2>复选框h2>
     <input type="checkbox"checked>苹果
     <input type="checkbox" checked>香蕉
     <input type="checkbox"disabled>葡萄
     <h2>单选框h2>
     <input type="radio"name="gender"><input type="radio"name="gender"><h2>上传文件h2>
     <input type="file">
     <h2>提交和重置h2>
     <input type="submit">
     <input type="reset">
body>

**checkbox种checked为默认被选中,disabled为默认不能被选中
radio加name属性可实现只选一个
重置:所选清空
上传文件:打开文件管理选择文件
password、text中加placeholder=""属性为框中提示文字,输入时消失
Web前端学习win11_第12张图片

你可能感兴趣的:(前端,学习,css)