web前端学习

web前端学习,第1张

5.HTML基础结构与属性 HTML

超文本(超出文本的内容):文本内容 +非文本内容(图片、视频、音频等)

标记(标签):<单词(标识符)>

写法分为两种:单标签

双标签

创建标签的快捷键:tab +单词

标签是可以上下排列,也可以组合嵌套

例子:

hello world 可以实现嵌套 * ** ***
hi html
HTML5 标签含义之元素周期表

HTML常见标签: HTML5 星空整理:html5star.com

htmlcoltable
headspandivfieldsetformbodyh1sectioncolgrouptr
titleapremeterselectasideh2headercaptiontd
metartdfnemismallinssbrpblockquotelegendoptgroupaddressh3navmenuth
baserpabbrtimebstrongdelkbdhroldllabeloptiondatalisth4articlecommandtbody
linknoscriptqvarsubmarkbdiwbrfigcaptionuldtinputoutputkeygenh5footersummarythead
stylescriptcitesampsuprubybdocodefigureliddtextareabuttonprogressh6hgroupdetailstfoot
imgareamapembedobjectparamsourceiframecanvastrackaudiovideo
标签的属性:用来修饰标签 ,设置标签的一些功能

<标签 属性=“值” 属性二 =“值2”>

例 子:

<header title ="hello">

  hello world

header>

<footer title= "hi">  hi  html footer> 




6.HTML初始代码

快速创建初始代码 :输入! +tab

DOCTYPE html>  文档声明:(告诉浏览器这是一个html文件)
 
<html lang="en"> html 文件的最外层的标签:包裹所有代码  lang="en"  英文网站 lang="zh-CN"中文网站

<head>

  <meta charset="UTF-8">  元信息:是编写网页中的一些赋值信息  charset="UTF-8":国际编码,让网页不出现乱码的情况

<title>Documenttitle>    设置网页的标题

head>

<body>  在页面中显示的内容

body>

html>
7.HTML注释

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

意义:1.对于暂时不用的代码注释起来,方便以后使用。

​ 2.对开发人员进行提示。

快捷添加注释与删除注释: 1. crtl + / 2. shift + alt + a

8.HTML 语义化

是指根据网页中内容的结构,选择合适的HTML标签进行编写

好处:

1.在没有css 的情况下,页面也能呈现出很好的内容结构。

2.有利于SEO(搜索引擎优化),让搜索引擎爬虫更好的理解网页。

3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。

4.便于团队开发与维护。

9.标题与段落

标题 : 双标签 ....

在一个网页中,h1标题 最重要,并且一个.html文件中只能出现一个h1标签其余都可以有多个

h5 . h6 标题不常用

段落: 双标签

实例 个人简介




  
Document


  
个人简介
基本情况

chen 2000年04月出生

身高170体重65kg

10.文本修饰标签

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

把文本变为斜体

下标:

上标:

删除 (加一个下划线)、 插入文本

一般情况下 ,删除与插入文本是配合用的

实例:对文本的编辑

北京著名的高档百货店———塞特购物中心即将闭店。昨天塞特购物中心总台服务人员表示“如果手里有购物卡请尽快到店消费”。根据这位服务人员介绍,目前塞特购物中心正在进行清仓大甩卖。特价电视原价3600元现清仓价只需1300元

11.图片标签与图片属性

img 单标签

​ src:引入图片的地址

​ alt: 当图片出现问题时的时候,可以显示一段提示文字

​ title:提示信息

​ width、height : 图片的大小

实例:存入图片

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
  
<P><img src="1621330138713106.jpg" alt="这是一张图片" title="这是一个提示信息width="804"height="570">
P>
body>
html>

12.引入文件的路径地址 相对路径

.在路径中表示当前路径

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>

    <img src="./tu.jpg"alt="">

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>Documenttitle>

head>

<body>

    <img src="../web前端/html/图.jpg"alt="">

body>

html>
绝对路径(尽量避免反斜线)

可以在网络上查看图片的地址直接引入也可以引入存储在同一盘的文件

网路上的地址必须用//

13.跳转链接

链接标签:a 双标签

​ href属性:链接的地址

例子:

<body>
    <a href="http://www.baidu.com">访问百度  a>
    <a href="http://www.baidu.com">
    <img src="./图.jpg"  alt=""> a>
body>
target属性:可以改变链接打开的方式,默认情况下:在当前页面打开_self   新窗口打开_blank
  <a href="http://www.baidu.com"target="_blank">访问百度a>

base标签:单标签 改变链接的默认行为

<base target="_blank">

综合练习:页面间的互相跳转

<body>
    <a href="./list.html">列表页a>
    <img src="../image/src=http___img.jj20.com_up_allimg_4k_s_02_210924201SK595-0-lp.jpg&refer=http___img.jj20.webp"alt="">
body>

<body>
    <a href="./detail.html">详情页a>
    <img src="../image/src=http___img9.doubanio.com_view_photo_m_public_p2672746715.jpg&refer=http___img9.doubanio.webp"alt="">
body>
<body>
    <a href="./index.html">返回首页a>
    <img src="../image/图.jpg"alt="">
body>

14.跳转锚点

实现一:

​ #号+id属性

<body>
    <a href="#chen">姓名a>
    <a href="#基本情况">基本情况a>
    <a href="#获奖经历">获奖经历a>
    <h2 id="chen">姓名h2>
    <p>chenqianbinp>
    <h2 id="基本情况">个人情况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="获奖经历">参加的比赛取得的成果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>  <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>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>  <p>......p>

实现二:

#号 +name属性(注意name属性加给a标签)

<body>
    <a href="#chen">姓名a>
    <a href="#基本情况">基本情况a>
    <a href="#获奖经历">获奖经历a>
    <a name="chen">a> 
    <h2 >姓名h2>
    <p>chenqianbinp>
    <a name="基本情况">a>
    <h2>个人情况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="获奖经历">a>
    <h2 >参加的比赛取得的成果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>  <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>  <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>
15.特殊符号
特殊字符含义特殊字符代码
空格符 
©版权©
®注册商标®
<小于号&It
>大于号>
&和号&
¥人民币¥
摄氏度°
16.无序列表(符合常规的嵌套)
 、:列表的最外层容器、列表项

ul和li必须是组合出现的,他们之间不能有其他标签!

type属性:改变前面标记的样式(一般用css来控制)

(https://www.w3school.com.cn/tags/att_ul_type.as)

创建一个无序列表:

<body>
    <ul>
        <li><a  href="#"><strong> 
        strong>a> li>
        <li><a  href="#">第一个a> li>
        <li><a  href="#">第二个a> li>
        <li><a  href="#">第三个a> li>
        <li><a  href="#">第四个a> li>
    ul>
body>
html>
17.无序列表
、:列表的最外层容器、列表项

有序列表用的比较少,经常用的是无序列表,无序列表可以去代替有序列表

  <ol>
      <LI>第一项LI>
      <LI>第二项LI>
      <LI>第三项LI>
  ol>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1295937.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存