前端学习笔记1：HTML文件基本结构

来源：互联网发布：海康威视网络监控方案编辑：程序博客网时间：2024/05/29 17:38

1.Html、CSS、JavaScript的关系

Html是网页内容的载体
CSS样式是表现
JavaScript是用来实现网页上的特效效果

2. HTML文件基本结构

<html>  <!根标签><head>   <!定义文档的头部，通常不会显示在网页上><title> Hello World</title>  <!定义网页的标题，会在浏览器的标题栏中显示><meta><link><style> </style><script></script></head><body> <!网页的主要内容><h1></h1> <!标题><p></p>  <!段落></body></html>

3. HTML标签

<p>段落文本</p>：一段文字一个<p>标签，默认样式为段前段后都有一个空行，可用CSS样式删除或者改变它
<hx>标题</hx>：x可以是1-6，重要性依次递减
<em>需要强调的文本</em>：斜体显示
<strong>需要强调的文本</strong>：粗体显示
<span>文本</span>：为文本设置单独的样式
<q>引用文本</q>：短文本引用，引用文本不需要添加双引号，浏览器会自动添加双引号
<blockqote>引用文本</blockqote>：长文本的引用，默认样式是左边和右边缩进
<br />：回车换行（在html文件中是忽略回车的，输入多个空格只显示一个空格）
 ：空格
<hr />：添加水平横线，默认样式为比较粗，灰色
<address>联系地址信息</address>：默认样式为斜体
<code>一行代码</code>
<pre>大段代码</pre>：预格式化的文本，会保留空格和换行符
ul-li标签：无序列表，默认样式为每个li前都添加一个圆点

<ul><li>信息1</li><li>信息2</li><li>信息3</li></ul>

ol-li标签：有序列表，默认样式为每个li前有序号，序号默认从1开始
<div id="板块名称">...</div>：把一些独立的逻辑部分划分出来，放在一个<div>标签中，可以给这个独立的逻辑部分命名
table标签：

<table></table>
<tbody></tbody>：以<tbody>分割表格，可以一部分一部分地显示，不需要等表格全部加载完再显示
<tr></tr>：表格的一行
<td></td>：表格的一个单元格
<th></th>：表格表头，默认样式为粗体居中
summary：表格摘要，不会在浏览器中显示，作用是使搜索引擎更好地读懂表格内容，使屏幕阅读器更好的帮助特殊用户读取表格内容
catption：显示在表格上方

<table summary="记录班级学生数和平均成绩"><caption>标题</caption><tbody><tr><th>班级</th><th>学生数</th><th>平均成绩</th></tr><tr><td>一班</td><td>30</td><td>89</td></tr><tr><td>二班</td><td>35</td><td>85</td></tr></tbody></table>

<a>标签：实现超链接，文字的颜色自动变为蓝色，点击过后变为紫色。title为鼠标滑过连接文字时显示的文本。默认为在本窗口打开，加入target之后再新的浏览器窗口中打开

<a href="http://www.baidu.com" target="_blank" title="点击进入百度">click here</a>

利用<a>标签发送电子邮件

<a href="mailto:yy@imooc.com ; pp@imooc.com ? cc=qq@imooc.com & bcc=dd@imooc.com & subject=邮件主题 & body=邮件内容">发送</a>

<img>标签：插入图片。src指出图像的位置，alt标出当图像下载不成功时显示的文本，title提供当鼠标滑过图片时显示的文本。图像可以是GIF、PNG、JPEG格式。

<img src="http://img.mu.com/52degdfgh343.jpg" alt="My Image" title="电影介绍">

阅读全文

0 0