zoukankan      html  css  js  c++  java
  • 前端零基础入门:页面结构层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>单元格


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


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

    欢迎关注达达的简书!

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

    博客

  • 相关阅读:
    HDU1258 Sum It Up(DFS)
    hdu 1078 FatMouse and Cheese(记忆化搜索)
    HDU1072 Nightmare (bfs+贪心)
    HDU 2102 A计划 经典搜索
    hdu 1180诡异的楼梯(bfs)
    HDU 1065.I Think I Need a Houseboat
    559_N叉树的最大深度
    236_二叉树的最近公共祖先
    589_N叉树的前序遍历
    每天进步一点点
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11832661.html
Copyright © 2011-2022 走看看