Web前端学习笔记1——基础的HTML5

目录

1. 超链接

2. 特殊符号

3. 列表 

 4. 其他常用标签

 5. meta和link标签 

6. 表格标签

7. 基础表单


HTML: 提供网页上显示的内容(结构)

CSS: 美化网页(样式)

JavaScript:控制网页行为(行为)

设计原则:结构 样式 行为分离

 

主要记录的是JavaScript学习过程中HTML的一些常用标签

1. 超链接

——锚点

你好啊 我是谁!

......... 锚点

点击该锚点即可定位到id为“sd”的位置

2. 特殊符号

   空格    <  <     >  >

3. 列表 

------- 前面的 ·啊,数字序列啊 后面都要干掉

——无序列表


  • 你是谁
  • 哈咯
  • 我是zxl

Web前端学习笔记1——基础的HTML5_第1张图片

——有序列表 

  1. 小张
  2. 喜欢
  3. 学软件

Web前端学习笔记1——基础的HTML5_第2张图片

—— 自定义列表

标题哦
我是1
我是2
我是3
我是4

Web前端学习笔记1——基础的HTML5_第3张图片

 4. 其他常用标签

    行内元素   显示在一行上面

    加粗 

斜体

下划线

删除线

23

上标 H2O

下标

Web前端学习笔记1——基础的HTML5_第4张图片

 5. meta和link标签 

    
    
    
    
    
    
    
    
    
    
    
    

6. 表格标签

    
    
张三 20
小丽 小王

Web前端学习笔记1——基础的HTML5_第5张图片

表格标准结构:

   
    

 表头标签以及单元格合并:

    
学生名单表
姓名 年龄
小李
小李 131
小李

Web前端学习笔记1——基础的HTML5_第6张图片

表单标题以及内容垂直对齐方式

    
    
姓名 年龄 性别
小丽 22

Web前端学习笔记1——基础的HTML5_第7张图片

细线表格

由于border = 1 相当于是2px,2个像素点。所以给border宽度设置1,那么很宽,通过设置背景 设置cellspacing可以解决。

    
超级课程表
星期一 星期二 星期三 星期四 星期五
上午 1 化学 物理 语文 数学 英语
2 数学 语文 化学 物理 英语
下午 1 化学 语文 数学 英语 物理
2 语文 数学 英语 物理 化学

Web前端学习笔记1——基础的HTML5_第8张图片

7. 基础表单

    
    
用户名:
密 码: 
  女
爱好: 唱歌    跳舞    游泳

Web前端学习笔记1——基础的HTML5_第9张图片

下拉选择:

    省(市): 
    

市区:

Web前端学习笔记1——基础的HTML5_第10张图片

多行文本以及文本上传

    
    
    

Web前端学习笔记1——基础的HTML5_第11张图片

    
    
    
    
    
分组

 

你可能感兴趣的:(前端基础)