首先学习需要注意:
- 先完成再完美
- 先理解问题
Web如何工作
访问知乎示例.jpg基本架构和原理
B/S结构.jpgHTML
文档基本结构
- 文档类型声明
- 文档头
- 文档体
- 文档元素
基本元素:标记、元素、内容、属性
- <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>不建议使用
语义分段元素
<body>,<section>,<article>,<aside>,and <nav>
Form
<form>元素为用户输入创建HTML表单,用于向服务器提交数据
文档对象模型DOM
DOM模型将整个HTML文档看作是一个节点数。
这个节点数是document对象,而根元素是<html>元素。
网友评论