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

首先学习需要注意:

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

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>元素。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,092评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,765评论 1 45
  • 福祸旦夕,阴阳夺算。李道人自收小乙为徒,未及六载,无疾而终。盖道人欲固小乙根基,故五载多传以调息静坐之法与...
    北辰王宥先阅读 779评论 9 17
  • 问 程序是什么?指示计算机每一步动作的一组指令 程序是由什么组成的?数据 + 指令数据 + 操作数据结构 + 算法...
    decoding阅读 443评论 0 0