美文网首页
Web前端概述、HTML、CSS选择器

Web前端概述、HTML、CSS选择器

作者: 狐仙大人_ | 来源:发表于2018-10-11 10:44 被阅读0次

    首先学习需要注意:

    • 先完成再完美
    • 先理解问题

    Web如何工作

    访问知乎示例.jpg

    基本架构和原理

    B/S结构.jpg

    HTML

    文档基本结构

    • 文档类型声明
    • 文档头
    • 文档体
    • 文档元素

    基本元素:标记、元素、内容、属性

    • <p></p>
    • <li></li>

    单标记元素

    • <meta charset="UTF-8"/>
    • <img src="a.jpg" width="100" height="200"/>
    • <link rel="stylesheet" type="text/css" href="some.css"/>
      tips:对于单标记元素,尽量在start tag的闭合之前加上/
    • HTML5可以不用,但XHTML强烈需要

    全局属性

    最常用:id,class,style,title

    注释

    标题、段落和文本格式化

    • <h1>、<h2>、<h3>、<h4>、<h5>、<h6>
    • <p>

    • 换行

    • 水平标识线
    • <b> Bold text </b>
    • <i> italic tex t<i>
    • <strong> important text </strong>
    • <em> emphasized text </em>
    • <small> smaller text </small>
    • <del> deleted text </del>
    • <ins> inserted text </ins>

    图片

    1.src取值可以为: https://a.jpgimg/a.jpg相对路径,当前HTML文件所在的文件目录下找)、/img/a.jpg绝对路径,在同一个Web服务器下的根目录的img子文件夹下找)
    alt取值为:这里是加载图片失败时的替换文字,必须添加该属性的取值。

    超链接

    文档外链接:

    • <a href="hhttp://weibo.com/huxian">狐仙大人_</a>
      文档内导航:
    • <a hre=+"#faq">常见问题</a>
    • <a href="#">回顶部</a>
      +<a href="botton-section">去底部</a>

    List

    Unordered list 无序列表 <ul></ul>
    Ordered list 有序列表 <ol></ol>
    可以表示线性数据结构,如一组数据内容,导航栏的各个子项,下拉列表的各个子项等。

    Table

    • 可以表示二维数据结构
    • 对多行进行分组<thead>、<tbody>、<tfoot>
    • 对多列进行分组<colgroup>、<col>

    div和span

    容器元素:
    <div>块级容器 block container
    <span>行内容器 incline container
    <table>不建议使用

    语义分段元素

    <body>,<section>,<article>,<aside>,and <nav>

    Form

    <form>元素为用户输入创建HTML表单,用于向服务器提交数据

    文档对象模型DOM

    DOM模型将整个HTML文档看作是一个节点数。
    这个节点数是document对象,而根元素是<html>元素。

    相关文章

      网友评论

          本文标题:Web前端概述、HTML、CSS选择器

          本文链接:https://www.haomeiwen.com/subject/ekzsaftx.html