HTML笔记

最新推荐文章于 2024-09-16 23:05:35 发布

PPDY小芽

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量623

点赞数

文章标签： html 列表

本文链接：https://blog.csdn.net/PPDY93/article/details/116676233

版权

这篇博客主要介绍了HTML的基础知识，包括列表、表格、多媒体和map的使用。此外，还讲解了CSS的选择器、属性选择题以及form表单的相关内容。同时，提到了一些代码编辑器的快捷键和JS基础，如DOM操作和事件处理。

摘要由CSDN通过智能技术生成

文章目录

基础知识
列表
表格
多媒体
map
---------------------------------------------------
*作业+代码*
快捷键
form表单
CSS
---------------------------------------------------
*作业+代码*
盒子模型
浮动
js

基础知识

1. html页面结构  文本文档，后缀更改为html  或  htm
   <html>
        <head>
            <meta/> 定义网页的信息，比如网页的编码格式
            <title>网页标题</title>
        </head>
        <body>
             网页展示的信息
        </body>
   </html>

2. <h1>标题标签h1---h6</h1>
3. 超链接 a
  1>  <a href="http://www.baidu.com" target="_self|_blank">百度 页面间链接</a>
  2>  锚链接
       <a name="名字">定义锚 </a>
       <a href="#锚名字">使用锚 </a> 
            不同页面<a href="页面路径#锚名字"></a>
  3>  功能性链接 
      <a href="mailto:邮箱地址">xxx</a>
4. 图片 
  <img src="图片位置" width="宽度" height="高度" title="鼠标悬浮时的提示文字" alt="图片不显示的时候的提示文字" align="图片周围文字的对齐效果，上:top 中:middle 下:bottom"/>             
5. <p>段落标记</p>
6. <br/>换行,自闭和
7. <hr width="像素|百分比" color=""/>水平线
8. <font face= "字体" size="大小“ color="颜色">文字</font>
9. <u>下划线</u>
10. <del>删除线</del>
11. <b>加粗</b>
12. <i>斜体</i>
13. <sub>下标</sub>
14. <sup>上标</sup>
15. <pre>原样输出</pre>

列表

无序列表：ul li 默认是 disc
ul type=“disc实心圆|circle空心圆|square实心方块”
有序列表： ol li 默认是1 2 3
ol type=“a A 1 i I”
定义列表 dl dt dd

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol type="1" >
			<li>
				<ol type="A">
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
				</ol>
			</li>
			<li>
				<ol type="A">
					<li>21</li>
					<li>22</li>
					<li>23</li>
					<li>24</li>
				</ol>
			</li>
			<li>
				<ol type="A">
					<li>31</li>
					<li>32</li>
					<li>33</li>
					<li>34</li>
				</ol>
			</li>
		</ol>
	</body>
</html>

表格

table定义的

border=“边框” cellpadding:文件和内边距线的距离cellspacing:内边距线和外边距之间的距离
bgcolor:背景颜色
background：背景图片
align:表格的位置左中右

thead
tbody
tfoot

tr:行 align:表格的位置左中右一行文字在单元格的位置
valign:文字在单元格中的垂直对齐方式 top上 middle中 bottom下
td:列
跨行：rowspan
跨列: colspan

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>EE</title>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="0" bgcolor="aquamarine">
			<thead>
			    <tr align="center">
			    	<td colspan="6">
			    		课程表
			    	</td>
		    </thead>
		
		    <tbody>
		    	
			<tr>
				<td>日期时间</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr>
				<td rowspan="3">上午</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
			</tr>
			<tr>
				
				<td>32</td>
				<td>33</td>
				<td>34</td>
				<td>35</td>
				<td>36</td>
			</tr>
			<tr>
				
				<td>42</td>
				<td>43</td>
				<td>44</td>
				<td>45</td>
				<td>46</td>
			</tr>
			<tr>
				<td rowspan="3">下午</td>
				<td>52</td>
				<td>53</td>
				<td>54</td>
				<td>55</td>
				<td>56</td>
			</tr>
			<tr>
				
				<td>62</td>
				<td>63</td>
				<td>64</td>
				<td>65</td>
				<td>66</td>
			</tr>
			<tr>
				
				<td>72</td>
				<td>73</td>
				<td>74</td>
				<td>75</td>
				<td>76</td>
			</tr>
		</tbody>
		
		<tfoot>
			<tr >
				<td align="right" colspan="6">制表时间:2021-5-9</td>
			</tr>
		</tfoot>
		
		</table>		
	</body>
</html>

多媒体

<audio src="地址" controls=""| autoplay=""></audio>
<audio  controls=""| autoplay="">
<source src=""/>
<audio>  音频
 <video>视频 同上

</video>

map

<img src="" usemap="#map"/>
             <map id="map" name="map">
                   <area coords="" shape="rect" href=""/>
             </map>

---------------------------------------------------

作业+代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业1</title>
	</head>
	<body>		
		<h1>将进酒  <font size="5">君不见黄河之水天上来</font></h1><br />
		<table >
			<tr>
				<td><img src="img/1620812990(1).png" width="260" align="center"></td>
				<td align="left"><pre>
					君不见黄河之水天上来，奔流到海不复回。<br>
                                        君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
                                        人生得意须尽欢，莫使金樽空对月。<br>
　　                                 天生我材必有用，千金散尽还复来。<br>
　　                                 烹羊宰牛且为乐，会须一饮三百杯。<br>
　　                                 岑夫子，丹丘生，将进酒，杯莫停。<br>
　　                                 与君歌一曲，请君为我倾耳听。<br>
　　                                 钟鼓馔玉不足贵，但愿长醉不复醒。<br>
　　                                 古来圣贤皆寂寞，惟有饮者留其名。<br>
　　                                 陈王昔时宴平乐，斗酒十千恣欢谑。<br>
　　                                主人何为言少钱，径须沽取对君酌。<br>
　　                                五花马，千金裘，<br>
　　                                呼儿将出换美酒，与尔同销万古愁。
				</td></pre>
	        </tr>
	    </table>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业2</title>
	</head>
	<body>
		<h1>
			工商银行电子汇款单
		</h1>
		<table border="1" cellpadding="3" cellspacing="0">
			<tbody>
				<tr>
					<td colspan="2">回单类型</td>
					
					<td>网上转账汇款</td>
					<td colspan="2">指令序号</td>
					
					<td>HQH000000000000013878172</td>
				</tr>
				<tr>
					<td rowspan="4">收款人</td>
					<td>户名</td>
					<td>老牟</td>
					<td rowspan="4">付款人</td>