HTML基本内容
设置背景色：<body bgcolor="#AAAAAA">，设置背景图：<body background="1.png">。
颜色的知识：
颜色值的取值范围：#00——#FF(0—255)。RGB：由三个颜色值组合而成，R=#FF0000、G=#00FF00、B=#0000FF，通过R+G+B组合，从而形成不同颜色。
像素：只能设置为整数，如果含有小数(100.4px)，是会报错的 —— 因此就算把像素设置为某个整数，浏览器也会根据实际情况将高度、宽度等调整为float或者double(反正是这两个)。
常用HTML文本格式：
<p><em>着重文字</em></p>
<p><i>斜体字</i></p>
<p><small>小号字</small></p>
<p><strong>加粗文字</strong></p>
<p>文字<sup>上标</sup></p>
<p>文字<sub>下标</sub></p>
<p><ins>插入字</ins></p>
<p><del>删除线</del></p>
HTML标签的id特性不能包含"."字符，故一般用"_"作替代。
a标签的使用：
跳转的方式：
<!--在top.html中-->
<body>
<iframe src="child.html"></iframe>
</body> <!--在child.html中-->
<body>
<a href="http://www.baidu.com" target="_parent">此页面的parent现在是top.html</a>
<br /><!--所以而这现在是同样的效果：在top.html中百度-->
<a href="http://www.baidu.com" target="_top">现在的top是top.html</a>
</body>
在当前html文档内，进行跳转：
<!--forward向first跳转：这里只能是a标签-->
<a name="first">first</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#first">forward</a>
为所有链接(<a>、<img>、<link>、<form>)存在的base标签：
<head>
<base href="http://www.baidu.com" target="_blank" />
</head> <!--当a的href为空字符串、没有指明target之时，base标签就提供了默认的href(或者说基准的)、target ; base默认会将当前页面的url，作为空href替换的url-->
<a href="">test</a>
单行文本框：
<!--value为文本框的值，即文本显示值-->
<input id="Price" name="Price" type="text" value="10">
单选按钮(同一组的必须使用同一个name作为组名)：
男<input type="radio" name="sex" />
女<input type="radio" name="sex" />
下拉列表：
<select size="3">
<!--size的值为显示选项的个数-->
<!--option最重要的就是Text、Value、Selected-->
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
提交选择：
@{
var imagePath = "";
if (Request["Choice"] != null)
{ imagePath = "../Images/" + Request["Choice"]; }
}
<form method="post">
<select name="Choice">
<!--这是一个元素(select，option只是它的值，选中哪个，值就是哪个)-->
<option value="p1.gif">Photo 1</option>
<option value="p2.gif">Photo 2</option>
</select>
<input type="submit" value="Submit" />
@if (imagePath != "")
{
<p>
<img src="@imagePath" alt="Sample" />
</p>
}
</form>
表格的使用：
<!--定义表格: cellpadding为每一格的边距，cellspacing是格与格之间的间距，colspan的值表示一个格子占据多少个单元格-->
<table border="1" cellpadding="10">
<!--表格的标题-->
<caption>请填写表格</caption>
<!--对于每一行的内容，都写在tr里面-->
<tr>
<!--定义表头-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<tr>
<tr>
<!--实际内容-->
<td>汤姆</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>杰瑞</td>
<td>男</td>
<td></td>
</tr>
<table>
列表的使用：
<!--有序列表: A/a(以大小写字母排序)，I/i(以大小写的罗马数字排序)；start是排序的起始数字(只能是数字)-->
<ol type="A" start="10">
<li>帽子</li>
<li>衣服</li>
<li>鞋</li>
</ol>
<!--无序列表: 默认是disc(实心圆)，还有circle(空心圆)、square(实心方块)-->
<ul type="square">
<li>猫</li>
<li>狗</li>
<li>猪</li>
</ul>
自定义列表与普通列表的区别主要在于：自定义可以对列表项，进行描述。
div元素是组合HTML元素的一个容器，于是就可以对容器这个整体进行样式的设计(还可以针对容器中某一种元素进行设计)，这就类似于移动开发的stackView。
span元素也是一种容器，与div的区别在于：它只是文本的容器。
HTML的布局：
可以使用div元素布局，也可以用table，它们都可以达到相同或相近的效果，下面布一个"国"字型的局：
效果如下：
使用div布局：
<body>
<!--全局的控制-->
<div id="container">
<div id="heading"></div>
<div id="content_left"></div>
<div id="content_body"></div>
<div id="content_right"></div>
<div id="footing"></div>
</div>
</body> /*外部样式*/
body{
margin: auto;
}
#container{
width: 100%;
height: 735px;
background-color: #f4f4f4;
}
#heading{
width: 100%;
height: 10%;
background-color: burlywood;
}
#content_left{
width: 20%;
height: 80%;
background-color: Background;
float: left;
}
#content_body{
width: 60%;
height: 80%;
background-color: gold;
float: left;
}
#content_right{
width: 20%;
height: 80%;
background-color: Background;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: chartreuse;
clear: both;
}
一般不会有人用table布局，因为难度大，占资源。
框架的使用：
<!--frameset不能在body中使用，所以应该把body删掉；
但是H5要求html中必须含有body一次，所以frameset和frame已不被H5所使用:cols是竖向，横向框架是rows-->
<frameset rows="20%, 50%, 30%">
<frame src="a.html"></frame>
<frame src="b.html"></frame>
<frame src="c.html"></frame>
</frameset>
H5使用的是内联框架iframe：
<!--默认情况下，iframe是有边框的: src的url可以是本地的，也可以是网络上的(必须指定协议)-->
<!--iframe的用法相当于一个网页中的浏览器-->
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
HTML的实体：
实体的含义：
<body>
<html><!--此时文本内容<html>是不能显示的，必须将两个尖括号转换成对应实体-->
<html><!--这时就能正确显示了，其中"<"的实体是"<"、">"的实体是">"-->
</body>
具体的标签对应的实体不用记，用时百度即可。
对DOM的Attribute和Property的理解：
特性Attribute：是DOM节点自身所带的属性，如id、class等。
属性Property：为DOM对象所附加的内容，例如childNodes、firstChild等。可以在浏览器审查的Properties栏中查看。
HTML基本内容的更多相关文章
- 防御XSS攻击-encode用户输入内容的重要性
一.开场先科普下XSS 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- 阿里巴巴直播内容风险防控中的AI力量
直播作为近来新兴的互动形态和今年阿里巴巴双十一的一大亮点,其内容风险监控是一个全新的课题,技术的挑战非常大,管控难点主要包括业界缺乏成熟方案和标准.主播行为.直播内容不可控.峰值期间数千路高并发处理. ...
- Linux中进行单文件内容的复制
文件内容复制的常规方法: 开辟一段空间,不断读取文件的内容并写入另一文件当中,这种方法好在安全,一般在类型允许的最大范围内是安全的,缺点就是复制内容的时间长 一次性复制文件的内容,这种方法必须首先获取 ...
- HTML5 语义元素(二)文本内容
上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...
- iOS 委托与文本输入（内容根据iOS编程编写）
文本框(UITextField) 本章节继续编辑 JXHypnoNerd .文件地址 . 首先我们继续编辑 JXHypnosisViewController.m 修改 loadView 方法,向 ...
- 游戏AI系列内容 咋样才能做个有意思的AI呢
游戏AI系列内容 咋样才能做个有意思的AI呢 写在前面的话 怪物AI怎么才能做的比较有意思.其实这个命题有点大,我作为一个仅仅进入游戏行业两年接触怪物AI还不到一年的程序员来说,来谈这个话题,我想我是 ...
- angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布
应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...
- 推荐一个ASP.NET网站内容管理系统源码
许多人都有各自的兴趣,如打球.踢毽子.看书.看电视.玩游戏等等....我近来迷上了猜灯谜,于是业余做了一个在线猜灯谜的网站:何问起谜语. 先出个谜语让你猜猜:不可缺一点(打一字).可以在线猜:http ...
- Android菜单项内容大全
一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...
随机推荐
- 2017-2018-2 20165316 实验三《敏捷开发与XP实践》实验报告
2017-2018-2 20165316 实验三<敏捷开发与XP实践>实验报告 实验目的 安装 alibaba 插件,解决代码中的规范问题.再研究一下Code菜单,找出一项让自己感觉最好用 ...
- 使用NodeJsScan扫描nodejs代码检查安全性
使用NodeJsScan扫描nodejs代码检查安全性1.下载源码:https://github.com/ajinabraham/NodeJsScan2.下载Windows版docker toolbo ...
- es6基本语法
//let和const申明变量和常量 //作用域只限于当前代码块 //使用let申明的变量作用域不会提升 //在相同的作用域下不能申明相同的变量 //for循环体现let的父子作用域 二.es6的解构 ...
- [转载]web服务器
Web系统由客户端(浏览器)和服务器端两部分组成.Web系统架构也被称为B/S架构.最常见的Web服务器有Apache.IIS等,常用的浏览器有IE.Firefox.chrome等.当你想访问一个网页 ...
- <转>jmeter（五）JDBC Request
本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...
- Python+OpenCV图像处理（三）—— Numpy数组操作图片
一.改变图片每个像素点每个通道的灰度值 (一) 代码如下: #遍历访问图片每个像素点,并修改相应的RGB import cv2 as cv def access_pixels(image): prin ...
- vue打包报内存溢出
vue-cli 构建的项目:package.json 文件里修改: "build": "node build/build.js" 修改为: "buil ...
- 浏览器从输入URL到页面加载显示完成全过程解析
一 浏览器查找域名对应的 IP 地址(域名解析的过程,先进行缓存的查看): 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用 ...
- 传统OGG与Microservice Architecture OGG的通信
针对当前新出的ogg microservice architect(MA),现在只支持oracle 11g/12c的数据复制和投递.如果有其它版本的oracle或其它数据库,比如 mysql, db2 ...
- Scrapy框架学习 - 使用内置的ImagesPipeline下载图片
需求分析需求:爬取斗鱼主播图片,并下载到本地 思路: 使用Fiddler抓包工具,抓取斗鱼手机APP中的接口使用Scrapy框架的ImagesPipeline实现图片下载ImagesPipeline实 ...