HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

蛋挞菌

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量216

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/jing__jun/article/details/107156289

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、标题：“<h></h>”

2、段落：

3、文本格式化： 粗体，斜体，<big> 放大, 缩小, 加粗, 倾斜, 下标, 上标

<!DOCTYPE html>
<html>
<head>
	<title>this is a test</title>
</head>
<body>
	<b>使用标签b加粗文本</b>
	<br>
	<strong>使用标签strong加粗文本</strong>
	<br>
	<big>使用BIG放大文本</big>
	<br>
	<em>使用em使文本倾斜</em>
	<br>
	<i>i使文本倾斜</i>
	<br>
	<small>使用small缩小</small>
	<br>
	文本包含
	<sub>xia</sub>
	<br>
	文本包含
	<sup>shang</sup>
</body>
</html>

4、<pr></pr> 对空行和空格进行控制

5、<bdo dir="rtl"></bdo> 文字从右到左显示

6、<a href="www.baidu.com.cn">百度一下</a>

7、<abbr title=""></abbr> 缩写 <acronym title=""></acronym> 首字母缩写

8、<del></del>删除线 <ins></ins>下划线

9、<a href="url" target="_blank">链接文本</a>
target="_blank" 链接将在新窗口打开

10、在head标签中：
<base href="">指定了页面上所有链接的默认URL。
<meta name="" content="">元素（标签）来描述HTML文档的描述，关键词，作者，字符集等eg:<meta http-equiv="refresh" content="30"> 每30秒钟刷新当前页面 。
<link>通常用于链接到样式表。
<style type="text/css"> body{background-color:yellow} </style>添加样式渲染HTML。
<script>加载脚本文件。

11、无下划线链接<a href="" style="text-decoration:none;">

12、CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部<head> 区域使用<style> 元素
包含CSS 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件。

13、使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式，text-align（文字对齐）属性指定文本的水平与垂直对齐方式。
示例样式

14.<img src="url" alt="" align="bottom/middle/top" width="" height="" style="float:left">alt 属性用来为图像定义一串预备的可替换的文本。HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。

15、表格

<table border="1" cellpadding="10" cellspacing="0">
		<caption>这是一个表格实例</caption>
		<tr>
			<td>姓名</td>
			<td>性别</td>
			<td>联系方式</td>
		</tr>
		<tr>
			<td>dfjalbf</td>
			<td>sdf</td>
			<td>af</td>
		</tr>
	</table>

<caption>定义表格标题
<tr>定义行数
<td>定义列数
<td colspan="2">跨列
<td rowspan="">跨行
cellpadding="10" 单元格边距10
cellspacing="0" 单元格间距0

16、列表

无序列表
<ul style="list-style-type:disc/circle/square"> 
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表
<ol start=1 type="A/a/I/i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

自定义列表
<dl>
  <dt>flower</dt>
  <dd>- pink</dd>
  <dt>tree</dt>
  <dd>- green</dd>
</dl>

17、区块

<div> 	定义了文档的区域
<span>  组合文档中的行内元素， 内联元素(inline)

18、布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Layout-try</title>
</head>
<body>
	<div id="container" style="width: 600px;text-align: center;">
	<div id="header" style="background-color: #fffff0;">
	<h1 style="margin-bottom: 0;">产品介绍</h1></div></div>
	<div id="menu" style="background-color: #ffdab6;height: 200px;width: 100px;float: left; ">
		<ul>
			<li>NCELL</li>
			<li>EAST</li>
			<li>OA</li>
			<li>反洗钱</li>
			<li>票据</li>
		</ul>
		<br>

	</div>

	<div id="content" style="background-color: #eeeeee;height: 200px;width:500px;float: left; "></div>

</body>
</html>

19、表单和输入

<form>
	这是文本框输入：<input type="text" name="test"><br>
	这是密码输入：<input type="password" name="password">
</form>

<form name="input" action="first.html" method="get">
			点击：<input type="text" name="user">
			<input type="submit" value="Submit">
</form>

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

<form>
			<input type="radio" name="sex" value="girl">女孩<br>
			<input type="radio" name="sex" value="boy">男孩<br>
			<input type="checkbox" name="vehicle" value="bike">i have a bike<br>
			<input type="checkbox" name="vehicle" value="car">i have a car<br>

			<select name="cars">
				<option value="v">vvv</option>
				<option value="s">sss</option>
				<option value="f">fff</option>
				<option value="a">aaa</option>
			</select>

</form>

20、脚本

<script>
document.write("JavaScript");
</script> 
<noscript>抱歉，浏览器不支持JavaScript!</noscript>

蛋挞菌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

1、标题：“<h></h>”2、段落：3、文本格式化： 粗体，斜体，<big> 放大, 缩小, 加粗, 倾斜, 下标, 上标<!DOCTYPE html><html><head> <title>this is a test&
复制链接

扫一扫