html基础

h标签:
1.h标签都是加粗的字体,主要用于标签
2.h1标签在一个页面只能出现一次
3.h1~h6字体有大到小
<h1>我是标签1</h1>
<h2>我是标签2</h2>
<h3>我是标签3</h3>
<h4>我是标签4</h4>
<h5>我是标签5</h5>
<h6>我是标签6</h6>
p标签: 段落标签,块级标签,独占一行,p标签不能嵌套p标签
<呵呵p></呵呵p>

a标签:超链接标签 页面之间的跳转 <a href="跳转的地址">
1.<a href="#"></a> # 表示标记,回到顶部,页面不会刷新
2. <a href="html_2.html">我是a标签</a> 跳转到指定页面
3.a锚点标记标签之间的滚动跳转: 点击"我要跳转到顶部a标签" 就会跳转到 "我是顶部a标签"

<a id="tag" href="javascript:void(0);">我是顶部a标签</a>
<a href="#tag">我要跳转到顶部a标签</a>

hr标签:<hr>一条水平分割线
br标签:<br> 切分段落,一个br标签相当于一个tab键; 中国<br>北京
b标签:加粗标签 <b></b>
i标签:倾斜标签 <i></i>
u标签:下划线标签 <u></u>
空格标签: &nbsp;
&lt:表示小于符号
&gt:表示大于符号
&quot:表示引号
&copy:表示版权号
&times:表示“X”


图片:
1.BMP--格式--位图格式(点阵图)-------占用空间大,色彩丰富
2.JPEG--压缩格式--通常是破坏数据性压缩方式,失真
3.GIG--对透明度和多帧支持,动态多
4.PNG--透明图片格式,无压缩的位图格式,支持AIpha通道的透明、半透明特性
5.<img src="timg.jpeg" alt="风景" width="700" height="450" title=“美丽的风景”/>
* src:图片的地址
* alt: 图片描述
* wigth: 图片宽度
* height:图片高度
* title:当鼠标移到图片显示的信息
6.点击图片跳转到某个网页
<a href="http://www.baidu.com">
<img src="timg.jpeg" alt="风景" width="700" height="450"/>
</a>
列表:
无序列表:
* disc实心园
* square 实心方块
* circle 空心园
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
有序列表:
type="a" 序号从a到大z
type="A" 序号从A到Z
<ol type="">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ol>
自定义列表:
dt:表示标题
dd:表示内容
< dl>
<dt>教程</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>历史</dd>
<dd>地里</dd>
</dl>

表格:
tr:表示的行
td:表示的列
rowspan:合并行,从左往右
colspan:合并列,从上往下
caption:添加标题
thead:表示表头
th:标题加粗
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!--<caption>就空格</caption>-->
<tr>
<td>aa</td>
<td>ff</td>
<td>oo</td>
<td rowspan="2">dd</td>
</tr>
<tr>
<td>hh</td>
<td>jj</td>
<td>kk</td>

</tr>
</tbody>
表单域:
action:里面填写请求的地址
radio: 表示当选框
check:复选框
submit:提交
text:文本输入
password:密码输入框
maxlength:最大输入字符
readonly:只读
disabled:禁止,背景置灰
placeholder:输入框提示信
checked:默认选中
get:显示提交,不安全
post:隐士提交,比较安全
<label for="man">男</label>:增加点击的范围,增加用户体验,一般都绑定唯一的id
单选框,添加name属性并且值相等,就表示互斥
<form action="#" method="post">
账号:<input name="user" type="text" placeholder="请输入账号"><br>
密码:<input name="passwd" type="password" placeholder="请输入密码"><br>
性别:<input id="man" type="radio" name="gender" value="1"><label for="man">男</label>
<input id="wman" type="radio" name="gender" value="0"><label for="wman">女</label>
<br>

兴趣爱好:
<input id="run" name="run" type="checkbox" value="1"><label for="run">跑步</label>
<input id="bask" name="baskeball" type="checkbox" value="2"><label for="bask">打篮球</label>
<input id="play" name="play" type="checkbox" value="3"><label for="play">玩游戏</label>
<input id="skip" name="skip" type="checkbox" value="4"><label for="skip">跳街舞</label>
<br>
<input type="submit" value="ok">
</form>
下拉列表:
size:展示信息的个数
selected:默认展示
<select size="2">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option selected value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>

多行文本输入框:
<textarea cols="30" rows="10"></textarea>
按钮:
<input type="button" value="按钮">
重置:
<input type="result" value="重置">
隐藏与:用于认证 value一般都是服务器返回,是不伪造ip
<input type="hidden" name="hidden" value="3213rewrewrewr90uc0ds9aufjo">

pre:保留换行和空格
<pre>
&lt;input type="button" value="按钮"&gt;
&lt;input type="reset" value="重置"&gt;
&lt;input type="hidden" name="hidden" value="3213rewrewrewr90uc0ds9aufjo"&gt;
</pre>

h标签:
1.h标签都是加粗的字体,主要用于标签
2.h1标签在一个页面只能出现一次
3.h1~h6字体有大到小
<h1>我是标签1</h1>
<h2>我是标签2</h2>
<h3>我是标签3</h3>
<h4>我是标签4</h4>
<h5>我是标签5</h5>
<h6>我是标签6</h6>
p标签: 段落标签,块级标签,独占一行,p标签不能嵌套p标签
<呵呵p></呵呵p>

a标签:超链接标签 页面之间的跳转 <a href="跳转的地址">
1.<a href="#"></a> # 表示标记,回到顶部,页面不会刷新
2. <a href="html_2.html">我是a标签</a> 跳转到指定页面
3.a锚点标记标签之间的滚动跳转: 点击"我要跳转到顶部a标签" 就会跳转到 "我是顶部a标签"

<a id="tag" href="javascript:void(0);">我是顶部a标签</a>
<a href="#tag">我要跳转到顶部a标签</a>

hr标签:<hr>一条水平分割线
br标签:<br> 切分段落,一个br标签相当于一个tab键; 中国<br>北京
b标签:加粗标签 <b></b>
i标签:倾斜标签 <i></i>
u标签:下划线标签 <u></u>
空格标签: &nbsp;
&lt:表示小于符号
&gt:表示大于符号
&quot:表示引号
&copy:表示版权号
&times:表示“X”


图片:
1.BMP--格式--位图格式(点阵图)-------占用空间大,色彩丰富
2.JPEG--压缩格式--通常是破坏数据性压缩方式,失真
3.GIG--对透明度和多帧支持,动态多
4.PNG--透明图片格式,无压缩的位图格式,支持AIpha通道的透明、半透明特性
5.<img src="timg.jpeg" alt="风景" width="700" height="450" title=“美丽的风景”/>
* src:图片的地址
* alt: 图片描述
* wigth: 图片宽度
* height:图片高度
* title:当鼠标移到图片显示的信息
6.点击图片跳转到某个网页
<a href="http://www.baidu.com">
<img src="timg.jpeg" alt="风景" width="700" height="450"/>
</a>
列表:
无序列表:
* disc实心园
* square 实心方块
* circle 空心园
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
有序列表:
type="a" 序号从a到大z
type="A" 序号从A到Z
<ol type="">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ol>
自定义列表:
dt:表示标题
dd:表示内容
< dl>
<dt>教程</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>历史</dd>
<dd>地里</dd>
</dl>

表格:
tr:表示的行
td:表示的列
rowspan:合并行,从左往右
colspan:合并列,从上往下
caption:添加标题
thead:表示表头
th:标题加粗
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!--<caption>就空格</caption>-->
<tr>
<td>aa</td>
<td>ff</td>
<td>oo</td>
<td rowspan="2">dd</td>
</tr>
<tr>
<td>hh</td>
<td>jj</td>
<td>kk</td>

</tr>
</tbody>
表单域:
action:里面填写请求的地址
radio: 表示当选框
check:复选框
submit:提交
text:文本输入
password:密码输入框
maxlength:最大输入字符
readonly:只读
disabled:禁止,背景置灰
placeholder:输入框提示信
checked:默认选中
get:显示提交,不安全
post:隐士提交,比较安全
<label for="man">男</label>:增加点击的范围,增加用户体验,一般都绑定唯一的id
单选框,添加name属性并且值相等,就表示互斥
<form action="#" method="post">
账号:<input name="user" type="text" placeholder="请输入账号"><br>
密码:<input name="passwd" type="password" placeholder="请输入密码"><br>
性别:<input id="man" type="radio" name="gender" value="1"><label for="man">男</label>
<input id="wman" type="radio" name="gender" value="0"><label for="wman">女</label>
<br>

兴趣爱好:
<input id="run" name="run" type="checkbox" value="1"><label for="run">跑步</label>
<input id="bask" name="baskeball" type="checkbox" value="2"><label for="bask">打篮球</label>
<input id="play" name="play" type="checkbox" value="3"><label for="play">玩游戏</label>
<input id="skip" name="skip" type="checkbox" value="4"><label for="skip">跳街舞</label>
<br>
<input type="submit" value="ok">
</form>
下拉列表:
size:展示信息的个数
selected:默认展示
<select size="2">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option selected value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>

多行文本输入框:
<textarea cols="30" rows="10"></textarea>
按钮:
<input type="button" value="按钮">
重置:
<input type="result" value="重置">
隐藏与:用于认证 value一般都是服务器返回,是不伪造ip
<input type="hidden" name="hidden" value="3213rewrewrewr90uc0ds9aufjo">

pre:保留换行和空格
<pre>
&lt;input type="button" value="按钮"&gt;
&lt;input type="reset" value="重置"&gt;
&lt;input type="hidden" name="hidden" value="3213rewrewrewr90uc0ds9aufjo"&gt;
</pre>

 

原文地址:https://www.cnblogs.com/an5456/p/10681474.html