标签：web style 定义 元素 显示 笔记 HTML 程序设计 name
-
mvc架构中,url定位的不是服务器端文件资源而是controllers中定义的方法
-
HTMl
-
XML
- eXtensible Markup Language
- 主要是表达数据与信息
-
XHTML
- eXtensible HTML
- =HTML+XML
-
DHTML
- Dynamic HTML
- =HTML+CSS+JavaScript
-
HTML元素与标记
- HTML文档由element构成
- opening tag + content +closing tag
- 块元素和内联元素
- 块元素在显示的时候会另起一行，内联会跟在前面在同一行显示
- HTML文档由element构成
-
遵循XHTML规范编写网页
- tag名称小写
- 属性名小写
- 属性值用双引号括起来
- tag严格嵌套
- tag严格配对
-
浏览器解析HTML方式
- 多线程
- 流式
-
HTML设计网页
-
<!DOCTYPE html><!说明性标签><!ns "namespace"> <html xmlns="http://www.w3.org/1999/xhtml"><!后面的xmlns可以不写> <head> <titile></titile> </head> <body> <p><!一般段落文字用p-tag></p> <hr/> <!画一个水平线> <h1><!文字标题使用h,1代表1级标题，一共有9层></h1> <img src="" width="" height="" /> <a href=""><!这里插入链接的提示信息></a><!起到一个锚的作用><! Hypertext Reference> <ul><!列表元素,结构标签> <li></li> <li></li><!内容tag> </ul> <table border="1"><!表格tag,一个表格分成一些行，每一行分成一个个格子,border为缺省的表格线> <tr><!行的结构标签></tr> <tr> <td> <!每一个行标签里的具体一个格子，这里面填写格子的具体内容> </td> <td> <!这是该行的第二个格子> </td> </tr> <tr></tr> </table> </body> </html>
-
-
head常用的元素
- titile
- 定义网页标题，显示在浏览器的标题栏
- link
- 定义链接的外部资源，如css文件
- meta
- 定义媒体元数据信息，如缩放比例，字符编码
- style
- 用css定义可在该网页中引用的样式
- titile
-
默认情况下,html文档的多个空格会被浏览器解析为一个空格，为了能显示多个空格，可以用css
style="white-space;pre;"就可以显示多个空格了
-
特性attribute
- 全局特性
- id,name
- 在同一个网页中，不同的元素不能有相同的id值，但可以有相同的name值,id是为了区分是哪个元素，name是为了区分同一个元素中具有相同name的不同子元素,比如说我们的radio标签，还有option,使用同样的名字，这样在可以一次访问所有的
- style
- class
- 在元素的开始标记内引用在style或.css中定义的css类的名称
- 自定义特性
- data-* ,aria-*
- id,name
- 全局特性
-
HTML元素
- h1,h2,h3
- h1-h6,h1表示最大字体的标题，标题tag
- p,段落tag
- br
- 段内强制换行
- span
- 在行内定义一个区域标记,也就是说这个不会换行
- hr
- 水平分割线,自动实现段落的换行，并相对于父容器绘制一条长度为100%的水平线，同时还在水平线的上下方流出间隔
- sup,sub
- sup将它包含的文字显示位上标，比如说2的3次方的3，sub则为下表
- b,i
- b粗体，在不增加额外重要性的同时将词或短语高亮显示，i斜体
- code
- 包裹内联样式的代码片段
- <位<转义，> >,
- pre
- 对于多行代码，可以用pre表示,要注意转义 <>
- h1,h2,h3
-
容器div
- 用途是控制它包含的多个子元素，只需要控制div容器的显示和隐藏，就能让它包含的所有子元素显示或隐藏
- 默认情况下，div宽度占其父容器宽度的100%,块内的区域左对齐显示
- style="width:70%"设置宽度位父容器的70%
-
超链接
- 可以链接到这个页面的某一部分，利用#号分隔目标地址和链接位置的id名称
- 链接到锚点，用id特性指定锚点的名称，让超链接直接定位到网页内的某个位置<a href="#div1"
- target特性用来显示链接打开的方式
- _blank新建页面打开
- _self默认值，就在当前c页面打开
-
列表和导航
-
ul无序列表
- li有自动换行的作用，每个子项占一行
- 可以用style里面的list-style-type设置ul列表项的符号，disc实心圆，circle空心圆，square小方块，默认位disc
-
ol有序列表
- 默认序号为十进制数字
-
dl自定义列表
- 带有描述信息的短语列表，列表的每一个子项由dt和dd组成，dt定义子项的标题，dd是对dt的描述
-
nav
-
可以直接将导航链接放到nav标记中
-
<nav> <ul> <li><a></a></li> <li><a></a></li> </ul> </nav>
-
-
-
-
图像显示
- img
- src
- alt图像的文字说明，当图像不能显示或鼠标悬停在图片上将显示
- 一般用style的width或height之一设置图片的大小，此时会自动按比例缩放单位可以是像素，也可以是相当父容器元素的百分比
- img
-
音频
- audio
- 音频文件
- autoplay自动播放
- controls如果声明，将向用户显示播放按钮，播放进度条
- loop
- preload如果声明，则在页面加载时就加载音频，并预备播放，如果使用autoplay则忽略该特性
- src
- audio
-
视频
- video
- autoplay
- controls
- width
- height
- loop
- start开始播放的位置
- preload
- src
- video
-
表格table
- thead定义表头
- th定义每列的表头，文字为粗体居中，包含在thead之间
- tbody定义表格的主题
- tr定义表格的行，每个tr构成一行，如果定义了tbody,则应该包含在tbody之间
- td定义表格单元格，包含在tr
- tfoot定义表格的脚注
- col定义表格的列
- colspan在td和th标签中，指定单元格横向跨越的列数
- rowspan在td和th中，指定纵向跨越的行数
-
表单
-
form是其他界面交互元素的容器，用户和界面交互的内容一律保存在form元素内
- method特性
-
input
-
type特性，text,button,password,number,datetime,date,time,month,week,range,email,url,search,tel,color
-
name
-
placeholder类似于提示，水印的方式
-
titile当鼠标悬停在input元素的上面自动弹出title特性指出的提示信息
-
disabled特性禁用该元素
<input name="ressutl" type="text" disabled/> -
readonly将该元素设为只读，防止用户编辑内容
<input name="result" type="text" readonly/> -
required表示该input元素不能为null或者空字符串
<input name="nl" required/> -
min,max,maxlength
- min表示最小值
- max表示最大值
- maxlength表示最大长度
-
-
-
按钮
- name表示按钮名称，value表示按钮显示的值，type表示类型
- type
- reset重置按钮
- button普通按钮,点击后不会提交
- submit提交按钮
-
label
-
为input定义辅助显示的内容，有个for特性，一般和input的name绑定在一起，作用是当用户点击label显示的内容时，光标焦点会自动定位到与他绑定在一起的input元素上
<label for="name">用户名</label> <input name="name" type="">
-
-
fieldset
-
对子元素进行分组，在每个fieldset内可用legend设置组标题
-
<fieldset> <legend> </legend> </fieldset>
-
-
textarea
- 多行文本域
-
select
-
列表框，在内部通过option构造子项
-
<select name="gender"> <option selected>男</option> </select> -
默认情况下用户只能选择一项，但如果想选择多项，可以在select添加multiple
-
-
datalist
- 构造下拉框，除了提供列表选项外，还提供一个可编辑的文本框，可以让用户添加选项内没有的内容
- 内部也是使用options
-
单选
- radio,一组的name值必须相同,通过声明checked可以让其处于被选中的状态
-
复选
- checkbox
-
列表
标签：web,style,定义,元素,显示,笔记,HTML,程序设计,name 来源： https://blog.csdn.net/azraelxuemo/article/details/115539931
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。