HTML笔记_19.07-CSDN博客

本文链接：https://blog.csdn.net/Charlson_S/article/details/97113432

HTML超文本标记语言

HTML是用来开发网页的。（网页后缀 html，htm）html是标记语言不是编程语言。

标记：也叫做标签，这个是html里面的一个基本语法，所有的结构都是通过标记来控制的。

使用工具 notepad++

标记的语法

成对的标记，必须有开始标记<XX>，必须有结束标记</XX>。
单个的标记<XX/> 直接结束，XX是标记名。
不区分大小写 <Html></Html>

基本网页结构

<html>
<title>标题</title>
<head>头部<head>
<body>身体</body>
   </html>

文档类型声明放在第一行
<!DOCTYPE html>
网页编码声明
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

(支持中文的utf-8 ,gbk ,gb2312)

<hn></hn> n从1到6，逐渐变小。
水平线 <hr/>
换行  
预格式标签<pre></pre> 这个<pre>会保留多余的空格和空行
标记的属性（可以有多个属性，不分先后顺序） <xxx name="value"></xxx> <xxx name="value"/>
段落标签（分段落，自动换行，产生段落间距） 
字体标签 
短引用 <q>自动添加双引号：
缩写 <abbr>鼠标移到缩略词上会显示全称

加粗  
倾斜  
下标 
上标 
空格 &nbsp

style，是用于改变元素样式的属性。
style的使用越来越广泛，可普遍用于多数元素中，取代了一些旧的属性，

<body bgcolor="#f1e2c3">today is a good day
</body>
<body style="background-color=#f1e2c3">today is a good day
</body>

图片显示

 <img src="xx/xx/xx.jpg" align="right middle left" width = "xxxpx  " height = "xxxpx " alt="解释" />

src后面接路径，有相对路径和绝对路径
align是针对于水平布局，valign是针对于垂直布局width,height可以使用百分比XX%，也可以直接表明像素;若仅规定一个，按规定值成比例显示
alt后面接的是描述性语句，当图片尚未加载或加载不出时显示

相对路径和绝对路径
path =…
当前路径./xx.jpg
上一级路径../xx.jpg
上上一级路径../../xx.jpg (相对路径就是从当前路径寻找，当前路径指当前html文件所在路径)
下一级路径 xx/xx.jpg
path=“C:\Users\souke\Desktop\web01\01.jpg”
一般在项目中都使用相对路径

无序列表 type后面接样式如circle，square，默认实心圆点

 <ul type="xxx">
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

有序列表 start表示起点数，默认1；亦可type=“xxx”使排序为字母或罗马数字“I”“i”

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

自定义列表

<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>打篮球</dd>
<dd>踢足球</dd>
</dl>

超级链接

<a href="http://www.baidu.com" target="xxxxx">百度一下</a>
<a href="web02.html" name="xxxxxx">百度</a>

链接可以是本机页面，也可以是任意的网页地址(内部链接或者外部链接)
target 属性规定在何处打开链接文档
name属性定义锚名称,配合空链接跳转到锚点href="#锚名"或者跳转到别的页面的锚点位置href="xxx.html#锚名"
target用法空链接 href="#"
邮件链接

<a href="charlson_S@weixin.com">发送邮件</a>

文件下载

<a href="xxx.zip">下载</a> 浏览器会根据链接类型，决定是否下载

表格

<table border="1px" width="500px" height="400px" align="center" bgcolor="#f0f0f0"cellspacing="5px"cellpadding="60px">
<caption>标题</caption>
<tr height="320px"    bgcolor="red" valign="top">   
    <td bgcolor="#f0e3d2">wo</td>
	<td>wo</td>
</tr>
<tr>
    <td>wo</td>
	<td>wo</td>  
</tr>            <!-- table row, table data-->

caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上；
boder表示边框厚度；
cellspacing表示单元格之间的空间
cellpadding表示单元格与内容之间的内边距

跨行合并：rowspan 跨列合并：colspan
th 比td 多出来的效果：内容居中，加粗显示

<table border="1px"width="500px"height="200px"align="center"bgcolor="#a1b2c3">
    <tr align="center" valign="middle">
	    <th rowspan="2">商品</th><th colspan="2">上月</th><th colspan="2">本月</th>
	</tr>
    <tr>
	    <th >销量</th><th>销售额</th><th>销量</th><th >销售额</th>
	</tr>
    <tr>
	    <th>手机</th><td>100</td><td>500</td><td>200</td><td>400</td>
	</tr>
	<tr>
	    <th>笔记本</th><td>200</td><td>450</td><td>45</td><td>700</td>
	</tr>
	<tr>
	    
	</tr>
</table>

表单标签 <form></form>
在表单标签里面可以包含各种其他标签：文本框，文本域，列表，单选框，多选框，按钮…一个或者多个来组成一个表单

input 可以做文本输入框，按钮，文件，单选按钮，复选按钮

<input type="" name="" />

text 文本
password 密码
file 文件
checkbox 多选按钮
radio 单选按钮
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
image 图片

<input type="text" /> text和password的其他属性
name 名字
maxlength 最大字符长度
value 默认值
placeholder 提示信息

单选框

<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>

复选框

<input type="checkbox" name="hobby" value="reading" checked />

按钮(普通按钮，提交按钮，重置按钮)

<input type="button" name="" value="普通按钮"  />
<input type="submit" name="" value=""  />
<input type="reset" name="" value=""  />

图片提交按钮按钮

<input  type="image" name="image_submit" src="xxx.jpg"  />

下拉列表

<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>

文本域

<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>

form表单属性：
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面，适合传输少量数据，一般用于请求数据，明文传输
post把数据封装到http请求里面，适合传输大量数据和重要数据传输（登录，注册，发表文章）

框架

<frameset cols="25%,75%">  rows上下划分  cols 左右划分
   <frame src="frame_a.htm"/>
   <frame src="frame_b.htm" name="myname"/> 
</frameset>

frame的name，可以作为超链接的target（目标）
注意：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！