接下一篇：HTML总2-表格&表单form-input/select/textarea
W3C-html简易编辑器

HTML速记

html：页面显示的内容

css：进行样式布局的

js：让页面元素动起来

关于标签的嵌套

超链接不能嵌套超链接
P标签不能嵌套P标签
标题标签h1…h6也不能互相嵌套

html标签

     <head><!-- 字符集 --><meta charset="utf-8"><!-- 网页的标题 --><title>运行后网页的标题</title></head><body><!-- <br> ：换行标签 -->1、br换行标签<br><!-- 水平线/分割线width 宽度align ： 默认居中可设置左对齐或者右对齐-->2、hr：水平线，可设宽高<hr width="30%" align="left"><br><!-- 3、字体标签 fontsize：范围1-7 字体由小到大color：设置字体颜色face：字体--><font size="3" color="blue" face="黑体">3、字体标签font： size="3" color="blue" face="黑体"--size：范围1-7；字体由小到大，7最大1最小</font><br><font size="1" color="#8ACD5A"  face="宋体">size=1，face="宋体"的字体</font><br><br><!-- 4、img 标签可以引入图片src:图片路径height：图片的高width：图片的宽title：鼠标悬停时的提示信息alt：图片地址错误时的信息px:  像素单位，  100px:100像素width=“100%”   ： 100%表示铺满整个页面-->4、img 图片标签 ：img src="1.jpg" height="50px" width="100px" title="悬停信息" alt="图片找不到后提示的信息"<img src="1.jpg" height="50px" width="100px" title="悬停信息" alt="图片找不到后提示的信息"><!-- 5、标题标签 h1-h6 会自动换行 --><h1>5、标题标签 h1-6,会自动换行</h1><h6>标题标签 h6，h5很少用</h6><!-- p 标签是段落标签，会自动换行 --><p>段落标签：p标签，会自动换行</p><!--加粗倾斜-->6、文本修饰标签<b>加粗b标签</b><i>倾斜i标签</i><u>下划线u标签</u>删除和插入一般配合使用<del>删除线del标签</del><ins>插入文本ins</ins><strong>强调标签strong，也会加粗</strong><em>强调标签em，也会倾斜</em><sub>下标文本sub</sub><sup>上标文本sup</sup><br><br><!-- 表格标签table:  -->7、表格标签table: tr--代表一行;th--代表每一个表头单元格，会自动加粗居中;td--一个普通的单元格。caption--定义表格标题td-cellspacing-单元格间隙td-align=“center”：对齐方式表格宽度、内容居中的简便写法：col width="80px">      col :表示列，单向标签<br>table：border="2px" cellspacing="0px" background="1.jpg" 可设表格外框粗细及图片背景。<br>跨行合并单元格：td:rowspan="2" <br>跨列合并：colspan="xx"<br><!--    tr：代表一行th:代表每一个表头单元格，表头单元格会自动加粗并居中显示。td:一个普通的单元格--><table border="2px" cellspacing="0px" background="1.jpg">table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249"<tr><!-- Ctrl + shirt + R --><th>tr</th><th>th</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr><tr><th>tr</th><td>td</td><td>小名</td><td>71</td><td rowspan="2">男</td><td>44</td></tr><tr><th>tr</th><td>td</td><td>100</td><td>89</td></tr></table><!-- 8、多媒体标签和超链接标签embed音频、视频 -->8、多媒体（音频、视频）embed标签；背景音乐(audio)；视频(video)<embed src="xx.mp3" width="200px" height="50px">       <embed src="xxx.mp4">            src资源路径controls：控制条autoplay：自动放<video src=“xx.mp4” controls autoplay></video><audio src="xx.mp3" controls autoplay></audio><br><!-- 超链接a标签--默认在当前页面打开；设置target="_blank" 会在一个新的标签页打开-->超链接a标签-加target="_blank" 会打开一个新的标签页。<br>外部链接：（网址）<a href="http://www.baidu.com">点击百度（在此页点开）</a><br>内部链接：（项目内，如html文件）<a href="new_file01.html" target="_blank">点击html文件</a><br>下载链接（文件或压缩包时，会进行下载）：<a href="xx.mp4">视频链接</a><br>空链接：（href="#"）<a href="#">这个是空链接</a><br>通过base标签统一设置页面超链接的显示目标< base target="_blank" / > <!-- 9、列表标签 --><!-- 无序列表ul-li --><h4>9、列表标签</h4><ul type="square">无序列表ul-li;直接在< ul>< /ul>标签中输入其他标签或者文字的做法是不被允许的。设置项目序号：  type="disc"     默认实心圆type="circle"      空心圆type="square"      实心方块<li>张三</li><li>李四</li><li>王五</li><li>赵六</li></ul><ul><li>张三</li><li>李四</li><li>王五</li><li>赵六</li></ul><!-- 有序列表ol:type="I"--><ol type="I">有序列表ol:type="I/1/A/a/i";ol-li<li>张三</li><li>李四</li><li>王五</li><li>赵六</li></ol><!-- 定义列表dl:--><dl>定义列表dl:（多用于页面底端，如注明一些人）<dt>dt:定义专业术语或名词</dt><dd>dd:对名词进行解释 </dd><dt>dt:html</dt><dd>dd:超文本标记语言 </dd></dl><!--10、 锚点设置 --><ul>10、 锚点设置（两种实现方法#id或name属性）：点哪跳哪（运用：回到顶部）(li+a标签;#id/name属性)<li ><a href="#qq">用户管理</a></li><li ><a href="#ae">订单管理</a></li></ul><!-- 或设id --><a name="qq"></a><h1>用户管理</h1><p>张三</p><a name="ae"></a><h1>订单管理</h1><p>张三李四</p><p>李四</p><!-- 11、内嵌式框架iframe -->11、内嵌式框架iframe<iframe src="xx.html" width="500px" height="500px"></iframe><br><!-- 12、实体字符 -->12、实体字符：<h5>“&+lt、&+gt”：大于小于号</h5>&lt、&gt<br><h5>“&+quot：双引号”</h5>&quot;双引号&quot; <br><h5>&+reg：®注册商标；版权符©：&+copy;摄氏度&+deg；空格&+nbsp（要加；）”</h5>注册商标&reg；版权符&copy；摄氏度&deg；<h5>“&+euro：€”</h5>&euro;<br><img src="https://img-blog.csdnimg.cn/20200627001918235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjQzNTk4,size_16,color_FFFFFF,t_70" alt=""><h3>13、div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。div是division缩写，表示分割，分区。span意为跨度、跨距。</h3><div>div标签用来布局，但是一行只能放一个<div>xxxx（div会自动换行）xxx大盒子<br><span>span标签用来布局，一行可以放多个<span><br>14、表单form-input/select/textarea<form action="url" method="提交方式get/post" name="表单域名">  表单控件</form><h3>1、input 控件 </h3><!--1. text属性：文本框。2. password:密码框。3.  radio （小圆框）如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个。（radio、checkbox按钮name值要一样！！！要求单选按钮和复选框要有相同的name值）4. checkbox （小方框）属性。5. button属性：普通按钮框。6. submit属性：点击提交按钮后，把表单域form的表单元素里面的值传到后台服务器；type="submit"：提交按钮。 7. reset属性：重置按钮8. image属性 9. file属性：上传文件、头像 --><input type="text" value="hi">input不会自动换行<br>性别：男<input type="radio" name="radio"> 女<input type="radio" name="radio"> <br>        爱好：吃饭<input type="checkbox" name="hobby">  睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><!--8. placeholder:灰色字的提示9. size属性10. value属性：打开页面就默认显示的字，用value 来设置。11. name属性：表单名字， 后台通过name属性找到这个表单。 用于区别不同的表单。（name和value是每个表单元素都有的属性值主要给后台人员使用）12. checked属性：表示默认选中状态。 较常见于 单选按钮和复选按钮。13. maxlength：正整数；现定输入字段中的字符的最大长度。14. disabled ：禁止选中。 15. label 标签为 input 元素定义标注（标签）：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。- 第一种用法就是用label标签直接包含input表单， 适合单个表单选择- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)： 通过设置for 属性与元素id的值相同来绑定。 --><br>   <br><b>label标签：选文字或按钮或男/女字都能选：通过设置for 属性与元素id的值相同来绑定。</b><br><label for="username">用户名:</label><input type="text" id="username"> <br><input type="radio" name="sex" id="nan"> <label for="nan">男</label><input type="radio" name="sex" id="nv"><label for="nv">女</label><h3>2、select下拉列表 </h3><p>最少要有一个option。</p>- 在option中定义selected =" selected "时，当前项即为默认选中项。<br>- 在option中定义disabled ：禁止选中。disabled="disabled"<br>- 在option中定义multiple：可以实现多选。可显示多个下拉值。multiple="multiple"<br>- size:下拉框显示个数。（默认为1；如size="2"）<br></p>籍贯:   <select>       <option>上海</option>  <option>北京</option> <option selected="selected">广州</option> </select><br>显示2个下拉框值 :   <select size="2">       <option>上海</option>                          <option selected="selected">广州</option> <option>北京</option> </select><br><br>显示多个下拉框值 <select multiple="multiple"><option >吃</option><option>北京</option><option>地方</option> <option disabled ="disabled">和</option><option>预定</option> </select><h3>3、textarea控件(文本域)</h3><!-- 通过textarea控件可以轻松地创建多行文本输入框.
- cols=“每行中的字符数” rows=“显示的行数” (我们在实际开发中不会使用，都是用CSS来改变大小) -->留言: <textarea cols="50" rows="5">留言用textarea写的xxx.    </textarea><br><!-- 13、相对路径-->15、相对路径：一点.表示当前路径；两个.表示上一级路径。<br><!-- 14、marquee标签-->16、marquee标签：跑马灯效果标签<br><br><!-- 15、日期 -->17、年月日：input type="date"  value="2022-12-12" name="mouth_start/end:年月日开始-结束形式：<br><input type="date" value="2022-12-12" name="mouth_start"/><input type="date" value="2022-12-12" name="mouth_end"/><br><!-- type=date 年月日时分形式 -->年月日时分形式：type="datetime-local"<br><input type="datetime-local" value="2022-12-12" name="mouth_end"/></body>

HTML总1-标签笔记相关推荐

html5.0笔记,动易sf5.0标签笔记.doc
动易sf5.0标签笔记网站首页标签调用动易SiteFactory 文章模型标签作者:动易网络文章来源:灯火点击数:1617 更新时间:2011-4-16 20:20:52标签名: {PE.La ...
第一周预习HTML标签(笔记可以不记，代码一定要敲）
代码就是要多多的敲,在学习Pink老师的课的时候发现,可以用代码作为笔记,看起来既直观,又有了实践的过程,一举两得.所以以后复习知识,直接打开相应的网页就可以了~ 可能以后会有补充的相关问题,如果有更 ...
html img图片等比例缩放_我掏空了各大搜索引擎，整理了HTML图片标签笔记，满满干货...
img标签介绍介绍 img: 英文全称 image(图像),代表的是一张图片. 如果要想在网页中显示图像,就可以使用img 标签,它是一个单标签.语法如下: <img src="图片 ...
HTML之＜p＞＜/p＞标签笔记
p标签不适合做容器测试代码 <!doctype html><html lang="zh-CH"><head><meta charset= ...
《大数据之路：阿里巴巴大数据实践》总述-读书笔记
目录 0.前言 1.总述 0.前言今天花了些时间较为详细的阅读了<大数据之路:阿里巴巴大数据实践>,主要内容如下及后续篇幅. 1.总述从下至上依次分为数据采集层.数据计算层.数据服务层 ...
常见 html 标签笔记（一）
html标签 1.html基础元素 1.h1-h6来定义html文档的标题 h1-h6是双标签的标记元素本身占一整行其中和h1的标题最大 h6的标签最小实例如下: <h1>这是最 ...
POSCMS标签笔记
通用标签标题 {$meta_title} meta关键词 {$meta_keywords} meta描述 {$meta_description} 样式路径 {THEME_PATH} 模板样式路径 { ...
拜读阮一峰JavaScript教程笔记
读了不知道几遍,每次都没总结合做笔记,所以很多内容都记不住,如果平时没应用到实际中,那知识跟像过眼云烟,于是还是谢谢博客记记笔记,好好学习天天向上. 原教程链接: http://javascript. ...
计算机网络笔记Part4 网络层（Network Layer）
本人计算机网络笔记总目录计算机网络笔记Part1 概述计算机网络笔记Part2 物理层(Physical Layer) 计算机网络笔记Part3 数据链路层(Data Link Layer) 计算 ...

HTML总1-标签笔记

HTML速记

关于标签的嵌套

html标签

HTML总1-标签笔记相关推荐

最新文章

热门文章