HTML总结1

站点的创建

一个网页上所有的网页，素材 （img，js,css,html)

文件命名规范：

  • 用英文不用中文

  • 名称全部小写英文字母，数字，下划线的组合，比如 my_proj1,不能有汉字，空格，和特殊符号&

  • 必须以英文开头

  • 网站的首页必须命名为index.html,不建议使用shouye.html

web三大标准

HTML结构（用来向页面上添加内容）

CSS 样式 （美化）

JavaScript行为（动态效果，数据交互）

HTML（超文本标记语言）

Hyper TextMarkupLanguage的缩写是HTML

大白话：向网页上展示内容

专业术语：超文本标记语言（文字，图片，视频，音频，超链接）

HTML语法

标记：也叫做标签，用<>括起来的就是标记

有两种类型的标记：

双标记 ：<标记名></标记名>
单标记 : <标记名 />

每一个标记，不管是单标记还是双标记都是有属性，属性是由属性名和属性值组成，属性名和属性值是成对出现

属性是对标记的描述

双标记 ：<标记名 属性名="属性值" 属性名="属性值"></标记名>
单标记 : <标记名 属性名="属性值" 属性名="属性值" />

head标签

<!DOCTYPE html>
<!-- HTML类型声明，它告诉解析器应该用什么样的语言来解析它 -->
<!-- lang="en" 规定的语言 网页内容默认使用的语言 -->
<html lang="en">
  <head>
    <!-- meta 设置网页的元数据  必须放在head里面 
       charset  用什么编码来解析网页
       name 表示元数据的名字  content表示元数据的值，与name一起使用
    -->
    <meta charset="UTF-8" />
    <!--http-equiv 用来覆盖http回应的头信息字段 和content一起用 规定ie用最新的版本来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 作者 -->
    <meta name="author" content="jxx" />
    <!-- 关键词 -->
    <meta name="keywords" content="丁鹿学堂" />
    <!-- 描述 -->
    <meta name="description" content="这是一个简单的html网页" />
    <!-- 给网页标题栏加图标
    favicon.ico  显示在浏览器收藏夹，地址栏和标签标题前面的个性化图标
    -->
    <link rel="Shortcut Icon" href="./img/favicon.ico" type="image/x-icon" />
    <title>Document</title>
  </head>
  <body></body>
</html>
​

 

HTML标记文本标题

    <h1>最重要的标题一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

特点： 独占一行，字体加粗，自带样式，级别越高字体大小越小

段落标记

<p>香港回归25周年</p>

特点：自带样式，独占一行

空格

&nbsp;

特殊符号

 &lt;   <
 &gt;    >
 &yen;   ¥
 &copy;   ©

注释

<!-- 注释内容-->     ctrl+/
​
//注释标记中不能嵌套注释标记

其它标记

    <u>u标记--下划线</u>
    <b>b标记--加粗</b>
    <i>i标记--倾斜</i>
    <strong>strong标记---强调加粗</strong>
    <em>em标记--倾斜</em>

特点:多个在一行显示

换行标记

<br />

水平线

<hr/>

超链接

 <!-- 超链接 
    href  跳转的地址  如果是网上地址一定要加 http
    target    _blank 在新窗口打开   _self  (默认不写就是默认) 在当前窗口打开
    
    -->
    <a href="http://www.baidu.com" target="_self">百度</a>
    <br />
    <a href="./news.html" target="_blank">news</a>

图片

img

<!-- 
      图片标记
      src  图片的路径
      width   设置图片宽度
      height  设置图片高度
      title  鼠标放到图片上时显示标题    利于搜索引擎优化
      alt  网速慢，或者图片不小心删除，影响用户体验  加载慢，或者图片不存在，使用alt属性值来提示

      特点：多个占一行，可以设置宽高
     -->
    <img
      src="./img/bd2.png"
      width="200px"
      title="总统"
      alt="这是一张总统照片"
    />

    <img src="./img/logo/logo.png" width="150" />

 

posted on 2022-07-04 15:55  7891asdf156  阅读(52)  评论(0)    收藏  举报

导航