• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

HTML学习笔记_01基础

开发技术 开发技术 2周前 (04-09) 5次浏览

HTML学习笔记_01基础

基本结构

基础标签

  •     文档类型声明
  •     定义网站语言
  •     字符集声明
  •     注释
  •     换行
  •     插入图片
  •     段落标签
  •     文本格式化标签
  •     div标签
  •     span标签
  •     超链接标签
  •     锚点链接标签

  • 基本结构

    <!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">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/index.css">
        <title>test01</title>
    </head>
    <body>
    <body>
    </html>
    

    基础标签

    文档类型声明

    <!DOCTYPE html>  html5 <!--文档类型声明-->
    

    定义网站语言

    <html lang="en"> <!--定义网站语言-->
    <!-- lang = "en"
    	 lang = "zh-CN"
    	 lang = "fr"    -->
    

    字符集声明

    <meta charset="UTF-8"> <!--字符集声明-->
    

    注释

    <!--注释-->
    

    换行

    单标签

    </br>
    <br />
    

    插入图片

    <img src = "图片链接" alt = "替代文字" title = "提示文字"> </img> <!--例子-->
    
    属性 属性值 说明
    src(必要属性) 图片路径 必须属性,“../表示上级路径”
    alt 文本 替换文本
    title 文本 提示文本,鼠标放到图片上显示文字
    width 像素 设置图像的宽度
    height 像素 设置图像的高度
    border 像素 设置图像的边框粗细

    标题标签

    独占一行,醒目显示

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <!--下方表头html代码-->
    

    h1

    h2

    h3

    h4

    h5
    h6

    段落标签

    <p>第一个
        段落</p>
    <p>第二个<br/>段落</p>
    <!--下方代码——>
    

    第一个
    段落

    第二个段落

    文本格式化标签

    <strong>加粗标签</strong>
    <b>加粗标签</b>
    
    <em>倾斜标签</em>
    <i>倾斜标签</i>
    
    <del>删除线</del>
    <s>删除线</s>
    
    <ins>下划线</ins>
    <u>下划线</u>
    

    加粗标签

    倾斜标签

    删除线

    下划线

    <div>

    布局大盒子标签

    <div></div>
    

    <span>

    行级小盒子标签

    <span></span>
    

    超链接标签

    <a href="链接" target = '_blank'>图片表格文字都可加链接</a>
    
    属性 属性值 作用
    href href地址 指定链接目标的href地址
    target _self,_blank 指定链接页面的打开方式,_self当前窗口打开,_blank新窗口打开

    锚点链接标签

    <a href = "#id"> </a>   	<!--锚点--> 		<!--起跳点-->
    <div id = "id"> </div>  	<!--id定位-->		<!--落地点1-->
    <div name = "name"> </div>  <!--name定位-->	<!--或落地点2-->
    

    程序员灯塔
    转载请注明原文链接:HTML学习笔记_01基础
    喜欢 (0)