前端学习1（html基础巩固）_&nasp;空格-CSDN博客

本文链接：https://blog.csdn.net/u013014553/article/details/54665923

大一学习的知识真的忘的差不多了，这次学习就相当于巩固，并在此基础上完成作业。加油

<html>

<head>

<body>

基本概念

<h1>This is a heading</h1>   <h2>标题前后自动加入空行</h2>
<p>段落前后也自动加入空行</p>
<br /> <hr /> <!--换行 分页符-->      &nasp; 空格

样式style<p style="aaaa:bbbb;cccc:dddd">

font-family ; font-size; color; 字体

background-color 背景颜色为元素 body h p（~~bgcolor~~）

text-align 文本水平对其（~~align~~）

文本格式化

<b> bold <i>italic<sub>subscript下标 <sup>superscript上标

<pre> 保留空格换行 <del>二十</del> ~~删除线~~ <ins>十二</ins> ~~下划线~~

<abbr title="etcetera">etc.</abbr> 首字母缩写
<acronym title="World Wide Web">WWW</acronym>

<blockquote> 长引用，浏览器会插入换行和外边距

<q>短引用，浏览器自动加引号

<dfn title="World Health Organization">WHO</dfn> 定义，对缩写进行标记，为浏览器提供有用信息

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->   条件注释

css初识

样式格式化（内部）

h1 {color: red}
p {color: blue}

</style></head>

样式格式化（外部）

<head>

</head>

样式格式化（内联）

超链接

<a href="http://www.baidu.com" target="_blank">baidu</a> target="_blank"在新窗口打开 target="_top" 跳出框架

定向锚

对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

邮件链接

<a href="mailto:someone@microsoft.com?subject=Hello%20again&body=You%20are%20invited">发送邮件</a> %20相当于空格

图像

插入图像

<img src="abc.jpg" width="20" height="20" align="right"/> 反斜杠html5必须加 align在段落的右侧（浮动图像）

<img src="http://cs-server.usc.edu:45678/hw/hw3/images/sayhello.png" alt="Big Boat"/> 显示不出来的时候的alt替换语句

表格

<table border="1" cellpadding="" cellspacing="" bgcolor="red">cellpadding单元内容间距框大框小 cellspacing=单元格间距

table的frame="box" above below

<col align="center" /> 前两列的对齐方式

<tr>

<th rowspan="2"></th> 合并两行（合并同列下一行）

</tr>

<tr>

<td colspan="2" >合并这一行的两列</td>

</tr>

列表

无序列表 <ul type="disc;circle;square"><li>

有序列表<ol start="50"><li>

与 CSS 一同使用，<div class=""> 元素可用于对大的内容块设置样式属性。

与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 <p class="tip"><span>特别提示的东西</span>阿拉巴拉</p>(在css中再定义 p.tip span{})

class/idclass 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

class一般在css中是 .lamp id在css中是#lamp？

<div>

<head>

<style>

#diy123{

}</style>

</head>

<body>

<div id="diy123">real information </div>

</body>

margin 外边框

padding 内边框（距离字）

line-height 文字行间距

letter-spacing 字母间距

text-align:center 文字位置

background-color

height:300px 高度

width:100px;

float:left; 浮框

clear: left right both inherit . 在本元素的左右不允许出现浮动元素

响应式设计

以可变尺寸传递网页,对于平板和移动设备是必需的,针对不同的端有不同的界面，但里子是一样的

Bootstrap 教程???

HTML框架

<frameset cols="25%,25%,50"> cols 垂直框架 rows水平框架

<frame src="a.html" noresize="noresize" /> noresize 框架不可调整

<noframes>浏览器不支持框架时显示的内容

<frame src="/example/html/link.html#C10"> 显示的是页面c10的位置

<a href="http://www.baidu.com" target="iframe_a">点这里在iframe中显示百度页面</a>

背景！！

<body> . bgcolor background

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

javascript 需要扩展

头部元素<head>中定义的元素

<base target="_blank" > 页面中所有链接都跳转新页面

URL - Uniform Resource Locator

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

http 超文本传输协议

https 安全超文本传输协议

ftp 文件传输协议（上传下载）

URL编码：ASCII字符集

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。