前端与HTML | 青训营笔记

这是我参与第五届青训营伴学笔记创作活动的第一天 一、什么是HTML 1.HyperText Markup Language 即超文本标记语言 2.简单的HTML

<!标记了HTML是什么版本，标记就会让浏览器决定什么渲染模式>

页面标题

一级标题

段落内容

二、HTML语法 1.标签和属性不区分大小写，推荐小写 2.空标签可以不闭合，比如input、meta 3.属性值推荐用双引号包裹 4.某些属性值可以省略，比如required、readonly 三、HTML语义化是什么 1.HTML中的元素、属性及属性值都拥有某些含义 2.开发者应该遵循语义来编写HTML 3.有序列表用ol；无序列表用ul 4.lang属性表示内容所使用的语言 四、如何做到语义化 1.了解每个标签和属性的含义 2.思考什么标签最适合描述这个内容 3.不使用可视化工具生成代码 五、HTML结构 1.head 写页面的属性； body页面上显示的内容 ； title 页面的标题 2.段落标签：p； 换行标签：br 3.格式化标签： 加粗：string / b （b是bold简写） 倾斜：em / i （i是incline简写） 删除线：del / s （s是strikethrough简写） 下划线：ins / u （u是underline简写） 4.图片标签：img 可以加一些属性 alt：替换文本 titile：提示文本 width/height：控制高度宽度 5.超链接：a 可以放外部内部链接，也可以放# 空链接 网页元素链接：把元素放入a标签中 6.表格标签：table 可以给table加属性： border：加边框 th：加表头 width/height：控制高度宽度 cellspcing：去掉单元格空隙 cellpadding：内容距边框的距离，默认是1像素 align：表格相对于周围元素的对齐方式，比如align=“center” 7.列表标签： （1）无序列表：ul li （2）有序列表：ol li （3）自定义列表：dl（总标签）、dt（小标题）、dd（围绕标题来说明） 8.表单标签：form 在form中放一些和用户交互的组件 input标签，intput有多种形态 文本框：text 密码框：password 单选框：radio （name属性“多选一”；label：点击文字就可以选择对应框（label中for和input中id要一致；checked：默认选中）） 复选框：checkbox 按钮：button 提交按钮：reset 清空按钮：file select标签：下拉菜单 每个菜单项是：option 使用selected表示默认选项 textarea标签：多行编辑器 9.无语义标签： 盒子 div 块级元素 span：行内元素