10.1 前端（1-26）

笔记记事本 网页.txt .html或.htm标签体验marquee你好/marquee双标签单标签标签格式例1.marqueeloop1bgcolororange你好/marqueeinputtypepassword2.有些特殊的属性没有属性名只有属性值inputdisabled注意标签中不要出现同名属性否则后写的会失效inputtypetexttypepasswordHTML基本结构例htmlheadtitle我的网页/title/headbodyp互联网我来了/p/body/html格式注释:!--注释--可注释元素暂时不参与运行快捷键Ctrl/文档声明告诉浏览器网页当前版本必须写在第一行H5的doctype:!DOCTYPEhtml字符编码ASCII大写 小写字母 数字 一些符号 128个ISO8859-1在ASCII基础上拓展一些希腊字符等 256个GB23126763个汉字 682个字符GBK汉字和符号20000支持繁体中文UTF-8万国码包含世界所有语言 文字和符号 常用为了让浏览器在渲染html文件时不犯错误可以通过meta标签配合charset属性指定字符编码.headmetacharsetUTF-8//head设置语言写法htmllangzh-CNlang属性编写规则语言-国家-地区例zh-CN en-US语言-具体种类例zh-Hans zh-HantTTML标准结构!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我是一个标题/title/headbody/body/html在存放代码的文件夹中存放一个favicon.ico图片可配置网站图标开发者文档W3C官网:www.w3c.orgW3School:www.w3school.com.cnMDN:developer.mozilla.org–平时用的最多排版标签h1~h6标题双p段落双div没有任何含义,用于整体布局双示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleDocument/title/headbodyh1我是一级标题/h1divp1我是一个段落/p1p2我是一个段落/p2p3我是一个段落/p3/divdiv文字/div/body/html效果注意h1最好写1个h1~h6不能相互嵌套p里面不能有h1~h6pdiv块级元素独占一行例marquee,h1~h6,p,div行内元素不独占一行例input,span规则块级元素中能写行内元素块级元素几乎什么都能写行内元素中能写行内元素但不能写块级元素特殊规则h1~h6不能相互嵌套p标签中不能写块元素常用的文本标签em着重阅读内容strong十分重要的内容span没有语义用于包裹短语的通用容器div大包装袋span小包装袋不常用的文本标签cite作品标题dfn特殊术语或专属名词del与ins删除的文本【与】插入的文本sup与sub下标【与】上标code一段代码samp从正常的上下文中将某些内容提取出来kbd键盘文本abbr缩写最好配合title属性bdo更改文本方向要配合dir属性可选值ltr默认值、rtlvar标记变量可以与code标签一起使用small附属细则b摘要中的关键字、评论中的产品名称i多用于呈现字体图标u与正常内容有反差的文本q短引用blockquote常引用address地址信息图片标签img常用属性src图片路径/地址—具体位置alt图片描述width宽height高作业!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleDocument/titlestyleh2{color:darkblue;}h3{color:grey;}img{width:100px;height:150px;}/style/head!--26210720高宇江--bodydivh2梅花/h2h32~4/h3imgsrc/images/C2.pngimgsrc/images/C3.pngimgsrc/images/C4.png/divdivh2方片/h2h35~7/h3imgsrc/images/D5.pngimgsrc/images/D6.pngimgsrc/images/D7.png/divdivh2红桃8~10/h2h3/h3imgsrc/images/H8.pngimgsrc/images/H9.pngimgsrc/images/H10.png/divdivh2黑桃/h2h3j~k/h3imgsrc/images/SJ.pngimgsrc/images/SQ.pngimgsrc/images/SK.pngimgsrc/images/SA.png/div/body/html