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

2018-10-11 本文已影响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.jpg、img/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>不建议使用

语义分段元素

Form

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

文档对象模型DOM

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