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版本以后, ...
随机推荐
- 接口作为方法的参数或返回值——List接口
接口作为方法的参数或返回值,源码可知,List为一个接口,ArraryList是的它的实现类: 其中,addNames方法中,入参和返回值都List接口,入参是多态的,编译看左,运行看右(访问成员方法 ...
- Java并发编程1--synchronized关键字用法详解
1.synchronized的作用 首先synchronized可以修饰方法或代码块,可以保证同一时刻只有一个线程可以执行这个方法或代码块,从而达到同步的效果,同时可以保证共享变量的内存可见性 2.s ...
- webpack4.0 实战记录
从零配置webpack4.0 搭建React工程. 基本环境:Node(v8.1.2)+ webpack(v4.16.2) 1.在项目目录 命令窗口 执行 npm init 初始化项目,执行完后项 ...
- 以太坊客户端Ethereum Wallet与Geth区别简介
以太坊客户端Ethereum Wallet与Geth区别简介 最近有不少朋友在搭建交易平台,在咨询和技术交流的过程中发现很多朋友不太清楚Ethereum Wallet和Geth区别.甚至有朋友使用Ge ...
- Java多线程循环打印ABC的5种实现方法
https://blog.csdn.net/weixin_39723337/article/details/80352783 题目:3个线程循环打印ABC,其中A打印3次,B打印2次,C打印1次,循环 ...
- Codeforces 841A - Generous Kefa
题目链接:http://codeforces.com/problemset/problem/841/A One day Kefa found n baloons. For convenience, w ...
- node 读取多个文件、合并多个文件、读写多个文件
一.读取文件 1.找文件中匹配的内容 let fs = require('fs') let content = fs.readFileSync('/Users/**/desktop/Test.txt' ...
- js中使用0 “” null undefined {}需要注意
注意:在js中0为空(false) ,代表空的还有“”,null ,undefined: 如果做判断if(!上面的四种值):返回均为false console.log(!null);// true c ...
- java中BufferedImage类的用法
1. BufferedImage是Image的一个子类,Image和BufferedImage的主要作用就是将一副图片加载到内存中. BufferedImage生成的图片在内存里有一个图像缓冲区,利用 ...
- 4-20mA电流环路发送器入门（转）
4-20mA电流环路发送器入门 作者:Collin Wells, 德州仪器精密模拟应用工程师 在现代工业控制系统中,4-20 mA电流环路发送器一直是在控制中心和现场传感器/执行器之间进行数据传输最为 ...