web程序设计笔记(1)_web编程titile-CSDN博客

本文链接：https://blog.csdn.net/azraelxuemo/article/details/115539931

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
- 块元素和内联元素
  - 块元素在显示的时候会另起一行，内联会跟在前面在同一行显示
遵循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定义可在该网页中引用的样式
默认情况下,html文档的多个空格会被浏览器解析为一个空格，为了能显示多个空格，可以用css

style="white-space;pre;"就可以显示多个空格了
特性attribute
- 全局特性
  - id,name
    - 在同一个网页中，不同的元素不能有相同的id值，但可以有相同的name值,id是为了区分是哪个元素，name是为了区分同一个元素中具有相同name的不同子元素,比如说我们的radio标签，还有option,使用同样的名字，这样在可以一次访问所有的
  - style
  - class
    - 在元素的开始标记内引用在style或.css中定义的css类的名称
  - 自定义特性
    - data-* ,aria-*
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
  - 包裹内联样式的代码片段
  - &lt位<转义，&gt >,
- pre
  - 对于多行代码，可以用pre表示,要注意转义 <>
容器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之一设置图片的大小，此时会自动按比例缩放单位可以是像素，也可以是相当父容器元素的百分比
音频
- audio
  - 音频文件
  - autoplay自动播放
  - controls如果声明，将向用户显示播放按钮，播放进度条
  - loop
  - preload如果声明，则在页面加载时就加载音频，并预备播放，如果使用autoplay则忽略该特性
  - src
视频
- video
  - autoplay
  - controls
  - width
  - height
  - loop
  - start开始播放的位置
  - preload
  - src
表格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
列表