• 前端零基础入门:页面结构层HTML


    HTML页面结构层HTML
    分以下方面学习:
    HTML基础,
    HTML表格,
    HTML表单,
    搭建网页结构

    html基础

    学习前端的第一门课程,为HTML基础,HTML标记语言,它是网页制作的第一步。

    学习内容:
    HTML概念,了解HTML发展史,基础语法,常用标签(段落,图片,链接等)
    结合小例子

    什么是HTML
    HTML(Hypertext Markup Language)即超文本标记语言

    html发展史
    1993(IETF)HTML1.0
    1995(W3C)HTML2.0
    1996(W3C)HTML4.0
    1997(W3C)HTML4.0.1
    2000(W3C)XHTML1.0
    2001(w3c)xhtml1.1
    xhtml2.0?
    2004年(WHATWG)HTML5草案
    2008年(合并)HTML5正式版
    2014年HTML5定稿

    html特点

    HTML不需要编译,直接由浏览器执行
    HTML文件是一个文本文件
    HTML文件必须使用HTML或htm为文件名后缀
    HTML大小写不敏感,HTML与html一样

    HTML是一个文本文件
    file

    HTML基础语法

    学习内容
    HTML基本结构
    HTML标签
    HTML元素
    HTML属性
    注解

    注解:div标签为块级结构布局元素,因此将在css中结合盒模型进行讲解。

    HTML基本结构

    <html>
    // 头部信息
    <head>
     <title>标题</title>
    </head>
    // 网页内容
    <body>
     网页主体内容
    </body>
    </html>
    

    file

    file

    html标签属性

    语法:
    <标签名 属性名1=“属性值” 属性名2=“属性值” ...> ... </标签名>

    DOCTYPE文档类型声明

    <!DOCTYPE> 声明必须放在html文档第一行

    <!DOCTYPE> 声明不是HTML标签

    <!DOCTYPE html>
    <html>
    <head>
     <!-- 网页头部内容 -->
     <title>标题</title>
     </head>
     <body>
     <!-- 网页主体内容 -->
     </body>
    </html>
    

    网页编码设置
    问题:
    当网页显示出现乱码时
    解决:
    <head></head>标签之间添加

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    

    注:utf-8,GB2312,gbk等编码

    file

    文字和段落标签

    标题标签:

    <h1></h1> ~ <h6></h6>
    

    file

    段落标签:

    <p></p>
    

    align对齐属性值:

    值,描述
    left 左对齐内容
    right 右对齐内容
    center 居中对齐内容
    justify 对行进伸展,这样每行都可以有相等的长度。
    

    换行标签:

    <br/>
    
    <p align="justify"></p>
    

    列表标签

    html标签
    html标记标签通常被称为HTML标签
    HTML标签是由尖括号包围的关键词
    HTML标签通常是成对出
    标签对中的第一个标签是开始标签,第二个标签是结束标签

    什么是HTML
    HTML是用来描述网页的一种语言
    HTML超文本标记

    无序列表

    <ul>
     <li>1</li>
     <li>2</li>
    </ul>
    

    type属性值:
    值,描述
    disc:圆点
    square:正方形
    circle:空心圆

    有序列表

    语法:

    <ol>
     <li>1</li>
     <li>2</li>
    </ol>
    

    type属性值:
    值,描述:
    1,数字1,2,。。。
    a,小写字母a,b。。。
    A,大写字母A,B。。。
    i,小写罗马数字i
    I,大写罗马数字I

    列表标签
    定义列表:

    <dl>
     <dt>定义列表项</dt>
      <dd>1</dd>
    	<dd>2</dd>
    	
     <dt>列表</dt>
      <dd>1</dd>
    	<dd>2</dd>
    </dl>
    

    定义标签内可以有多个


    对于每一个
    可以有多个

    图像和超链接标签

    图像标签
    语法:

    <img src=" " alt=" " ...>
    

    img属性:
    属性,值,描述

    src,url,显示图像的Url
    alt,文字,图像替代文本
    height,数值和百分比,图像的高
    width,数值和百分比,图像的宽

    HTML路径:
    相对路径
    绝对路径

    超链接标签
    语法:

    <a href=" ">内容</a>
    

    href:链接地址,可以是内部链接或外部链接

    超链接(空链接—target-title属性)

    超链接标签
    属性,描述
    href:链接地址
    target:链接的目标窗口

    _self, _blank, _top, _parent

    title链接提示文字
    name链接命令

    修饰标签和特殊符号

    文字斜体:<i></i>,<em></em>
    
    加粗:<b></b>,<strong></strong>
    
    下标:<sub>
    
    上标:<sup>
    

    特殊符号:
    属性,显示结果,描述

    &lt; < 小于号或显示标记
    &gt; > 大于号或显示标记
    &reg; ® 已注册
    @copy; © 版权
    &trade; ™ 商标
    &nbsp; Space 不断行的空白
    

    列表标签应用场景

    锚链接(同一页面)

    超链接标签
    定义锚:

    <a href="#锚名1">目录1</a>
    <a href="#锚名2">目录2</a>
    <a href="..." name="锚名1" >内容</a>
    xxxx
    <a href="..." name="锚名2">内容</a>
    xxxx
    

    在不同页面如何定义锚点
    定义锚(不同页面):

    网页1:<a href="网页名称#锚名">...</a>
    网页2:<a name="锚名">...</a>
    

    html基本结构:
    语法:<标签名></标签名>
    例如:<html>...</html>

    规范:
    1,<和>括起来
    2,成对出现,开始标签和结束标签,结束标签比开始标签多了一个/

    HTML表格

    基础表格

    学习内容:
    了解表格应用场景
    表格基本结构
    如何操作表格
    表格属性
    表格跨行跨列
    表格嵌套

    数据的展示

    HTML表格
    <table>表格
    <tr>
    <td>单元格


    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达达的简书!

    这是一个有质量,有态度的博客

    博客

  • 相关阅读:
    qt5--创建控件的两种方式
    qt5-编码转换
    C++qt助手assistant
    C++opencv绘制几何图形
    C++opencv创建图像
    【全球软件大会】华为前端工程师分享:华为云官网的智能化实践
    图解 Redis丨这就是 RDB 快照,能记录实际数据的
    云小课 | 玩转HiLens Studio之快速订购HiLens Studio版本
    带你认识4种设计模式:代理模式、装饰模式、外观模式和享元模式
    线性表、顺序表和链表,你还分不清?
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11832661.html
Copyright © 2020-2023  润新知