博客列表 >html基础知识学习,元素属性和值,实体字符学习和感想

html基础知识学习,元素属性和值,实体字符学习和感想

移动用户-5435854
移动用户-5435854原创
2020年04月03日 17:49:17832浏览

html 基础

序号 内容 描述
1 文本内容 用户可见内容,入新闻,电话…
2 其他资源的引用 图片,视频,音频
3 标记 对文本,其他资源的描述
  1. <p>我是php中文网11期学员林国亨</p>
  2. <img src="logo.png" alt="log" />

2. html 设计思想

  • 超文本:是指包括了超链接的文本
  • 预定义标记:是用来描述内容的固定标签
  • 语言:html 并不是编程语言,只是书写 html 文档的工具

3. html 页面结构

emmet 教学(一种快速书写 html5 的语言)

快捷键:

control+? 可以快速出现注释

shift+alt+下箭头,快速复制
shift+alt+下箭头,快速复制

<!-- 厉害! -->

  1. <!DOCTYPE html>
  2. <!--通知浏览器,我是一个html5文档-->
  3. <html lang="en">
  4. <!-- en代表英文,如果不需要浏览器翻译,也可以设置成zh-cn -->
  5. <!-- html:根标签/根元素 -->
  6. <head>
  7. <!--head中的内容,用户不感兴趣,或者不需要用户看到,给浏览器看的/开发者看,也是为了seo-->
  8. <!--元数据:描述某种特定信息的数据 -->
  9. <!--当前字符集是utf-8 -->
  10. <meta charset="UTF-8" />
  11. <!--viewport:视口/可视区屏幕-->
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13. <title>当前页面标题</title>
  14. </head>
  15. <body>
  16. <!--这是用户真正看到的内容啦-->
  17. <h2>php中文网欢迎大学...</h2>
  18. </body>
  19. </html>

4.元素,属性和值

4.1 元素与标签

元素 标签 描述
非空元素 双标签 <p>学习让我很快乐</p>
空元素 单标签 <img src="1.jpg" alt="">

4.2 属性和值

  • 属性写在起始标签中
  • 值:预定义值,字符串,指定格式,数值,布尔值
  • 布尔:只要在元素中出现这个属性,就代表他是 true,如果不需要就不要写
  • 几乎所有元素都可以设置的三大通用属性:id,class,style,

chrome 检查

elements:查看页面元素
console:控制台,执行 javsscrip
sources:调试
netword:web 请求

5. 网页中的实体字符

  • 空白的处理:空格,制表符,换行符,html 里面,无论写多少个都算一个
  • <,>,&等字符具有特殊意义,需要转义后才允许添加到 html 文档
  • 转义字符语法: & + 字符实体名称 + ;, 如<,使用: <表示
  • Unicode极大的缓解了特殊字符的问题,推荐将文档编码设置为utf-8
  • 只需要在<head> <mata charset="UTF-8"> </head>
  • 常用转义字符表
序号 字符 描述 转义字符 实体编号
1 ' ' 空格 nbsp;
2 < 小于 < <
3 > 大于 > >
4 & &符号 & &
5 " 双引号 " "
6 © 版权 © ©
7 ® 已注册商标 ® ®
8 × 乘号 × ×
9 ÷ 除号 ÷ ÷

6. 文件与文件夹

  • html 写代码全部使用小写

  • .html.htm

  • 文件名:hello_world.php
    html 里面用中横线-
    变量名提交到 php 或者 java 只能用下划线_

7. url

7.1 语法

  • ulr:统一资源定位符,互联网上任何一个文件或资源,必须有一个唯一的访问地址,这地址就叫 url
  • url:
    https://www.php.cn/member/379.html

  • http/https:协议,模式

  • www.php.cn:域名/主机名,114.234.2.45
  • member/379.html:访问的资源在服务器上的真实路径

课程总结和体会:

因为原来一直做seo相关工作,因此对html代码还是有基本了解,就是没有系统学习过,有点像朱老师说的盲人摸象的感觉,哪里出了问题了,就百度一下,学习一下相关的问题的解决办法,一直想系统学习一下html相关知识,通过4月2日的课程,我熟悉了html基础的一些知识,课后我还将学习学习下!emmet的相关知识。还有vscode相关快捷键的使用的技巧。

本次课程的难点我觉得还是有关实体字符的,这个原来没接触过,感觉很晕。

ps:文档结构中每一条代码的功能:

文档结构中每一条代码的功能

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
移动用户-54358542020-04-03 17:50:022楼
不好意思,您批改完后,我又修改了一个内容。
移动用户-54358542020-04-03 17:35:441楼
谢谢老师,继续加油!